是否可以在一個或多個攝像頭的Html頁面中嵌入兩個攝像頭流。

我試圖在一個HTML頁面上嵌入兩個攝像頭流。是否可以在一個或多個攝像頭的Html頁面中嵌入兩個攝像頭流。

我使用，我從這個網站https://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm

它工作正常的一個蒸汽，但是當我試圖讓在同一頁上的兩個不同的視頻流不工作得到了一個獲得用戶媒體腳本。

我已經嘗試製作一個帶有網格的div標籤，並在每個單元中放入一個視頻元素。這導致只有一個流。

這是我最近嘗試

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta content="stuff, to, help, search, engines, not" name="keywords"> 
 
    <meta content="What this page is about." name="description"> 
 
    <meta content="Display Webcam Stream" name="title"> 
 
    <title>Display Webcam Stream</title> 
 
    
 
    <style> 
 
    #container { 
 
     margin: 0px auto; 
 
     width: 500px; 
 
     height: 375px; 
 
     border: 10px #333 solid; 
 
    } 
 
    #videoElement { 
 
     width: 500px; 
 
     height: 375px; 
 
     background-color: #666; 
 
    } 
 
    #container2 { 
 
     margin: 0px auto; 
 
     width: 500px; 
 
     height: 375px; 
 
     border: 10px #333 solid; 
 
    } 
 
    #videoElement2 { 
 
     width: 500px; 
 
     height: 375px; 
 
     background-color: #666; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body style=""> 
 
    <div id="container"> 
 
    
 
    <video autoplay id="videoElement"> 
 
     
 
    </video> 
 
    </div> 
 

 
    <div id="container2"> 
 
    
 
    <video2 autoplay="true" id="videoElement2"> 
 
     
 
    </video2> 
 
    </div> 
 

 
    <script> 
 
    var video = document.querySelector("#videoElement"); 
 

 
     
 
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia; 
 
    if (navigator.getUserMedia) {   
 
     navigator.getUserMedia({ 
 
     video: true 
 
     }, handleVideo, videoError); 
 
    } 
 

 
    function handleVideo(stream) {  
 
     video.src = window.URL.createObjectURL(stream); 
 
    } 
 

 
    function videoError(e) {  // do something 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>

我感謝所有幫助。謝謝。

來源

2016-02-29 Alex Golshani

你的腳本引用'videoElement'而不是'videoElement2' ... – jball

我並不是說你不能，但如果可以的話，這對我來說會是新聞和有點令人驚訝。最後我聽說，你幾乎可以選擇一個相機或其他... – dandavis

@jball我該如何糾正這一點？ –

您通過設置其src屬性來告訴video元素stream。

基本上你需要在這裏複製所有支持videoElement的代碼，而不僅僅是它的創建。

您會遇到的一個問題是，許多瀏覽器在同一時間（前一次異步調用完成之前）調用getUserMedia兩次時都皺眉，因爲這會一次覆蓋用戶多個提示。要解決此問題，請將第二個電話號碼撥打getUserMedia並放在handleVideo之內，以便一次只用一個提示來打擾用戶。

第三個問題是，只有Firefox在權限提示中內置了設備選擇，因此在Chrome上，您將獲得兩次相同的相機。

要在其他瀏覽器上執行此操作，您需要enumerateDevices。我有answered that before。

最後，大多數智能手機都是硬件限制的，無法同時運行兩臺攝像機。

來源

2016-03-01 13:12:29 jib

是否可以在一個或多個攝像頭的Html頁面中嵌入兩個攝像頭流。

回答

相關問題