資訊專欄INFORMATION COLUMN
摘要：為了適應流式渲染技術對網絡高吞吐零緩沖的特點，可能需要對現有網絡協議進行改造主要針對。視頻基于的，視頻在客戶端的播放會相對較為容易。輸入信號各自隔離處理即可，瀏覽器端對常見的輸入信號幾乎都有支持。
本文首發于我的博客（點此查看），歡迎關注。
流式渲染技術，不同于傳統意義上前端領域的服務端渲染（即 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 客戶端實現。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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...。由...
閱讀 1113·2021-11-23 09:51
閱讀 1080·2021-10-18 13:31
閱讀 2978·2021-09-22 16:06
閱讀 4272·2021-09-10 11:19
閱讀 2204·2019-08-29 17:04
閱讀 431·2019-08-29 10:55
閱讀 2482·2019-08-26 16:37
閱讀 3378·2019-08-26 13:29
