Part1前言

peer-stream是inveta团队开源的UE5像素流组件，与EpicGame为像素流设计的SDK相比，peer-stream.js是一个轻量级的WebRTC库，具有0依赖性，包含前端组件（使用WebComponents API）和信令服务器（使用NodeJS）。
有不少朋友在使用peer-stream的时候，发现无法在ios端的微信浏览器中进行访问。

针对这个问题，我们进行了重点研究，提出了相应的解决方案，现在可以正式支持IOS浏览器了。

Part2解决思路

peer-stream使用的是WebComponents技术来进行代码组织。
WebComponents技术支持自定义html元素，自定义html元素分2种模式：完全自制元素（Autonomous custom elements）、扩展现有元素（Customized built-in elements）。具体区别可以参考官方文档：https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#high-level_view

我们peer-stream像素流使用了第二种自定义元素：继承现有的<video>元素实现WebRTC功能，这样的好处是不用额外创建一个<video>了，提高了代码的内聚性。主流的浏览器包括Chrome、Edge、Firefox都支持这个功能，但是IOS端的Safari浏览器不支持，本来我们不打算支持Safari的，但是IOS微信小程序里只能使用Safari来展示网页，因此，在这种情况下需要使用到Polyfill向下兼容包，这里推荐一个开源库：https://github.com/ungap/custom-elements
该库实现了自定义元素V1的标准规范，可以让Safari支持自定义元素，当然也就包括了【继承现有元素】因此使用它就能运行peer-stream.js了，而且需要在peer-stream之前引入。类似这样：

<script src="custom-elements.js"></script>
<script src="peer-stream.js"></script>
<video is="peer-stream"></video>

然后在Safari里就能访问像素流了，除此之外，IOS微信app内置浏览器也是用了Safari，而且还限制了<video>的自动播放（防止隐私泄露），因此从IOS的微信或小程序打开的像素流网页必须要用户触发ps.play()函数才能顺利播放视频流，比如通过按钮来播放，否则不会出现画面，ps.paused是true。关于这个问题，我们github上也有相关的issue了：
https://github.com/inveta/peer-stream/issues/39

Part3总结

经过测试，iPhone的微信能打开像素流啦，也算解决了一个老大难题。

Part4Inveta团队

Inveta团队由研发、美术设计、建模等组成。团队介绍:
https://www.inveta.cn/about.html
团队开源项目：
https://github.com/inveta