如何从摄像头复制HTML5视频流_Html_Video

如何从摄像头复制HTML5视频流

html video

如何从摄像头复制HTML5视频流,html,video,Html,Video,我想在三个框中并行显示相同的摄像头视频。因此，我有以下代码： <body>  <video height="360" width="480" autoplay></video><br> <video height="360" width="480" autoplay></video><br>

我想在三个框中并行显示相同的摄像头视频。因此，我有以下代码：

<body>
<!-- HTML5 video to play/stream the camera recording. -->
<video height="360" width="480" autoplay></video><br>
<video height="360" width="480" autoplay></video><br>
<video height="360" width="480" autoplay></video>

<!--Script to get the video source-->
<script>
    // Reference to video element.
  var video = document.querySelector('video');

    var errorCallback = function(e) {
        // User rejected camera request. Handle appropriately.
    };

    // Ensure cross-browser functionality.
    navigator.getUserMedia  = navigator.getUserMedia ||
                              navigator.webkitGetUserMedia ||
                              navigator.mozGetUserMedia ||
                              navigator.msGetUserMedia;

    if (navigator.getUserMedia) {
        navigator.getUserMedia({audio: false, video: true}, function(stream) {
            video.src = window.URL.createObjectURL(stream);
        }, errorCallback);
    } else {
      video.src = 'errorVideo.webm'; // fallback.
    }
</script>






//参考视频元素。
var video=document.querySelector（'video'）；
var errorCallback=函数（e）{
//用户拒绝了摄像头请求。请正确处理。
};
//确保跨浏览器功能。
navigator.getUserMedia=navigator.getUserMedia||
navigator.webkitGetUserMedia||
navigator.mozGetUserMedia||
navigator.msGetUserMedia；
if（navigator.getUserMedia）{
getUserMedia（{audio:false，video:true}，函数（流）{
video.src=window.URL.createObjectURL（流）；
}，错误回调）；
}否则{
video.src='errorVideo.webm'；//回退。
}

当前结果是左上角有一个视频，显示视频下有两个“空白区域”。我需要改变什么才能播放这两个区域的顶级视频？除了使用

querySelectorAll

获取DOM中的所有

video

元素（

querySelector

仅返回第一个元素）然后在集合上迭代（使用循环）并将源分配给所有相关元素之外，还有其他文档吗

//对视频元素的引用。
var videos=document.queryselectoral（“视频”）；
var errorCallback=函数（e）{
//用户拒绝了摄像头请求。请正确处理。
};
//确保跨浏览器功能。
navigator.getUserMedia=navigator.getUserMedia||
navigator.webkitGetUserMedia||
navigator.mozGetUserMedia||
navigator.msGetUserMedia；
if（navigator.getUserMedia）{
navigator.getUserMedia({
音频：错，
视频：真的
}，函数（流）{
对于（var i=0；i






使用queryselectoral
获取DOM中的所有video
元素（querySelector
仅返回第一个元素），然后在集合上迭代（使用循环），并将源分配给所有相关元素

//对视频元素的引用。
var videos=document.queryselectoral（“视频”）；
var errorCallback=函数（e）{
//用户拒绝了摄像头请求。请正确处理。
};
//确保跨浏览器功能。
navigator.getUserMedia=navigator.getUserMedia||
navigator.webkitGetUserMedia||
navigator.mozGetUserMedia||
navigator.msGetUserMedia；
if（navigator.getUserMedia）{
navigator.getUserMedia({
音频：错，
视频：真的
}，函数（流）{
对于（var i=0；i