webrtc第一篇

1.介紹

衆所周知，瀏覽器自己不支持相互之間直接創建信道進行通訊，都是經過服務器進行中轉。好比如今有兩個客戶端，甲和乙，他們倆想要通訊，首先須要甲和服務器、乙和服務器之間創建信道。甲給乙發送消息時，甲先將消息發送到服務器上，服務器對甲的消息進行中轉，發送到乙處，反過來也是同樣。這樣甲與乙之間的一次消息要經過兩段信道，通訊的效率同時受制於這兩段信道的帶寬。同時這樣的信道並不適合數據流的傳輸，如何創建瀏覽器之間的點對點傳輸，一直困擾着開發者。WebRTC應運而生

參考：https://segmentfault.com/a/1190000000436544

一個瀏覽器打開url:http://localhost/1.html,咱們稱它A客戶端，另外一個瀏覽器打開同一個url,咱們稱她爲B客戶端。

如今是須要A客戶端往B客戶端發消息。

 

最簡單的方法是A客戶端將消息發送到服務器上，服務器對A的消息進行中轉，發送到B處。服務器將消息發給客戶端如今一般的方法是使用websocket技術。客戶端和服務器創建websocket鏈接，服務器對客戶端的消息就行轉發。

 

// 與信令服務器的WebSocket鏈接
        var socket = new WebSocket("ws://127.0.0.1:3000");

 

這樣的信道並不適合數據流的傳輸，好比音視頻。webrtc主要解決A客戶端將音視頻發給B客戶端。

 

2.步驟

1）獲取本地音頻和視頻流，createOffer獲得sdp信息。

 

// 獲取本地音頻和視頻流
        navigator.webkitGetUserMedia({
            "audio": true,
            "video": true
        }, function(stream){
            //綁定本地媒體流到video標籤用於輸出
            document.getElementById('localVideo').src = URL.createObjectURL(stream);
            //向PeerConnection中加入須要發送的流
            pc.addStream(stream);
            //若是是發起方則發送一個offer信令
            if(isCaller){
                pc.createOffer(sendOfferFn, function (error) {
                    console.log('Failure callback: ' + error);
                });
            }
        }, function(error){
            //處理媒體流建立失敗錯誤
            console.log('getUserMedia error: ' + error);
        });

 

2）A客戶端createOffer獲得sdp信息經過服務器中轉發給B客戶端。一般使用websocket。

3) B客戶端createAnswer創建與A客戶端的鏈接。

 

// 若是是一個offer，那麼須要回覆一個answer
                if(json.event === "_offer") {
                    pc.createAnswer(sendAnswerFn, function (error) {
                        console.log('Failure callback: ' + error);
                    });
                }

 

對於iOS，android客戶端也是相似，A客戶端獲取本地音頻和視頻流，獲得sdp信息，經過xmpp,MQTT等技術發給B客戶端。

關於ice,stun服務器本文並未說起。

資料：

http://blog.gopersist.com/2014/10/21/webrtc-simple/

https://segmentfault.com/a/1190000000436544