如何使用webRTC啓動視頻流？

我正在編寫以下代碼以啓動我的相機，並使用技術webRTC在Google Chrome瀏覽器上觀看我的視頻。有兩個文件我創建了index.html和client.js。我附上了兩者的代碼。 Node.js服務器安裝在我的電腦上。問題是我的相機正在打開，但我無法看到視頻流。如何使用webRTC啓動視頻流？

client.js

function hasUserMedia() { 
    //check if the browser supports the WebRTC 
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || 
     navigator.mozGetUserMedia); 
} 

if (hasUserMedia()) { 
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia 
     || navigator.mozGetUserMedia; 

    //enabling video and audio channels 
    navigator.getUserMedia({ video: true, audio: true }, function (stream) { 
     var video = document.querySelector('video'); 

     //inserting our stream to the video tag  
     video.src = window.URL.createObjectURL(stream); 
    }, function (err) {}); 
} else { 
    alert("WebRTC is not supported"); 
}`

的index.html

<!DOCTYPE html> 
<html lang = "en"> 

    <head> 
     <meta charset = "utf-8" /> 
     <link rel="stylesheet" href="css/main.css" /> 
    </head> 

    <body> 
     <video autoplay></video> 
     <script src = "js/client.js"></script>  
    </body> 
    </html>

來源

2017-05-31 utkarsh shukla

可能的複製https://stackoverflow.com/questions/ 41260985/getusermedia-without-ssl-for-local-storage） – jib

Chrome需要https。應該在Firefox中工作。另外，正如答案所提到的，您已經複製了一些非常舊的代碼。 – jib

看來你正在使用的舊代碼，現在的API得到了改變好開始使用最新的API。

見Demo和Source

嘗試以下在client.js片斷

var constraints = { audio: true, video: true}; 
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) { 
    var video = document.querySelector('video'); 
    video.srcObject = stream; 
}).catch(function(err) { 
    console.log('Error in getting stream', err); 
});

的[getUserMedia（）不使用SSL進行本地存儲（

來源

2017-05-31 16:34:35 Ajay

如何使用webRTC啓動視頻流？

回答

相關問題