三维可视化JavaScript组件接口

三维可视化JavaScript组件接口

搭建第一个属于你的数字孪生应用

介绍

经过多个周期的研发，前端3D视频流SDK软件包已正式发布，利用WebRTC协议，视频服务器可以高效的传输低延迟视频到前端，前端也能发送任意的JSON消息至服务器，支持此SDK的浏览器包括：

• Google Chrome 90 以上
• Microsoft Edge 90 以上
• Mozilla Firefox 90 以上

此SDK非常轻量，没有依赖，也没适配任何前端框架（如VueJS、WebPack等），只有一个12KB的JS文件：ps.min.js，其中“ps”代表peer stream，即p2p视频流。从技术上讲，ps.min.js主要调用了浏览器的3个重要能力：

• WebSocket：为了建立WebRTC，先要与信令服务器建立Socket连接。
• WebRTC：与3D服务器建立点对点的UDP视频流、消息流。
• WebComponents：利用HTML5的<video>元素将视频流组件化，便于管理。

安装地址

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将其文本化。

如何修改UI样式？

前面说过，ps.min.js整体上就定义了一个子类，暴露出来的只有一个<video>元素，因此可以为其添加自定义的id、class，以及任何CSS样式和定位，或在其之上覆盖其他的HTML元素以实现UI效果。

如何接收音频？

ps默认是不接收音频的，后端默认也不传输音频，如若需要，得让后端管理员开启。

如何关闭视频流？

因为视频流和<video>元素的生命周期绑定，只需将元素移除出DOM，如调用ps.remove()，即可关闭视频流，释放资源。注意如果只是在样式上隐藏掉，视频流则仍然在后台传输。