WebRTC API详解

一、WebRTC API介绍

WebRTC是一种支持实时通信的开放式框架，它能在浏览器之间直接传输数据，包括音频、视频和数据。WebRTC API是一组方法和属性，可用于在网页应用程序中使用WebRTC功能，支持P2P通信以及和服务器通信。

WebRTC API可以分为三个部分：MediaStream，RTCPeerConnection和RTCDataChannel。MediaStream用于获取音频和视频流，RTCPeerConnection用于建立点对点连接，RTCDataChannel用于传输数据。

二、MediaStream

MediaStream是用于获取音频和视频的对象。通过MediaStream可以访问摄像头、麦克风等设备。

获取MediaStream的方法：

navigator.mediaDevices.getUserMedia(constraints)
    .then(function(stream) {
        // stream是获取到的音频或视频流
    })
    .catch(function(err) {
        // 处理错误
    });

constraints参数是一个对象，用于指定需要获取的流的属性，比如：

var constraints = {
    video: true,
    audio: true
};

然后就可以通过MediaStream访问音频、视频轨道：

var audioTrack = stream.getAudioTracks()[0]; // 第一个音频轨道
var videoTrack = stream.getVideoTracks()[0]; // 第一个视频轨道

三、RTCPeerConnection

RTCPeerConnection用于建立点对点连接，支持音频、视频和数据的传输，可以实现浏览器之间的实时通信。

创建RTCPeerConnection对象的方法：

var pc = new RTCPeerConnection(configuration);

configuration参数是一个对象，用于指定连接的配置，比如：

var configuration = {
    iceServers: [
        {urls: "stun:stun.example.com"},
        {urls: "turn:turn.example.com", username: "user1", credential: "password1"}
    ]
};

iceServers用于指定ICE服务器的地址和认证信息。

然后需要为RTCPeerConnection对象添加需要传输的流：

pc.addStream(localStream);

localStream是需要传输的音频或视频流。

接下来可以设置一些事件处理程序，比如：

pc.onaddstream = function(event) {
    // 收到远程流
    remoteVideo.srcObject = event.stream;
};

pc.onicecandidate = function(event) {
    // 发送本地的ICE candidate
    if (event.candidate) {
        sendMessage(JSON.stringify({"type": "candidate", "candidate": event.candidate}));
    }
};

这里的onaddstream用于处理收到远程流的事件，onicecandidate用于处理本地的ICE candidate，并将其发送给对方。

四、RTCDataChannel

RTCDataChannel用于在点对点连接中传输任意数据，包括字符串、二进制数据等。

创建RTCDataChannel对象的方法：

var dc = pc.createDataChannel("mychannel");

然后需要设置一些事件处理程序：

dc.onmessage = function(event) {
    // 接收到数据
    console.log(event.data);
};

dc.onopen = function(event) {
    // 数据通道打开
    dc.send("Hello World!");
};

这里的onmessage用于处理接收到数据的事件，onopen用于处理数据通道打开的事件，并发送一条消息。

五、完整代码示例

下面是一个完整的代码示例，用于演示WebRTC API的使用：

    


    
  
    
  
    Start
    Call
    Hang Up
    <script>

        var localVideo = document.getElementById("localVideo");
        var remoteVideo = document.getElementById("remoteVideo");
        var startButton = document.getElementById("startButton");
        var callButton = document.getElementById("callButton");
        var hangupButton = document.getElementById("hangupButton");

        var localStream;
        var pc;

        startButton.onclick = function() {
            navigator.mediaDevices.getUserMedia({video: true, audio: true})
                .then(function(stream) {
                    localStream = stream;
                    localVideo.srcObject = stream;
                })
                .catch(function(err) {
                    console.log(err);
                });
        };

        callButton.onclick = function() {
            if (!localStream) return;
            var configuration = {"iceServers": [{"urls": "stun:stun.example.com"}]};
            pc = new RTCPeerConnection(configuration);
            pc.addStream(localStream);

            pc.onaddstream = function(event) {
                // 收到远程流
                remoteVideo.srcObject = event.stream;
            };

            pc.onicecandidate = function(event) {
                // 发送本地的ICE candidate
                if (event.candidate) {
                    sendMessage(JSON.stringify({"type": "candidate", "candidate": event.candidate}));
                }
            };

            hangupButton.disabled = false;
        };

        hangupButton.onclick = function() {
            pc.close();
            pc = null;
            hangupButton.disabled = true;
        };

        function sendMessage(message) {
            // 发送消息
        }

    </script>