我目前正在学习如何在javascript中使用WebRTC。
下面是我写的代码:
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.log('success')
const video = document.querySelector('#video');
video.srcObject = mediaStream;
video.onloadedmetadata = () => {video.play();}
})
.catch (
console.log('unsuccessful')
)
当我打开它时，它询问我是否允许访问我的相机，并且控制台返回"成功"。所以我认为代码运行得很好<div id="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.log('success')
const video = document.querySelector('video');
video.srcObject = mediaStream;
video.onloadedmetadata = () => {
video.play();
}
})
.catch(
console.log('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>Codepen: https://codepen.io/SMAKSS/pen/RwJxjpb
不工作，因为您使用的是div标记而不是video标记。
请使用下面的视频标签。
<video id="video"></video>
这个错误是由于<div>，如果你想显示屏幕，那么你需要使用<video>标签。
<div id="video-div">
<video id="video" controls="true" autoplay="true"></video>
</div>