如何复制来自摄像机的HTML5视频流

我想在三个框中并行显示相同的摄像机视频。因此，我有以下代码：如何复制来自摄像机的HTML5视频流

<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>

目前的结果是在左上角的一个视频显示的视频下的两个“空白区域”。我需要改变以在两个区域播放顶级视频？是否有任何进一步的文件比this？

来源

2017-04-18 ErikWe

使用querySelectorAll获得DOM中的所有元素video（querySelector只返回第一个），然后遍历（用循环）在集合和源分配给所有相关的元素。

// Reference to video element. 
 
var videos = document.querySelectorAll('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) { 
 
    for (var i = 0; i < videos.length; i++) { 
 
     videos[i].src = window.URL.createObjectURL(stream); 
 
    } 
 

 
    }, errorCallback); 
 
} else { 
 
    for (var i = 0; i < videos.length; i++) { 
 
    videos[i].src = 'errorVideo.webm'; // fallback. 
 
    } 
 

 
}

<video height="360" width="480" autoplay></video><br> 
 
<video height="360" width="480" autoplay></video><br> 
 
<video height="360" width="480" autoplay></video>

来源

2017-04-18 15:15:03

如何复制来自摄像机的HTML5视频流

回答

相关问题