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