当前栏目
三维可视化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(),即可关闭视频流,释放资源。注意如果只是在样式上隐藏掉,视频流则仍然在后台传输。
相关文章
- HarmonyOS Css样式与普通HTML Css样式之间存在的区别
- Firefox 的 UI 进化史:从 2002 到 2021
- Mozilla 谈 Web 发展愿景:简便、高安全性、强隐私保护
- HarmonyOS之CSS实现哆啦A梦头像
- OpenHarmony—Ets自定义弹窗UI组件封装
- OpenHarmony性能分析工具之Hiperf
- 漂亮的 Linux apt 命令前端,下载速度比 apt 快 16 倍
- 通过编写计算器学习ArkUI组件之四
- 通过编写计算器学习ArkUI组件之三
- OpenHarmony-JS封装Canvas组件饼状图
- 通过编写计算器学习ArkUI组件
- OpenHarmony—浅析ETS开发状态管理
- 知识分享—设计计算器的UI界面
- Mozilla 正在重新设计其开发者网站(MDN)
- OpenHarmony自定义单选组组件实现
- 一篇带给你OpenHarmony Toggle组件
- 小熊派北向通过JS自定义接口调用南向驱动(以点亮LED为例)
- 微软 Windows 11 Dev 预览版 22563 发布:平板电脑优化任务栏、动态小组件(附更新内容大全)
- 设计更新!Windows 11多任务界面新UI多图曝光
- Firefox 这个功能不就是前端初学者的福音吗?