简单的webRTC连接测试

• 2021 年 3 月 5 日
• 笔记

webRTC

WebRTC (Web Real-Time Communications) 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。WebRTC包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议成为可能。

具体流程参考下图（图片来自 简书）：

在本地做连接测试:

1.创建两个本地连接:

var localPeerConnection, remotePeerConnection, sendChannel, receiveChannel;
localPeerConnection = new RTCPeerConnection(null, {
    optional: [{
        RtpDataChannels: true
    }]
});
remotePeerConnection = new RTCPeerConnection(null, {
    optional: [{
        RtpDataChannels: true
    }]
});

2.注册icecndidate方法

localPeerConnection.onicecandidate = function(event) {
    if (event.candidate) {
        remotePeerConnection.addIceCandidate(event.candidate);
    }
};
remotePeerConnection.onicecandidate = function(event) {
    if (event.candidate) {
        localPeerConnection.addIceCandidate(event.candidate);
    }
};

3.注册发送端方法

sendChannel = localPeerConnection.createDataChannel("CHANNEL_NAME", {
    reliable: false
});

sendChannel.onopen = function(event) {
    var readyState = sendChannel.readyState;
    if (readyState == "open") {
        sendChannel.send("Hello");
    }
};

4.注册接收端方法

remotePeerConnection.ondatachannel = function(event) {
    receiveChannel = event.channel;
    receiveChannel.onmessage = function(event) {
        alert(event.data);
    };
};

5.交换offer

localPeerConnection.createOffer(offerOptions).then(function(desc) {
    localPeerConnection.setLocalDescription(desc);
    remotePeerConnection.setRemoteDescription(desc);
    remotePeerConnection.createAnswer(offerOptions).then(function(answera) {
        remotePeerConnection.setLocalDescription(answera);
        localPeerConnection.setRemoteDescription(answera);
    });
});

这样连接就构建完成 ，成功后信息展示如下:

完整代码:

var localPeerConnection, remotePeerConnection, sendChannel, receiveChannel;
localPeerConnection = new RTCPeerConnection(null, {
    optional: [{
        RtpDataChannels: true
    }]
});
all = localPeerConnection
localPeerConnection.onicecandidate = function(event) {
    console.log("one", event)
    if (event.candidate) {
        remotePeerConnection.addIceCandidate(event.candidate);
    }
};

sendChannel = localPeerConnection.createDataChannel("CHANNEL_NAME", {
    reliable: false
});

sendChannel.onopen = function(event) {
    var readyState = sendChannel.readyState;
    if (readyState == "open") {
        sendChannel.send("Hello");
    }
};

remotePeerConnection = new RTCPeerConnection(null, {
    optional: [{
        RtpDataChannels: true
    }]
});

remotePeerConnection.onicecandidate = function(event) {
    console.log("two", event)
    if (event.candidate) {
        localPeerConnection.addIceCandidate(event.candidate);
    }
};

remotePeerConnection.ondatachannel = function(event) {
    receiveChannel = event.channel;
    receiveChannel.onmessage = function(event) {
        alert(event.data);
    };
};
var offerOptions={
    offerToRecceiveAudio: true,
    offerToReceiveVideo: true
};
localPeerConnection.createOffer(offerOptions).then(function(desc) {
    console.log("desc", desc)
    localPeerConnection.setLocalDescription(desc);
    remotePeerConnection.setRemoteDescription(desc);
    remotePeerConnection.createAnswer(offerOptions).then(function(answera) {
        console.log("answera", answera)
        remotePeerConnection.setLocalDescription(answera);
        localPeerConnection.setRemoteDescription(answera);
    });
});