カメラからHTML5ビデオストリームを複製する方法

3つのボックスに同じカメラビデオを並行して表示したいとします。したがって、私は次のコードを持っている：カメラから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>

現在の結果は、左上隅に一つのビデオと表示された映像の下に2つの「空き領域」です。 2つの分野でトップの動画を再生するには、何を変更する必要がありますか？ thisより詳細な文書はありますか？

出典

2017-04-18 ErikWe

使用querySelectorAll DOM（querySelectorのみ最初のを返す）内のすべてのvideoの要素を取得し、コレクション上（ループと）を繰り返し、全ての関連する要素にソースを割り当てます。

// 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ビデオストリームを複製する方法

答えて

関連する問題