搭建第一个属于你的数字孪生应用
经过多个周期的研发,前端3D视频流SDK软件包已正式发布,利用WebRTC协议,视频服务器可以高效的传输低延迟视频到前端,前端也能发送任意的JSON消息至服务器,支持此SDK的浏览器包括:
此SDK非常轻量,没有依赖,也没适配任何前端框架(如VueJS、WebPack等),只有一个12KB的JS文件:ps.min.js,其中“ps”代表peer stream,即p2p视频流。从技术上讲,ps.min.js主要调用了浏览器的3个重要能力:
git clone https://gitee.com/pqo/PixelStreamer/
引入此SDK最简单的办法就是通过标准HTML的形式:
<script src="ps.min.js"></script>
<video is="peer-stream" signal="ws://127.0.0.1:88/insigma"></video>
也可以通过JavaScript引入,这里使用了JS模块化规范:
<script type="module">
import "ps.min.js";
const ps = document.createElement("video", { is: "peer-stream" });
ps.setAttribute("signal", "ws://127.0.0.1:88/insigma");
document.body.append(ps);
</script>
为了方便开发者调试API接口,我们提供了在线接口测试网页,可是实时的预览、编辑、运行代码,场景随之响应:
首先下载ps.min.js文件,通过<script>元素或者import语句引入它,便会得到一个自定义的<video>子类PeerStream,可以通过customElements.get('peer-stream')查看这个类,事实上,整个ps.min.js就定义了一个类。
视频流的生命周期(从启动到关闭)与<video>元素的生命周期(从生成到销毁)绑定,想要启动视频流,首先创建视频元素,此时可以通过window.ps得到<video>的引用,再将元素的signal属性设置为信令服务器的Web地址,最后将视频元素插入到DOM中,视频流就自动播放了。
对<video>元素监听“message”事件,传入一个回调函数,即可在参数中获取到服务器传来的字符串消息。ps.addEventListener("message", e => e.detail),其中e.detail就是返回的消息。
调用PeerStream.prototype.emitMessage发送字符串消息:ps.emitMessage(msg: string | object)。通过这个方法,发送API接口文档中支持的任何消息,注意,emitMessage的传参可以是文本也可以是对象,如果是对象,函数内部会调用JSON.stringify将其文本化。
前面说过,ps.min.js整体上就定义了一个子类,暴露出来的只有一个<video>元素,因此可以为其添加自定义的id、class,以及任何CSS样式和定位,或在其之上覆盖其他的HTML元素以实现UI效果。
ps默认是不接收音频的,后端默认也不传输音频,如若需要,得让后端管理员开启。
因为视频流和<video>元素的生命周期绑定,只需将元素移除出DOM,如调用ps.remove(),即可关闭视频流,释放资源。注意如果只是在样式上隐藏掉,视频流则仍然在后台传输。