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