В настоящее время я изучаю, как использовать WebRTC в javascript.
Вот коды, которые я написал:
main.html
<!DOCTYPE html>
<header>
<title>video and audio</title>
<style>
html {
height: 100%;
}
body {
min-height: 100%;
height: 100%;
margin: 0;
}
#video {
height: 50%;
width: 50%;
border: 1px solid black;
}
#audio {
height: 50%;
width: 50%;
border: 1px solid black;
}
</style>
</header>
<body>
<div id = "video"></div>
<div id = "audio"></div>
</body>
<script src = "WebRTC.js" type = "text/javascript"></script>
</html>
WebRTC.js
const constraints = {audio: true, video: {width: 1280, height: 70}}
navigator.mediaDevices.getUserMedia(constraints)
.then (
(mediaStream) => {
console.info('success')
const video = document.querySelector('#video');
video.srcObject = mediaStream;
video.onloadedmetadata = () => {video.play();}
})
.catch (
console.info('unsuccessful')
)
Когда я открываю его, он запрашивает у меня разрешение на доступ к моей камере, и консоль возвращает «успешно». Так что я думаю, что код работает нормально
Однако видео не отображается на <div id = "video">
. Я искал решение, но пока ничего не придумал. Я был бы признателен, если бы вы могли помочь мне найти то, что мне здесь не хватает. Большое спасибо.
Вам не нужна библиотека для использования webrtc, @LakshyaRaj. ОП, вы пробовали использовать реальный элемент видео, а не просто div? developer.mozilla.org/en-US/docs/Web/HTML/Element/video
просто играйте после прикрепления медиа-ссылки. это должно работать. Также вам следует использовать библиотеку адаптеров для реализации webrtc, которая полезна для решения проблем, связанных с разными браузерами.
@jmargolisvt я не это имел в виду. В OP есть два файла: main.html и WebRTC.js. main.html включает main.js, но в вопросе нет ссылки на файл WebRTC.js. Тем не менее, я согласен с вашим вторым замечанием об использовании тега видео.
@LakshyaRaj Теперь я вижу. Сорри, мой плохой! :)
@LakshyaRaj «WebRTC.js» на самом деле является «main.js». Я ошибся при размещении вопроса. Я отредактировал вопрос, чтобы предотвратить дальнейшую путаницу. Извини:(
Это не работает, потому что вы используете тег div
вместо тега video
.
Просто используйте тег видео ниже.
<video id = "video"></video>
Чтобы иметь возможность воспроизводить видео на своей странице, вам нужно использовать тег <video />
вместо простого <div />
. Так что вам просто нужно изменить
<div id = "video"></div>
<div id = "audio"></div>
с
<video autoplay = "true"></video>
Ваш окончательный код будет таким:
const constraints = {
audio: true,
video: {
width: 1280,
height: 70
}
}
navigator.mediaDevices.getUserMedia(constraints)
.then(
(mediaStream) => {
console.info('success')
const video = document.querySelector('video');
video.srcObject = mediaStream;
video.onloadedmetadata = () => {
video.play();
}
})
.catch(
console.info('unsuccessful')
)
html {
height: 100%;
}
body {
min-height: 100%;
height: 100%;
margin: 0;
}
video {
height: 50%;
width: 50%;
border: 1px solid black;
}
<video autoplay = "true"></video>
Эта ошибка возникает из-за <div>
, если вы хотите отобразить экран, вам нужно использовать тег <video>
.
<div id = "video-div">
<video id = "video" controls = "true" autoplay = "true"></video>
</div>
Это может иметь значение или не иметь значения, но включаете ли вы WebRTC.js в свой HTML-файл?