WebRTC代碼示例

Question

我正在嘗試學習WebRTC，我似乎找不到任何有用的東西。我正在尋找一個示例代碼。我需要一個信令節點服務器和2個瀏覽器選項卡，它們可以使用webRTC在它們之間傳輸文本。任何人都知道我可以在哪裏找到工作代碼？

Answer 1

官方WebRTC示例工作，直接啓動demos。但他們都是本地的。

如果您需要節點服務器的示例，請嘗試安裝emannion/webrtc-audio-video。

如果你只是想兩個瀏覽器選項卡之間進行通信的演示，試試這個fiddle沒有服務器。

它採用了localSocket砍我寫信給mimmick與localStorage的網絡插口。在兩個標籤中打開它，或者更好地打開兩個窗口，這樣你就可以看到兩者。

var pc = new RTCPeerConnection(); 

var call = e => navigator.mediaDevices.getUserMedia({video: true, audio: true}) 
    .then(stream => pc.addStream(video.srcObject = stream)).catch(log); 

pc.onaddstream = e => video.srcObject = e.stream; 
pc.oniceconnectionstatechange = e => log(pc.iceConnectionState); 
pc.onicecandidate = e => sc.send({ice: e.candidate}); 
pc.onnegotiationneeded = e => pc.createOffer() 
    .then(sdp => pc.setLocalDescription(sdp).then(() => sc.send({sdp}))).catch(log); 

var sc = new localSocket(); 
sc.onmessage = e => e.data.sdp && pc.setRemoteDescription(e.data.sdp) 
    .then(() => pc.signalingState == "stable" || pc.createAnswer() 
    .then(sdp => pc.setLocalDescription(sdp).then(() => sc.send({sdp})))) 
    .catch(log) || e.data.ice && pc.addIceCandidate(e.data.ice).catch(log); 

var log = msg => div.innerHTML += "<br>" + msg; 

<video id="video" height="120" width="160" autoplay></video><br> 
<button onclick="call()">Call!</button><br><div id="div"></div> 
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script> 
<script src="https://rawgit.com/jan-ivar/localSocket/master/localSocket.js"></script> 

（不幸的是，我的絕招不堆棧段的工作，所以在兩個選項卡啓動fiddle。）

哦，並且始終使用adapter.js避免瀏覽器的差異，直到的WebRTC已經凝固。