WebRTC对等通信

在之前的工作中，我们使用了区块链技术来实时共享客户端模块，本次我们用RTCPeerConnection建立了一个对等连接。

点击此处查看GitHub代码

自iOS11之后，WebRTC可以在所有浏览器中工作了，用户可以实时使用。

点击此处运行代码

我嵌入了一个HTML标签，浏览器的安全保护机制不允许这样做。

WebRTC提供了三种API:

从设备中获取音频和视频(mediastream)

建立了一个对等连接(RTCPeerConnection)

传递任意数据(RTCDataChannel)

本文使用了mediastream和PeerConnection.

无服务器的实时对等连接通信客户端

按照如下步骤在同一网页不同客户端之间建立连接

1.实例化两个RTCPeerConnection对象。

2.添加彼此为ICE candidates。

3.对第一个对象使用createoffer建立请求。

4.对两个对象设置本地/远程’描述’。

5.对第二个对象createAnswer。

6.对两个对象设置远程/本地’描述’。

7.进行直接交流。

以下是代码实现

我们从一个react Component出发, 它可以传达两个视频和三个按钮, 并且有一些默认状态可供操作。

class WebRTCPeerConnection extends React.Component { state = { startDisabled: false, callDisabled: true, hangUpDisabled: true, servers: null, pc1: null, pc2: null, localStream: null }; localVideoRef = React.createRef(); remoteVideoRef = React.createRef(); start = () => { // start media devices }; call = () => { // initiate a call }; hangUp = () => { // hang up connection }; render() { const { startDisabled, callDisabled, hangUpDisabled } = this.state; return ( <div> <video ref={this.localVideoRef} autoPlay muted style={{ width: "240px", height: "180px" }} /> <video ref={this.remoteVideoRef} autoPlay style={{ width: "240px", height: "180px" }} /> <div> <button onClick={this.start} disabled={startDisabled}> Start </button> <button onClick={this.call} disabled={callDisabled}> Call </button> <button onClick={this.hangUp} disabled={hangUpDisabled}> Hang Up </button> </div> </div> ); } }

我们使用三个布尔值来控制按钮: null 、 pc1 、 pc2。

第一步:开始

当点击Start开始按钮时,请求视频/音频许可并且开始一个localstream本地流。

start = () => { this.setState({ startDisabled: true }); navigator.mediaDevices .getUserMedia({ audio: true, video: true }) .then(this.gotStream) .catch(e => alert("getUserMedia() error:" + e.name)); }; gotStream = stream => { this.localVideoRef.current.srcObject = stream; this.setState({ callDisabled: false, localStream: stream }); };

使用this.setState来禁止开始按钮,使用navigator.getUserMedia来进入媒体.如果允许,我们在localVideo中开始数据流并且把它加入到状态中。

第二步:调用

现在你可以按Call按钮,这样就启动了两点连接,pc1和pc2,使它们可以相互交流。

1.call开始请求。

2.onCreateOfferSuccess更新pc1,pc2,并且初始化应答。

3.onCreateAnswerSuccess结束连接。

4.gotRemoteStream激发建立第二个视频。

call = () => { this.setState({ callDisabled: true, hangUpDisabled: false }); let { localStream } = this.state; let servers = null, pc1 = new RTCPeerConnection(servers), pc2 = new RTCPeerConnection(servers); pc1.onicecandidate = e => this.onIceCandidate(pc1, e); pc1.oniceconnectionstatechange = e => this.onIceStateChange(pc1, e); pc2.onicecandidate = e => this.onIceCandidate(pc2, e); pc2.oniceconnectionstatechange = e => this.onIceStateChange(pc2, e); pc2.ontrack = this.gotRemoteStream; localStream .getTracks() .forEach(track => pc1.addTrack(track, localStream)); pc1 .createOffer({ offerToReceiveAudio: 1, offerToReceiveVideo: 1 }) .then(this.onCreateOfferSuccess, error => console.error( "Failed to create session description", error.toString() ) ); this.setState({ servers, pc1, pc2, localStream }); };

这段代码几乎是前端模板。

我们开始或禁用相应的按钮,从状态中得到本地流localStream,并且初始化servers, pc1和pc2。

两个pc*都有许多事件听众，onIceCandidate会将其连接，并且通过onIceStateChange打印故障信息，gotRemoteStream会将其添加到正确的video组件。

接着我们把localStream添加到第一个客户端，pc1会产生一个接收视频和音频的请求，当完成这些之后，就更新了组分状态。

onCreateOfferSuccess

当pc1成功请求之后，我们更新客户端中本地和远程的描述。我不确定这些描述包括什么，但是这些资料很重要。

onCreateOfferSuccess = desc => { let { pc1, pc2 } = this.state; pc1 .setLocalDescription(desc) .then( () => console.log("pc1 setLocalDescription complete createOffer"), error => console.error( "pc1 Failed to set session description in createOffer", error.toString() ) ); pc2.setRemoteDescription(desc).then( () => { console.log("pc2 setRemoteDescription complete createOffer"); pc2 .createAnswer() .then(this.onCreateAnswerSuccess, error => console.error( "pc2 Failed to set session description in createAnswer", error.toString() ) ); }, error => console.error( "pc2 Failed to set session description in createOffer", error.toString() ) ); };

pc1更新本地描述，pc2更新远程描述，pc2同样产生了一个回复，就像这样：好，我接受你的请求，我们开始吧。

onCreateAnswerSuccess

当pc2成功恢复后，我们开始建立另一轮描述，只不过这次顺序正好相反。

onCreateAnswerSuccess = desc => { let { pc1, pc2 } = this.state; pc1 .setRemoteDescription(desc) .then( () => console.log( "pc1 setRemoteDescription complete createAnswer" ), error => console.error( "pc1 Failed to set session description in onCreateAnswer", error.toString() ) ); pc2 .setLocalDescription(desc) .then( () => console.log( "pc2 setLocalDescription complete createAnswer" ), error => console.error( "pc2 Failed to set session description in onCreateAnswer", error.toString() ) ); };

pc1建立远程描述而pc2建立本地描述。我想这就像是：从pc1视角看来，对它是本地的，对pc2是远程的，反过来对pc2也一样。

现在，我们就有了两个视频流，可以在同一个网页中相互交流。

onIceCandidate

在这一步，两个pc都说他们得到了ICE candidate。我不知道实际发生了什么，但是这给了我们一个来区分这两个客户端分别在对谁交流的机会。

onIceCandidate = (pc, event) => { let { pc1, pc2 } = this.state; let otherPc = pc === pc1 ? pc2 : pc1; otherPc .addIceCandidate(event.candidate) .then( () => console.log("addIceCandidate success"), error => console.error( "failed to add ICE Candidate", error.toString() ) ); };

我们猜测其它客户端，把它添加成为一个candidate。 如果我们的客户端多于两个，这会很有意思。

第三步：结束

结束很简单，只需要关闭两个客户端。

hangUp = () => { let { pc1, pc2 } = this.state; pc1.close(); pc2.close(); this.setState({ pc1: null, pc2: null, hangUpDisabled: true, callDisabled: false }); };

有趣的地方

第一部分连接，也就是两个客户端互相找到对方，成为发射信号。WebRTC spec没有提到发信号。

发信号在同一个网页两个客户端之间是很简单的，两个客户端就在内存中，只需要启动两个客户端。

但是在现实世界中，你需要这些客户端可以在不同计算机的不同浏览器中运行，如何做才能使它们能互相找到对方呢？如果有上千个客户端呢？

你需要一些通信频道，这些频道知道所有客户端在哪儿，并且说：嗨！你，连接我这里，或者是，你，离开我这里。

这对分布式去中心化区块链不起作用。

相关标签：