2016-09-07 43 views
3

我正在學習關於學習WebRTC書籍並創建演示4章。我在控制檯門控的錯誤:webRTC ReferenceError:webkitRTCPeerConnection未定義

ReferenceError: webkitRTCPeerConnection is not defined 

和不明白我什麼都能CONFI的 「iceServers」:

這裏是我的javascript代碼

function hasUserMedia(){ 
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; 
    return !!navigator.getUserMedia; 
} 

function hasRTCPeerConnection() { 
    window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection; 
    return !!window.RTCPeerConnection; 
} 


//This function will create our RTCPeerConnection objects, set up the SDP offer and response, and find the ICE candidates for both peers. page 48 

function startPeerConnection(stream) { 
    var configuration = { 
     // Uncomment this code to add custom iceServers 
     "iceServers": [{ "url": "stun:stun.1.google.com:19302" }] 
    }; 
    yourConnection = new webkitRTCPeerConnection(configuration); 
    theirConnection = new webkitRTCPeerConnection(configuration); 

    // Setup stream listening 
    yourConnection.addStream(stream); 
    theirConnection.onaddstream = function (e) { 
     theirVideo.src = window.URL.createObjectURL(e.stream); 
    }; 

    // Setup ice handling 
    yourConnection.onicecandidate = function (event) { 
     if (event.candidate){ 
      theirConnection.addIceCandidate(new RTCIceCandidate(event.candidate)); 
     } 
    }; 

    theirConnection.onicecandidate = function (event) { 
     if (event.candidate) { 
      yourConnection.addIceCandidate(new RTCIceCandidate(event.candidate)); 
     } 
    }; 

    // Begin the offer 
    yourConnection.createOffer(function (offer) { 
     yourConnection.setLocalDescription(offer); 
     theirConnection.setRemoteDescription(offer); 

     theirConnection.createAnswer(function (offer) { 
      theirConnection.setLocalDescription(offer); 
      yourConnection.setRemoteDescription(offer); 
     }); 
    }); 
} 


var yourVideo = document.querySelector("#yours"), 
    theirVideo = document.querySelector("#theirs"), 
    yourConnection, theirConnection; 

if (hasUserMedia()) { 
    navigator.getUserMedia({ video: true, audio: false }, function (stream) { 
      yourVideo.src = window.URL.createObjectURL(stream); 
      if (hasRTCPeerConnection()) { 
       startPeerConnection(stream); 
      } else { 
       alert("Sorry, your browser does not support WebRTC."); 
      } 
     }, function (error) { 
      console.log(error); 
     } 
    ); 
} else { 
    alert("Sorry, your browser does not support WebRTC."); 
} 

,它輸出這樣的.. enter image description here

請讓我知道爲什麼我的視頻無法正常工作?請幫我做這個

learning WebRTC

回答

2

變化:

yourConnection = new webkitRTCPeerConnection(configuration); 

到:

yourConnection = new RTCPeerConnection(configuration); 

webkitRTCPeerConnection是Chrome瀏覽器的,並且代碼已經在hasRTCPeerConnection定義window.RTCPeerConnection,使它適用於大多數瀏覽器(包括您正在使用的Firefox)。

[編輯]

你的邏輯在這個程序中是不正確的。您正在創建這樣的連接:

yourConnection = new webkitRTCPeerConnection(configuration); 
theirConnection = new webkitRTCPeerConnection(configuration); 

這是不合邏輯的。您的程序是2對等連接的一個對等體。您只需設置連接。此外,您需要某種消息服務器來在兩個對等方之間傳輸SDP消息。這不是ICE服務器的角色。

你的ICE配置沒問題。您正在使用公開的Google STUN服務器來處理建立WebRTC連接所需的流式傳輸和公共IP發現。

+0

並不明白我可以配置「iceServers」?我正在使用ubuntu – Harman

+0

根據我的代碼,它會顯示我的圖像作爲輸出,但它只顯示我輸入只....請讓我知道我做錯了什麼 – Harman