摘要：为了适应流式渲染技术对网络高吞吐零缓冲的特点，可能需要对现有网络协议进行改造主要针对。视频基于的，视频在客户端的播放会相对较为容易。输入信号各自隔离处理即可，浏览器端对常见的输入信号几乎都有支持。
本文首发于我的博客（点此查看），欢迎关注。
流式渲染技术，不同于传统意义上前端领域的服务端渲染（即 SSR），指的是云端性能强劲的机器进行画面渲染，将渲染完成的数据传送至客户端，客户端只负责播放及处理和上传用户输入信号至服务端的一种技术，谷歌的云游戏平台即是使用案例之一。在开源社区也有一些相关的方案，在拜读了 Parsec 公司的这篇博文——A Look at Game Streaming Tech in the Browser后，对整个技术体系中尤其是客户端（此处即浏览器）方面可能遇到的难点有了一个初步的认识，以下是一些相关的记录。
总体流程通过 WebRTC 技术实现点对点（更常见的说法：P2P）连接；
将客户端配置发送至服务端，初始化流；
开始接收服务端发来的视频、音频及控制信息；
使用 Opus 音频格式对音频进行解码并通过 Web Audio API 播放；
使用 Media Source Extensions 将视频内容塞进 元素中;
采集输入事件，将其打包为二进制形式并发送至服务端。
网络浏览器中的 P2P 连接只能依赖 WebRTC 实现，WebSockets 不适合的原因是其在 NAT 遍历及基于 TCP 的拥塞控制等多方面存在劣势。parsec 的 web 客户端使用 RTCDataChannels 与服务端通信。RTCDataChannel 被 UDP 封装于 STCP 流中。出于安全考虑，STCP 流又被 DTLS 封装。
NAT 遍历和 P2P 的初次连接（后来发现其可以归结为 UDP 穿孔过程中的一部分，就是一个简单的 STUN ping/pong）在技术实现上很复杂。初次握手需要预先交换安全凭证，这一操作通过 WebSocket 发送信号实现。
parsec 的原生客户端采用了自己基于 UDP 封装的 BUD 协议。出于开放心态，web 客户端使用了默认的 DTLS/SCTP。虽然可以保证理想状况下的使用，但其显然没有 BUD 协议来的鲁棒性好，所以后期可能会被 BUD 替换。
视频在浏览器中（实际上只在 Chrome 中），我们使用 Media Source Extensions 将视频帧装载进 HTML 元素。Chrome 为 MSE 实现了『低延迟』模式，该模式使用视频流推送模型以支持任意低延迟视频流。
音频音频以原始 Opus 编码格式传入，然后通过由 Web Assembly 编译而来的 Opus 库进行解码，最后由 Web Audio API 播放。Chrome 在 70 版本后会支持通过 MSE 处理 mp4/opus，采用这一方式将是更好的解决方案，实现上就类似视频推送，只不过是推送到了 元素中。
输入/信号输入事件（包括键盘、鼠标、游戏手柄）以及任意信息（光标、对话）都在各自信道处理。各种信息被打包为二进制格式发送至服务端。
个人总结网络
网络是非常重要的一点，关系到是否能够保证整个应用正常使用。为了适应流式渲染技术对网络高吞吐、零缓冲的特点，可能需要对现有网络协议进行改造（主要针对 UDP）。此外，公网环境下需要面对的 NAT 遍历问题，如果前期只考虑局域网环境，该难点可以被绕过。
视频
基于 Chrome 的 MSE，视频在客户端的播放会相对较为容易。只需要熟悉 MSE API。
音频
同样可以基于 Chrome MSE 实现。
输入/信号
各自隔离处理即可，浏览器端对常见的输入信号几乎都有支持。
浏览器为 web 客户端的实现做了大量的工作，前期如果以快速落地为主要诉求，可以考虑基于浏览器的 web 客户端实现。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/105929.html
摘要：应用常见安全漏洞一览注入注入就是通过给应用接口传入一些特殊字符，达到欺骗服务器执行恶意的命令。此外，适当的权限控制不曝露必要的安全信息和日志也有助于预防注入漏洞。 web 应用常见安全漏洞一览 1. SQL 注入 SQL 注入就是通过给 web 应用接口传入一些特殊字符，达到欺骗服务器执行恶意的 SQL 命令。 SQL 注入漏洞属于后端的范畴，但前端也可做体验上的优化。 原因 当使用外...
摘要：应用常见安全漏洞一览注入注入就是通过给应用接口传入一些特殊字符，达到欺骗服务器执行恶意的命令。此外，适当的权限控制不曝露必要的安全信息和日志也有助于预防注入漏洞。 web 应用常见安全漏洞一览 1. SQL 注入 SQL 注入就是通过给 web 应用接口传入一些特殊字符，达到欺骗服务器执行恶意的 SQL 命令。 SQL 注入漏洞属于后端的范畴，但前端也可做体验上的优化。 原因 当使用外...
摘要：由我所在的团队共同翻译完成，并发布在前端技术公众号方凳雅集上，转载于此。在移动端，客户端渲染很难获得并保持一个较快的渲染速度。使用技术进行服务端渲染的主要问题在于它会对可交互时间有明显的负面影响，尽管它缩短了首次绘制时间 本文简单介绍了web应用各种渲染方案，其中包括客户端渲染、服务器端渲染等各种渲染方案。文章翻译自：https://developers.google.com...。由...
摘要：由我所在的团队共同翻译完成，并发布在前端技术公众号方凳雅集上，转载于此。在移动端，客户端渲染很难获得并保持一个较快的渲染速度。使用技术进行服务端渲染的主要问题在于它会对可交互时间有明显的负面影响，尽管它缩短了首次绘制时间 本文简单介绍了web应用各种渲染方案，其中包括客户端渲染、服务器端渲染等各种渲染方案。文章翻译自：https://developers.google.com...。由...
阅读 1088·2021-11-23 09:51
阅读 1053·2021-10-18 13:31
阅读 2930·2021-09-22 16:06
阅读 4095·2021-09-10 11:19
阅读 2155·2019-08-29 17:04
阅读 377·2019-08-29 10:55
阅读 2427·2019-08-26 16:37
阅读 3343·2019-08-26 13:29
