資訊專欄INFORMATION COLUMN
摘要：為了適應(yīng)流式渲染技術(shù)對網(wǎng)絡(luò)高吞吐零緩沖的特點(diǎn)，可能需要對現(xiàn)有網(wǎng)絡(luò)協(xié)議進(jìn)行改造主要針對。視頻基于的，視頻在客戶端的播放會相對較為容易。輸入信號各自隔離處理即可，瀏覽器端對常見的輸入信號幾乎都有支持。
本文首發(fā)于我的博客（點(diǎn)此查看），歡迎關(guān)注。
流式渲染技術(shù)，不同于傳統(tǒng)意義上前端領(lǐng)域的服務(wù)端渲染（即 SSR），指的是云端性能強(qiáng)勁的機(jī)器進(jìn)行畫面渲染，將渲染完成的數(shù)據(jù)傳送至客戶端，客戶端只負(fù)責(zé)播放及處理和上傳用戶輸入信號至服務(wù)端的一種技術(shù)，谷歌的云游戲平臺即是使用案例之一。在開源社區(qū)也有一些相關(guān)的方案，在拜讀了 Parsec 公司的這篇博文——A Look at Game Streaming Tech in the Browser后，對整個技術(shù)體系中尤其是客戶端（此處即瀏覽器）方面可能遇到的難點(diǎn)有了一個初步的認(rèn)識，以下是一些相關(guān)的記錄。
總體流程通過 WebRTC 技術(shù)實(shí)現(xiàn)點(diǎn)對點(diǎn)（更常見的說法：P2P）連接；
將客戶端配置發(fā)送至服務(wù)端，初始化流；
開始接收服務(wù)端發(fā)來的視頻、音頻及控制信息；
使用 Opus 音頻格式對音頻進(jìn)行解碼并通過 Web Audio API 播放；
使用 Media Source Extensions 將視頻內(nèi)容塞進(jìn) 元素中;
采集輸入事件，將其打包為二進(jìn)制形式并發(fā)送至服務(wù)端。
網(wǎng)絡(luò)瀏覽器中的 P2P 連接只能依賴 WebRTC 實(shí)現(xiàn)，WebSockets 不適合的原因是其在 NAT 遍歷及基于 TCP 的擁塞控制等多方面存在劣勢。parsec 的 web 客戶端使用 RTCDataChannels 與服務(wù)端通信。RTCDataChannel 被 UDP 封裝于 STCP 流中。出于安全考慮，STCP 流又被 DTLS 封裝。
NAT 遍歷和 P2P 的初次連接（后來發(fā)現(xiàn)其可以歸結(jié)為 UDP 穿孔過程中的一部分，就是一個簡單的 STUN ping/pong）在技術(shù)實(shí)現(xiàn)上很復(fù)雜。初次握手需要預(yù)先交換安全憑證，這一操作通過 WebSocket 發(fā)送信號實(shí)現(xiàn)。
parsec 的原生客戶端采用了自己基于 UDP 封裝的 BUD 協(xié)議。出于開放心態(tài)，web 客戶端使用了默認(rèn)的 DTLS/SCTP。雖然可以保證理想狀況下的使用，但其顯然沒有 BUD 協(xié)議來的魯棒性好，所以后期可能會被 BUD 替換。
視頻在瀏覽器中（實(shí)際上只在 Chrome 中），我們使用 Media Source Extensions 將視頻幀裝載進(jìn) HTML 元素。Chrome 為 MSE 實(shí)現(xiàn)了『低延遲』模式，該模式使用視頻流推送模型以支持任意低延遲視頻流。
音頻音頻以原始 Opus 編碼格式傳入，然后通過由 Web Assembly 編譯而來的 Opus 庫進(jìn)行解碼，最后由 Web Audio API 播放。Chrome 在 70 版本后會支持通過 MSE 處理 mp4/opus，采用這一方式將是更好的解決方案，實(shí)現(xiàn)上就類似視頻推送，只不過是推送到了 元素中。
輸入/信號輸入事件（包括鍵盤、鼠標(biāo)、游戲手柄）以及任意信息（光標(biāo)、對話）都在各自信道處理。各種信息被打包為二進(jìn)制格式發(fā)送至服務(wù)端。
個人總結(jié)網(wǎng)絡(luò)
網(wǎng)絡(luò)是非常重要的一點(diǎn)，關(guān)系到是否能夠保證整個應(yīng)用正常使用。為了適應(yīng)流式渲染技術(shù)對網(wǎng)絡(luò)高吞吐、零緩沖的特點(diǎn)，可能需要對現(xiàn)有網(wǎng)絡(luò)協(xié)議進(jìn)行改造（主要針對 UDP）。此外，公網(wǎng)環(huán)境下需要面對的 NAT 遍歷問題，如果前期只考慮局域網(wǎng)環(huán)境，該難點(diǎn)可以被繞過。
視頻
基于 Chrome 的 MSE，視頻在客戶端的播放會相對較為容易。只需要熟悉 MSE API。
音頻
同樣可以基于 Chrome MSE 實(shí)現(xiàn)。
輸入/信號
各自隔離處理即可，瀏覽器端對常見的輸入信號幾乎都有支持。
瀏覽器為 web 客戶端的實(shí)現(xiàn)做了大量的工作，前期如果以快速落地為主要訴求，可以考慮基于瀏覽器的 web 客戶端實(shí)現(xiàn)。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105929.html
摘要：應(yīng)用常見安全漏洞一覽注入注入就是通過給應(yīng)用接口傳入一些特殊字符，達(dá)到欺騙服務(wù)器執(zhí)行惡意的命令。此外，適當(dāng)?shù)臋?quán)限控制不曝露必要的安全信息和日志也有助于預(yù)防注入漏洞。 web 應(yīng)用常見安全漏洞一覽 1. SQL 注入 SQL 注入就是通過給 web 應(yīng)用接口傳入一些特殊字符，達(dá)到欺騙服務(wù)器執(zhí)行惡意的 SQL 命令。 SQL 注入漏洞屬于后端的范疇，但前端也可做體驗(yàn)上的優(yōu)化。 原因 當(dāng)使用外...
摘要：應(yīng)用常見安全漏洞一覽注入注入就是通過給應(yīng)用接口傳入一些特殊字符，達(dá)到欺騙服務(wù)器執(zhí)行惡意的命令。此外，適當(dāng)?shù)臋?quán)限控制不曝露必要的安全信息和日志也有助于預(yù)防注入漏洞。 web 應(yīng)用常見安全漏洞一覽 1. SQL 注入 SQL 注入就是通過給 web 應(yīng)用接口傳入一些特殊字符，達(dá)到欺騙服務(wù)器執(zhí)行惡意的 SQL 命令。 SQL 注入漏洞屬于后端的范疇，但前端也可做體驗(yàn)上的優(yōu)化。 原因 當(dāng)使用外...
摘要：由我所在的團(tuán)隊(duì)共同翻譯完成，并發(fā)布在前端技術(shù)公眾號方凳雅集上，轉(zhuǎn)載于此。在移動端，客戶端渲染很難獲得并保持一個較快的渲染速度。使用技術(shù)進(jìn)行服務(wù)端渲染的主要問題在于它會對可交互時間有明顯的負(fù)面影響，盡管它縮短了首次繪制時間 本文簡單介紹了web應(yīng)用各種渲染方案，其中包括客戶端渲染、服務(wù)器端渲染等各種渲染方案。文章翻譯自：https://developers.google.com...。由...
摘要：由我所在的團(tuán)隊(duì)共同翻譯完成，并發(fā)布在前端技術(shù)公眾號方凳雅集上，轉(zhuǎn)載于此。在移動端，客戶端渲染很難獲得并保持一個較快的渲染速度。使用技術(shù)進(jìn)行服務(wù)端渲染的主要問題在于它會對可交互時間有明顯的負(fù)面影響，盡管它縮短了首次繪制時間 本文簡單介紹了web應(yīng)用各種渲染方案，其中包括客戶端渲染、服務(wù)器端渲染等各種渲染方案。文章翻譯自：https://developers.google.com...。由...
閱讀 1131·2021-11-23 09:51
閱讀 1103·2021-10-18 13:31
閱讀 3039·2021-09-22 16:06
閱讀 4329·2021-09-10 11:19
閱讀 2228·2019-08-29 17:04
閱讀 455·2019-08-29 10:55
閱讀 2522·2019-08-26 16:37
閱讀 3410·2019-08-26 13:29
