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
    

        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) {
            // 發送消息
        }

    

六、總結

WebRTC API是一組支持實時通信的方法和屬性，可以在網頁應用程序中使用WebRTC功能，支持P2P通信以及和伺服器通信。MediaStream用於獲取音頻和視頻流，RTCPeerConnection用於建立點對點連接，RTCDataChannel用於傳輸數據。