三维可视化JavaScript组件接口

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

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

• Google Chrome 90 以上

• Microsoft Edge 90 以上

• Mozilla Firefox 90 以上

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

• WebSocket&＃xff1a;为了建立WebRTC&＃xff0c;先要与信令服务器建立Socket连接。

• WebRTC&＃xff1a;与3D服务器建立点对点的UDP视频流、消息流。

• WebComponents&＃xff1a;利用HTML5的

git clone https://gitee.com/pqo/PixelStreamer/
首个应用

引入此SDK最简单的办法就是通过标准HTML的形式&＃xff1a;

也可以通过Javascript引入&＃xff0c;这里使用了JS模块化规范&＃xff1a;

开发测试地址

为了方便开发者调试API接口&＃xff0c;我们提供了在线接口测试网页&＃xff0c;可是实时的预览、编辑、运行代码&＃xff0c;场景随之响应&＃xff1a;

如何下载安装&＃xff1f;

首先下载ps.min.js文件&＃xff0c;通过元素或者import语句引入它&＃xff0c;便会得到一个自定义的

如何启动视频流&＃xff1f;

视频流的生命周期&＃xff08;从启动到关闭&＃xff09;与

如何接收消息&＃xff1f;

对

如何发送消息&＃xff1f;

调用PeerStream.prototype.emitMessage发送字符串消息&＃xff1a;ps.emitMessage(msg: string | object)。通过这个方法&＃xff0c;发送API接口文档中支持的任何消息&＃xff0c;注意&＃xff0c;emitMessage的传参可以是文本也可以是对象&＃xff0c;如果是对象&＃xff0c;函数内部会调用JSON.stringify将其文本化。

如何修改UI样式&＃xff1f;

前面说过&＃xff0c;ps.min.js整体上就定义了一个子类&＃xff0c;暴露出来的只有一个

如何接收音频&＃xff1f;

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

如何关闭视频流&＃xff1f;

因为视频流和