WebRTC搭建与应用(四)-PeerJS测试客户端搭建

WebRTC搭建与应用(四)-PeerJS测试客户端搭建

近期由于项目需要在研究前端WebGL渲染转为云渲染，借此机会对WebRTC等有了初步了解，在此记录一下，以防遗忘。

第四章 PeerJS测试客户端搭建

前言

紧接上一章内容，本章节主要研究一下PeerJS开源库的使用，希望对各位有些许帮助。现在不管是桌面端、网页端还是移动端实时音视频通信技术已经很成熟了，我主要是做多端轻量化图形渲染工作，所以本次PeerJS测试采用WebGL图形渲染推流，而不是获取硬件摄像头推流。

# 一、客户端HTML编写

1.1 引入PeerJS

PeerJS在HTML中通过script标签引入

1.2 创建视频流载体

客户端相比于服务端要简单一些，因为没有轻量化渲染，最基础的仅需要一个承接视频流的载体，所以我们创建一个标签即可实现。

1.3 使用PeerJS

最简单的，还是创建一个Peer对象，本地点对点测试无需传入任何参数，相关的参数使用后续会有介绍。

在peer对象如果成功创建会在open事件中返回创建的随机id字符串

下面的流程开始客户端就和服务端有区别了，首先是要获取video标签的本地视频流，由于谷歌内核浏览器与火狐浏览器在对于视频流获取的接口上有区别，所以这个分为两种写法。

在客户端Peer对象的call事件中会监听来自服务端发起的视频流传输的call接口调用，也就是上一章抓帧广播按钮所做的操作，当客户端call事件中监听到远程有视频流传入的话，就会将视频流绑定到本地video标签的srcObject中，这样就可以实时展示服务端的轻量化场景效果了。
截图中’data’事件的监听与响应，是通过Peer.send接口实现的数据传输。

1.4 点对点WebRTC效果

打开客户端html后，默认效果一片空白，通过元素查看器可以看到页面上有一个video标签但是没有任何播放的内容。

接下来打开服务端html

为了简便，将客户端html页面上创建的PeerID赋值到服务端远程ID的输入框中，然后点击连接按钮，如果完成连接，按钮显示文字会变为‘已连接’。

接着点击服务端抓帧广播按钮并在服务端ThreeJS场景中进行操作，这是你会发现客户端video标签中会有视频内容展示出来。

总结

至此就完成了通过PeerJS和ThreeJS搭建云渲染通信客户端的基础demo，在本地可是实现服务端与客户端ThreeJS轻量化场景WebRTC技术路线的最基础探索，欢迎大佬们不吝赐教，谢谢大家。下一章研究一下PeerJS-Server服务的使用以及跨电脑同网络下PeerJS对ICE的配置使用。