Question

这是我使用的一个简单脚本：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#myVideo {
    background-color:#CCC;  
    position:absolute;
    width:320px;
    height:240px;
    border:1px solid #000;  

  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <div id="myVideo" autoplay></div> 

<script>
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
    navigator.getUserMedia({audio: true, video: true}, function(stream){
        $('#myVideo').prop('src', URL.createObjectURL(stream));

      }, function(){ 
        alert("error");
     });
</script>

</body>
</html>

我没有任何错误。它要求我授权网络摄像头访问，我接受，网络摄像头开启，但#myVideo div仍为空白。

我做错了什么？

Answer 1

Divs没有src属性，您需要使用视频元素。

请在此处查看：http://jsfiddle.net/g3ww83yu/

Answer 2

改变这个：

<div id="myVideo" autoplay></div>

到此：

<video id="myVideo" autoplay></video>.

请注意，您还可以将全局样式应用于视频元素，例如：

video {
   border:1px solid #000;
}

可以访问网络摄像头，但无法将其显示为div

2 个答案: