戰(zhàn))
1. 項(xiàng)目概述與核心挑戰(zhàn)最近在做一個(gè)智慧工廠的數(shù)字孿生項(xiàng)目客戶要求在3D場景里實(shí)時(shí)看到車間關(guān)鍵工位的監(jiān)控畫面。設(shè)備用的是?？低暤臄z像頭而我們的孿生平臺是基于Unity WebGL構(gòu)建的。這個(gè)需求聽起來簡單不就是播個(gè)視頻流嘛但真動起手來坑是一個(gè)接一個(gè)。最核心的問題在于Unity WebGL運(yùn)行在瀏覽器的沙箱環(huán)境里它不能像桌面應(yīng)用那樣直接訪問本地網(wǎng)絡(luò)設(shè)備或調(diào)用系統(tǒng)API。?？禂z像頭提供的通常是RTSP或RTMP流這些協(xié)議在WebGL里根本不被原生支持。更頭疼的是當(dāng)你試圖從Unity WebGL去請求攝像頭所在的流媒體服務(wù)器時(shí)十有八九會撞上瀏覽器的跨域資源共享CORS策略這堵墻直接給你報(bào)個(gè)Access-Control-Allow-Origin錯(cuò)誤畫面一片黑。所以這個(gè)項(xiàng)目的核心命題就變成了如何在Unity WebGL環(huán)境中安全、穩(wěn)定、低延遲地播放位于另一個(gè)域名或IP下的海康攝像頭視頻流經(jīng)過一番折騰和選型我們最終敲定了以AVProVideo插件為核心搭配一個(gè)輕量級的流媒體轉(zhuǎn)發(fā)與跨域代理服務(wù)的技術(shù)方案。這條路走通了效果還不錯(cuò)延遲能控制在1-2秒完全滿足監(jiān)控級需求。下面我就把整個(gè)實(shí)戰(zhàn)過程包括技術(shù)選型的思考、具體的操作步驟、以及踩過的那些坑毫無保留地分享出來。2. 技術(shù)選型與方案設(shè)計(jì)思路2.1 為什么是AVProVideo面對WebGL播放視頻的需求Unity開發(fā)者通常有幾個(gè)選擇原生的VideoPlayer組件、Unity WebRTC或者第三方插件如AVProVideo。原生VideoPlayer在WebGL平臺它嚴(yán)重依賴瀏覽器自身的HTML5video標(biāo)簽?zāi)芰?。這意味著它只能播放瀏覽器原生支持的格式如MP4、WebM對于海康攝像頭普遍輸出的RTSP/RTMP/HLS流基本無能為力除非在服務(wù)器端先進(jìn)行轉(zhuǎn)碼這又引入了額外的復(fù)雜性和延遲。Unity WebRTC這是一個(gè)強(qiáng)大的實(shí)時(shí)通信方案理論上可以實(shí)現(xiàn)超低延遲。但它架構(gòu)復(fù)雜需要信令服務(wù)器、STUN/TURN服務(wù)器并且與?？禂z像頭的標(biāo)準(zhǔn)流媒體協(xié)議對接需要大量的定制開發(fā)工作對于“單純播放監(jiān)控流”這個(gè)需求來說殺雞用牛刀了。AVProVideo這是我們的最終選擇。它本質(zhì)上是一個(gè)功能強(qiáng)大的本地插件集合針對不同平臺Windows, macOS, iOS, Android做了深度優(yōu)化。關(guān)鍵在于它的**“Windows/macOS等平臺使用原生插件高效解碼而在WebGL平臺則自動回退到基于HTML5 Video的策略”**。這個(gè)“回退”機(jī)制正是我們需要的。我們不需要它在WebGL里做硬解碼而是利用它統(tǒng)一的API和強(qiáng)大的兼容性讓我們可以專注于解決“如何讓HTML5 Video能播海康流”這個(gè)問題。簡單說AVProVideo為我們提供了一個(gè)穩(wěn)定、跨平臺的視頻播放API接口把平臺差異的復(fù)雜性封裝了起來。我們在WebGL上要做的就是為它準(zhǔn)備好一個(gè)瀏覽器能播的、且解決了跨域問題的視頻流地址。2.2 整體架構(gòu)設(shè)計(jì)基于以上分析我們設(shè)計(jì)了如下架構(gòu)[海康攝像頭] --(RTSP流)-- [流媒體服務(wù)器/NVR] --(HTTP-FLV/HLS流)-- [跨域代理服務(wù)器] --(可跨域訪問的流)-- [Unity WebGL (AVProVideo)]源端?？禂z像頭產(chǎn)生RTSP流。轉(zhuǎn)碼與封裝使用流媒體服務(wù)器如SRS、Nginx-rtmp-module、或?？底詭У膇VMS-5200平臺將RTSP流轉(zhuǎn)碼并封裝為Web端友好的協(xié)議。HLS (m3u8ts切片) 和 HTTP-FLV是兩種主流選擇。HLS兼容性極好但延遲通常較高10秒以上HTTP-FLV延遲可以做到1-3秒更符合實(shí)時(shí)監(jiān)控需求?？缬虼磉@是關(guān)鍵一環(huán)。流媒體服務(wù)器和Unity WebGL應(yīng)用往往不在同一個(gè)域名下。我們需要一個(gè)簡單的代理服務(wù)器它作為中間層從流媒體服務(wù)器拉流并給響應(yīng)頭加上Access-Control-Allow-Origin: *等CORS頭部從而讓Unity WebGL可以直接請求這個(gè)代理地址而不會跨域?？蛻舳瞬シ旁赨nity中使用AVProVideo組件將代理服務(wù)器提供的流地址如http://proxy-server/live/stream.flv賦值給它即可播放。這個(gè)架構(gòu)清晰地將問題分解流媒體服務(wù)器解決協(xié)議兼容性問題代理服務(wù)器解決跨域安全問題AVProVideo解決Unity內(nèi)的播放與控制問題。3. 核心組件部署與配置詳解3.1 流媒體服務(wù)器搭建以SRS為例我們選擇了SRSSimple RTMP Server因?yàn)樗p量、開源對HTTP-FLV支持非常好。安裝Ubuntu為例:git clone -b 4.0release https://gitee.com/ossrs/srs.git cd srs/trunk ./configure make關(guān)鍵配置 (conf/http.flv.live.conf):listen 1935; max_connections 1000; daemon off; srs_log_tank console; http_server { enabled on; listen 8080; # HTTP服務(wù)端口 dir ./objs/nginx/html; } vhost __defaultVhost__ { http_remux { enabled on; mount [vhost]/[app]/[stream].flv; # 定義HTTP-FLV的訪問路徑 hstrs on; } }這個(gè)配置讓SRS在1935端口接收RTMP推流很多工具可以將RTSP轉(zhuǎn)RTMP同時(shí)在8080端口提供HTTP服務(wù)并將流以FLV格式通過HTTP方式分發(fā)出來。啟動與推流:./objs/srs -c conf/http.flv.live.conf假設(shè)攝像頭RTSP地址是rtsp://admin:password192.168.1.100:554/h264/ch1/main/av_stream你需要使用ffmpeg或OBS等工具將其轉(zhuǎn)為RTMP推送到SRS。ffmpeg -rtsp_transport tcp -i rtsp://admin:password192.168.1.100:554/h264/ch1/main/av_stream -c copy -f flv rtmp://localhost:1935/live/stream1成功后你就可以通過http://你的服務(wù)器IP:8080/live/stream1.flv來訪問這個(gè)FLV流了。用VLC等播放器測試一下能播就成功了一半。注意直接暴露RTSP流地址給ffmpeg可能會遇到?？禂z像頭的流格式問題。如果遇到Unable to find a suitable output format for rtmp://...錯(cuò)誤可以嘗試指定具體的編碼格式例如-vcodec copy -acodec aac。更穩(wěn)妥的方法是使用?？礢DK或?qū)ｉT的RTSP轉(zhuǎn)RTMP網(wǎng)關(guān)工具。3.2 跨域代理服務(wù)器實(shí)現(xiàn)流媒體服務(wù)器在A域名或IP你的WebGL應(yīng)用部署在B域名。瀏覽器會阻止這種跨域請求。我們需要一個(gè)代理。使用Node.js Express實(shí)現(xiàn)一個(gè)簡單的CORS代理初始化項(xiàng)目:mkdir stream-proxy cd stream-proxy npm init -y npm install express http-proxy-middleware cors創(chuàng)建server.js:const express require(express); const { createProxyMiddleware } require(http-proxy-middleware); const cors require(cors); const app express(); const PORT 3000; // 代理服務(wù)器端口 // 啟用CORS允許所有來源生產(chǎn)環(huán)境應(yīng)指定具體域名 app.use(cors()); // 定義代理規(guī)則 const flvProxy createProxyMiddleware({ target: http://你的流媒體服務(wù)器IP:8080, // 指向SRS服務(wù)器 changeOrigin: true, onProxyRes: function (proxyRes, req, res) { // 關(guān)鍵確保響應(yīng)頭包含CORS允許信息 proxyRes.headers[Access-Control-Allow-Origin] *; proxyRes.headers[Access-Control-Allow-Methods] GET, OPTIONS; proxyRes.headers[Access-Control-Allow-Headers] Origin, X-Requested-With, Content-Type, Accept; // 對于FLV流確保Content-Type正確防止瀏覽器MIME類型錯(cuò)誤 if (req.url.endsWith(.flv)) { proxyRes.headers[Content-Type] video/x-flv; } }, // 可選日志 // logger: console }); // 將所有以 /proxy/ 開頭的請求轉(zhuǎn)發(fā)到流媒體服務(wù)器 app.use(/proxy, flvProxy); // 健康檢查端點(diǎn) app.get(/health, (req, res) { res.send(Proxy server is running); }); app.listen(PORT, () { console.log(CORS proxy server running at http://localhost:${PORT}); console.log(Example FLV stream: http://localhost:${PORT}/proxy/live/stream1.flv); });運(yùn)行代理:node server.js現(xiàn)在你的Unity WebGL應(yīng)用應(yīng)該去請求http://代理服務(wù)器IP:3000/proxy/live/stream1.flv而不是直接請求流媒體服務(wù)器。這個(gè)代理地址是允許跨域訪問的。實(shí)操心得在生產(chǎn)環(huán)境中千萬不要用Access-Control-Allow-Origin: *。應(yīng)該用app.use(cors({ origin: https://你的WebGL站點(diǎn)域名 }))來精確控制。另外這個(gè)代理服務(wù)器非常簡易沒有認(rèn)證、限流、負(fù)載均衡。如果流量大或安全性要求高可以考慮用Nginx來做反向代理和CORS配置性能更好配置也更靈活。4. Unity項(xiàng)目集成與AVProVideo配置4.1 AVProVideo導(dǎo)入與基本設(shè)置導(dǎo)入插件從Asset Store購買并導(dǎo)入AVProVideo。導(dǎo)入后檢查Tools/AVPro Video/Run Auto Configure讓插件自動根據(jù)你的Unity版本和平臺進(jìn)行一些基礎(chǔ)配置。創(chuàng)建播放器在場景中創(chuàng)建一個(gè)UI RawImage然后為其添加AVPro Video組件?；蛘吣阋部梢灾苯訌腉ameObject - AVPro Video - Media Player菜單創(chuàng)建一個(gè)完整的播放器預(yù)制體。關(guān)鍵組件說明Media Player核心組件負(fù)責(zé)加載、解碼、播放控制。Display uGui將視頻畫面渲染到指定的uGUI RawImage上。Audio Output處理音頻輸出監(jiān)控流通常無音頻可忽略。4.2 WebGL平臺專項(xiàng)配置這是最容易出錯(cuò)的地方。Player Settings:Resolution and Presentation: 取消勾選Run In Background對于監(jiān)控看板通常需要一直運(yùn)行。Publishing Settings:Compression Format: 建議選擇Brotli以獲得更小的包體和更快的加載速度。Data Caching: 啟用提升重復(fù)訪問體驗(yàn)。AVProVideo針對WebGL的設(shè)置:在Media Player組件的Platform Options中找到WebGL選項(xiàng)卡。Video API: 選擇HTML5 Video。這是必須的WebGL平臺只能用它。Use Texture Mipmaps: 通常關(guān)閉除非你的視頻紋理需要縮小的LOD。Allow Background Playback: 勾選。確保瀏覽器標(biāo)簽頁非激活時(shí)視頻也能繼續(xù)播放對于監(jiān)控場景很重要。4.3 編寫播放控制腳本創(chuàng)建一個(gè)C#腳本掛載到播放器對象上。using UnityEngine; using RenderHeads.Media.AVProVideo; public class HikvisionStreamPlayer : MonoBehaviour { public MediaPlayer mediaPlayer; public string streamUrl http://你的代理服務(wù)器:3000/proxy/live/stream1.flv; void Start() { if (mediaPlayer null) { mediaPlayer GetComponentMediaPlayer(); } if (mediaPlayer ! null) { // 監(jiān)聽事件便于調(diào)試 mediaPlayer.Events.AddListener(OnMediaPlayerEvent); // 設(shè)置播放源 // 注意WebGL上AVProVideo會將這個(gè)URL直接傳遞給HTML5 Video元素 mediaPlayer.OpenMedia(MediaPathType.AbsolutePathOrURL, streamUrl, true); } else { Debug.LogError(MediaPlayer component not found!); } } void OnMediaPlayerEvent(MediaPlayer mp, MediaPlayerEvent.EventType et, ErrorCode errorCode) { switch (et) { case MediaPlayerEvent.EventType.Started: Debug.Log(視頻開始播放); break; case MediaPlayerEvent.EventType.FirstFrameReady: Debug.Log(第一幀準(zhǔn)備就緒); break; case MediaPlayerEvent.EventType.FinishedPlaying: Debug.Log(視頻播放結(jié)束); // 如果是直播流通常不會結(jié)束除非出錯(cuò)?？梢栽谶@里嘗試重連。 break; case MediaPlayerEvent.EventType.Error: Debug.LogError($播放錯(cuò)誤: {errorCode}); // 處理錯(cuò)誤例如網(wǎng)絡(luò)斷開、流地址錯(cuò)誤等 break; } } // 提供給UI按鈕的方法 public void PlayStream(string url) { if (!string.IsNullOrEmpty(url)) { streamUrl url; } mediaPlayer.OpenMedia(MediaPathType.AbsolutePathOrURL, streamUrl, true); } public void StopStream() { mediaPlayer.Stop(); } void OnDestroy() { if (mediaPlayer ! null) { mediaPlayer.Events.RemoveListener(OnMediaPlayerEvent); mediaPlayer.Stop(); } } }腳本要點(diǎn)MediaPathType.AbsolutePathOrURL因?yàn)槲覀兊牧魇且粋€(gè)完整的HTTP URL。OpenMedia的第三個(gè)參數(shù)autoPlay設(shè)為true打開后自動播放。事件監(jiān)聽OnMediaPlayerEvent至關(guān)重要它是你了解播放狀態(tài)加載中、開始、錯(cuò)誤的唯一途徑。4.4 處理WebGL特有的播放問題在WebGL平臺視頻播放受瀏覽器控制權(quán)限更高。需要注意自動播放策略現(xiàn)代瀏覽器Chrome, Safari等都有嚴(yán)格的自動播放策略。通常要求視頻必須是靜音的muted或者用戶之前與頁面有過交互如點(diǎn)擊才能自動播放。解決方案在Start()中打開視頻前可以先嘗試將mediaPlayer.Control.MuteAudio(true)?；蛘咴O(shè)計(jì)一個(gè)“點(diǎn)擊以啟動監(jiān)控”的按鈕在用戶的點(diǎn)擊事件回調(diào)里再調(diào)用PlayStream。格式支持雖然我們用了HTTP-FLV但瀏覽器原生并不支持.flv。這里AVProVideo和流媒體服務(wù)器做了“欺騙”。SRS服務(wù)器在分發(fā)FLV流時(shí)響應(yīng)的Content-Type是video/x-flv而AVProVideo在WebGL模式下內(nèi)部可能是通過MediaSource ExtensionsMSE來喂流給video標(biāo)簽的MSE可以支持FLV封裝。如果遇到播放失敗檢查代理服務(wù)器是否正確設(shè)置了Content-Type頭見前面Node.js代理代碼。5. 部署、優(yōu)化與問題排查實(shí)錄5.1 完整部署流程服務(wù)器端在擁有公網(wǎng)IP或內(nèi)網(wǎng)可達(dá)的服務(wù)器上部署SRS或同類流媒體服務(wù)。確保攝像頭RTSP流能穩(wěn)定推送到SRS并通過HTTP-FLV地址能正常播放。在同一臺或另一臺服務(wù)器上部署Node.js跨域代理服務(wù)。配置防火墻開放SRS的1935RTMP、8080HTTP端口以及Node.js代理服務(wù)的端口如3000。重要生產(chǎn)環(huán)境務(wù)必為代理服務(wù)配置HTTPS。因?yàn)閃ebGL應(yīng)用如果部署在HTTPS站點(diǎn)它只能請求HTTPS資源。可以使用Let‘s Encrypt免費(fèi)證書。Unity端在腳本中將streamUrl更新為你的代理服務(wù)器HTTPS地址例如https://proxy.yourdomain.com/proxy/live/stream1.flv。進(jìn)行WebGL構(gòu)建File - Build Settings選擇WebGL平臺點(diǎn)擊Build。將構(gòu)建生成的Build文件夾和TemplateData文件夾上傳到你的Web服務(wù)器如Nginx, Apache。Web服務(wù)器配置確保你的Web服務(wù)器能正確托管Unity WebGL文件通常需要配置正確的MIME類型例如.data為application/octet-stream.wasm為application/wasm。如果你的WebGL應(yīng)用也涉及跨域請求其他API同樣需要在Web服務(wù)器配置CORS頭部。5.2 性能優(yōu)化建議降低延遲協(xié)議選擇HTTP-FLV延遲1-3s通常低于HLS10s。優(yōu)先使用FLV。SRS配置調(diào)整SRS的gop_cache和queue_size參數(shù)降低緩存。但注意緩存太小可能導(dǎo)致卡頓。網(wǎng)絡(luò)鏈路確保流媒體服務(wù)器、代理服務(wù)器、用戶瀏覽器之間的網(wǎng)絡(luò)延遲盡可能低。盡量讓它們處于同一個(gè)地域或內(nèi)網(wǎng)。降低帶寬與負(fù)載視頻參數(shù)在攝像頭端或ffmpeg轉(zhuǎn)碼時(shí)降低視頻碼率、分辨率和幀率。例如從1080P 25fps降至720P 15fps帶寬消耗會大幅下降。CDN如果用戶分布廣可以考慮使用支持FLV的CDN來分發(fā)視頻流減輕源站壓力。按需播放在數(shù)字孿生場景中可以設(shè)計(jì)為只有當(dāng)用戶視角靠近某個(gè)監(jiān)控點(diǎn)位時(shí)才加載和播放對應(yīng)的視頻流離開時(shí)則停止。5.3 常見問題與排查技巧下面是一個(gè)快速排查表涵蓋了從流源頭到Unity播放的整個(gè)鏈條問題現(xiàn)象可能原因排查步驟Unity WebGL中視頻黑屏無畫面無錯(cuò)誤1. 自動播放策略阻止2. 流地址錯(cuò)誤或無法訪問3. CORS問題未解決1. 打開瀏覽器開發(fā)者工具F12- Console查看是否有自動播放策略的警告。嘗試在代碼中先靜音或通過用戶交互觸發(fā)播放。2. 在瀏覽器新標(biāo)簽頁直接輸入代理后的流地址如https://proxy.../stream.flv用VLC或PotPlayer測試能否播放。如果不能問題在代理或上游。3. 在開發(fā)者工具 - Network標(biāo)簽頁找到對視頻流的請求查看Response Headers是否有Access-Control-Allow-Origin: *或你的域名。沒有就是代理服務(wù)器配置問題?？刂婆_報(bào)錯(cuò)Cross-Origin Request Blocked跨域請求被瀏覽器攔截確認(rèn)代理服務(wù)器的響應(yīng)頭包含正確的CORS頭部。確保代理服務(wù)器本身能正常訪問上游流。視頻能播放但延遲極高10秒1. 使用了HLS協(xié)議2. 流媒體服務(wù)器或網(wǎng)絡(luò)緩存過大1. 確認(rèn)流地址是.flv而非.m3u8。如果是HLS考慮切換為HTTP-FLV。2. 檢查SRS配置嘗試減小gop_cache等緩存參數(shù)。播放幾秒后卡住或斷開1. 網(wǎng)絡(luò)不穩(wěn)定2. 流本身中斷攝像頭離線、推流工具停止3. 瀏覽器標(biāo)簽頁休眠1. 檢查網(wǎng)絡(luò)。2. 在服務(wù)器上查看ffmpeg推流進(jìn)程是否還在運(yùn)行。查看SRS日志。3. 在Unity Player Settings和AVProVideo設(shè)置中確保允許后臺播放。檢查瀏覽器是否設(shè)置了“休眠不活動的標(biāo)簽頁以節(jié)省電量”。畫面綠屏或花屏視頻編碼格式或封裝與瀏覽器/AVProVideo不兼容1. 嘗試在ffmpeg推流時(shí)指定明確的編碼格式如-vcodec libx264 -acodec aac。2. 嘗試將視頻編碼統(tǒng)一為H.264 Baseline/Main Profile這是兼容性最廣的格式。3. 用專業(yè)工具如ffprobe分析原始RTSP流和SRS輸出的FLV流的編碼信息是否一致。MediaPlayer報(bào)告ErrorCode.LoadFailed加載失敗通常是網(wǎng)絡(luò)或地址問題1. 檢查streamUrl字符串是否正確是否有拼寫錯(cuò)誤。2. 檢查代理服務(wù)器是否在運(yùn)行端口是否開放。3. 在瀏覽器中直接訪問該URL看是否返回?cái)?shù)據(jù)可能是一個(gè)播放器或文件下載。WebGL構(gòu)建后視頻組件不顯示或報(bào)JS錯(cuò)誤1. AVProVideo的WebGL插件未正確包含在構(gòu)建中2. Unity版本與AVProVideo版本不兼容1. 檢查構(gòu)建日志確認(rèn)AVProVideo的相關(guān)文件通常在Assets/Plugins/WebGL下被包含。2. 查閱AVProVideo官方文檔確認(rèn)其支持的Unity版本。嘗試創(chuàng)建一個(gè)最簡場景只放AVProVideo播放器進(jìn)行測試構(gòu)建。一個(gè)關(guān)鍵的調(diào)試技巧充分利用瀏覽器開發(fā)者工具。Console看錯(cuò)誤和警告Network看視頻流請求的狀態(tài)碼、響應(yīng)頭、數(shù)據(jù)接收是否持續(xù)。Media面板Chrome可以查看視頻緩沖、解碼狀態(tài)。這些信息是定位WebGL端問題最直接的依據(jù)。6. 進(jìn)階考量與擴(kuò)展方向當(dāng)基礎(chǔ)播放搞定后可以考慮以下方向來提升項(xiàng)目的專業(yè)度和用戶體驗(yàn)多攝像頭管理與切換數(shù)字孿生場景往往有幾十上百個(gè)攝像頭?？梢栽O(shè)計(jì)一個(gè)數(shù)據(jù)驅(qū)動系統(tǒng)為每個(gè)監(jiān)控點(diǎn)位在3D空間中放置一個(gè)“視頻播放器”預(yù)制體根據(jù)用戶視角或選擇動態(tài)加載和卸載流避免同時(shí)播放所有流造成的性能災(zāi)難。使用對象池管理MediaPlayer實(shí)例。流媒體服務(wù)器高可用單點(diǎn)SRS有風(fēng)險(xiǎn)?？梢钥紤]SRS集群或者采用更企業(yè)級的方案如ZLMediaKit、Monibuca等它們對大規(guī)模并發(fā)和集群化支持更好。安全性加固流地址鑒權(quán)不要在代理服務(wù)器上暴露無鑒權(quán)的流地址?？梢栽诖磉壿嬂锛尤隩oken驗(yàn)證Unity端在請求流時(shí)攜帶由業(yè)務(wù)后端頒發(fā)的臨時(shí)Token。HTTPS全鏈路HTTPS包括攝像頭RTSPover TLS、流媒體服務(wù)器、代理服務(wù)器、WebGL站點(diǎn)。限制訪問IP在流媒體服務(wù)器和代理服務(wù)器防火墻層面限制只允許業(yè)務(wù)服務(wù)器或特定IP段訪問。狀態(tài)監(jiān)控與告警在代理服務(wù)器或業(yè)務(wù)后端增加監(jiān)控檢測每個(gè)視頻流是否正常。當(dāng)流中斷時(shí)可以在3D場景中將對應(yīng)的監(jiān)控圖標(biāo)變紅并觸發(fā)告警通知。錄制與回放實(shí)時(shí)監(jiān)控往往需要聯(lián)動錄像回放?？梢栽诹髅襟w服務(wù)器端開啟錄制功能將FLV流同時(shí)寫入文件。然后在Unity中設(shè)計(jì)一個(gè)時(shí)間軸界面通過請求不同的錄制文件片段地址來實(shí)現(xiàn)回放。AVProVideo也支持播放本地文件或網(wǎng)絡(luò)視頻文件可以復(fù)用。這條路走下來你會發(fā)現(xiàn)Unity WebGL播放?？禂z像頭直播流難點(diǎn)不在于Unity本身而在于流媒體服務(wù)鏈路的搭建和Web安全策略的規(guī)避。AVProVideo扮演了一個(gè)優(yōu)秀的“橋梁”讓我們能用一套接近原生的代碼去控制視頻而把協(xié)議轉(zhuǎn)換和跨域這些“臟活累活”交給服務(wù)器端去處理。這種前后端分離、各司其職的架構(gòu)也使得系統(tǒng)更清晰、更易于維護(hù)和擴(kuò)展。希望這篇詳盡的實(shí)戰(zhàn)記錄能幫你繞過我踩過的那些坑順利地把實(shí)時(shí)視頻流整合到你的數(shù)字孿生項(xiàng)目中。 Unity WebGL集成海康攝像頭：AVProVideo與流媒體代理實(shí)戰(zhàn)
1. 項(xiàng)目概述與核心挑戰(zhàn)最近在做一個(gè)智慧工廠的數(shù)字孿生項(xiàng)目客戶要求在3D場景里實(shí)時(shí)看到車間關(guān)鍵工位的監(jiān)控畫面。設(shè)備用的是?？低暤臄z像頭而我們的孿生平臺是基于Unity WebGL構(gòu)建的。這個(gè)需求聽起來簡單不就是播個(gè)視頻流嘛但真動起手來坑是一個(gè)接一個(gè)。最核心的問題在于Unity WebGL運(yùn)行在瀏覽器的沙箱環(huán)境里它不能像桌面應(yīng)用那樣直接訪問本地網(wǎng)絡(luò)設(shè)備或調(diào)用系統(tǒng)API。?？禂z像頭提供的通常是RTSP或RTMP流這些協(xié)議在WebGL里根本不被原生支持。更頭疼的是當(dāng)你試圖從Unity WebGL去請求攝像頭所在的流媒體服務(wù)器時(shí)十有八九會撞上瀏覽器的跨域資源共享CORS策略這堵墻直接給你報(bào)個(gè)Access-Control-Allow-Origin錯(cuò)誤畫面一片黑。所以這個(gè)項(xiàng)目的核心命題就變成了如何在Unity WebGL環(huán)境中安全、穩(wěn)定、低延遲地播放位于另一個(gè)域名或IP下的海康攝像頭視頻流經(jīng)過一番折騰和選型我們最終敲定了以AVProVideo插件為核心搭配一個(gè)輕量級的流媒體轉(zhuǎn)發(fā)與跨域代理服務(wù)的技術(shù)方案。這條路走通了效果還不錯(cuò)延遲能控制在1-2秒完全滿足監(jiān)控級需求。下面我就把整個(gè)實(shí)戰(zhàn)過程包括技術(shù)選型的思考、具體的操作步驟、以及踩過的那些坑毫無保留地分享出來。2. 技術(shù)選型與方案設(shè)計(jì)思路2.1 為什么是AVProVideo面對WebGL播放視頻的需求Unity開發(fā)者通常有幾個(gè)選擇原生的VideoPlayer組件、Unity WebRTC或者第三方插件如AVProVideo。原生VideoPlayer在WebGL平臺它嚴(yán)重依賴瀏覽器自身的HTML5video標(biāo)簽?zāi)芰?。這意味著它只能播放瀏覽器原生支持的格式如MP4、WebM對于海康攝像頭普遍輸出的RTSP/RTMP/HLS流基本無能為力除非在服務(wù)器端先進(jìn)行轉(zhuǎn)碼這又引入了額外的復(fù)雜性和延遲。Unity WebRTC這是一個(gè)強(qiáng)大的實(shí)時(shí)通信方案理論上可以實(shí)現(xiàn)超低延遲。但它架構(gòu)復(fù)雜需要信令服務(wù)器、STUN/TURN服務(wù)器并且與?？禂z像頭的標(biāo)準(zhǔn)流媒體協(xié)議對接需要大量的定制開發(fā)工作對于“單純播放監(jiān)控流”這個(gè)需求來說殺雞用牛刀了。AVProVideo這是我們的最終選擇。它本質(zhì)上是一個(gè)功能強(qiáng)大的本地插件集合針對不同平臺Windows, macOS, iOS, Android做了深度優(yōu)化。關(guān)鍵在于它的**“Windows/macOS等平臺使用原生插件高效解碼而在WebGL平臺則自動回退到基于HTML5 Video的策略”**。這個(gè)“回退”機(jī)制正是我們需要的。我們不需要它在WebGL里做硬解碼而是利用它統(tǒng)一的API和強(qiáng)大的兼容性讓我們可以專注于解決“如何讓HTML5 Video能播海康流”這個(gè)問題。簡單說AVProVideo為我們提供了一個(gè)穩(wěn)定、跨平臺的視頻播放API接口把平臺差異的復(fù)雜性封裝了起來。我們在WebGL上要做的就是為它準(zhǔn)備好一個(gè)瀏覽器能播的、且解決了跨域問題的視頻流地址。2.2 整體架構(gòu)設(shè)計(jì)基于以上分析我們設(shè)計(jì)了如下架構(gòu)[海康攝像頭] --(RTSP流)-- [流媒體服務(wù)器/NVR] --(HTTP-FLV/HLS流)-- [跨域代理服務(wù)器] --(可跨域訪問的流)-- [Unity WebGL (AVProVideo)]源端?？禂z像頭產(chǎn)生RTSP流。轉(zhuǎn)碼與封裝使用流媒體服務(wù)器如SRS、Nginx-rtmp-module、或?？底詭У膇VMS-5200平臺將RTSP流轉(zhuǎn)碼并封裝為Web端友好的協(xié)議。HLS (m3u8ts切片) 和 HTTP-FLV是兩種主流選擇。HLS兼容性極好但延遲通常較高10秒以上HTTP-FLV延遲可以做到1-3秒更符合實(shí)時(shí)監(jiān)控需求?？缬虼磉@是關(guān)鍵一環(huán)。流媒體服務(wù)器和Unity WebGL應(yīng)用往往不在同一個(gè)域名下。我們需要一個(gè)簡單的代理服務(wù)器它作為中間層從流媒體服務(wù)器拉流并給響應(yīng)頭加上Access-Control-Allow-Origin: *等CORS頭部從而讓Unity WebGL可以直接請求這個(gè)代理地址而不會跨域?？蛻舳瞬シ旁赨nity中使用AVProVideo組件將代理服務(wù)器提供的流地址如http://proxy-server/live/stream.flv賦值給它即可播放。這個(gè)架構(gòu)清晰地將問題分解流媒體服務(wù)器解決協(xié)議兼容性問題代理服務(wù)器解決跨域安全問題AVProVideo解決Unity內(nèi)的播放與控制問題。3. 核心組件部署與配置詳解3.1 流媒體服務(wù)器搭建以SRS為例我們選擇了SRSSimple RTMP Server因?yàn)樗p量、開源對HTTP-FLV支持非常好。安裝Ubuntu為例:git clone -b 4.0release https://gitee.com/ossrs/srs.git cd srs/trunk ./configure make關(guān)鍵配置 (conf/http.flv.live.conf):listen 1935; max_connections 1000; daemon off; srs_log_tank console; http_server { enabled on; listen 8080; # HTTP服務(wù)端口 dir ./objs/nginx/html; } vhost __defaultVhost__ { http_remux { enabled on; mount [vhost]/[app]/[stream].flv; # 定義HTTP-FLV的訪問路徑 hstrs on; } }這個(gè)配置讓SRS在1935端口接收RTMP推流很多工具可以將RTSP轉(zhuǎn)RTMP同時(shí)在8080端口提供HTTP服務(wù)并將流以FLV格式通過HTTP方式分發(fā)出來。啟動與推流:./objs/srs -c conf/http.flv.live.conf假設(shè)攝像頭RTSP地址是rtsp://admin:password192.168.1.100:554/h264/ch1/main/av_stream你需要使用ffmpeg或OBS等工具將其轉(zhuǎn)為RTMP推送到SRS。ffmpeg -rtsp_transport tcp -i rtsp://admin:password192.168.1.100:554/h264/ch1/main/av_stream -c copy -f flv rtmp://localhost:1935/live/stream1成功后你就可以通過http://你的服務(wù)器IP:8080/live/stream1.flv來訪問這個(gè)FLV流了。用VLC等播放器測試一下能播就成功了一半。注意直接暴露RTSP流地址給ffmpeg可能會遇到?？禂z像頭的流格式問題。如果遇到Unable to find a suitable output format for rtmp://...錯(cuò)誤可以嘗試指定具體的編碼格式例如-vcodec copy -acodec aac。更穩(wěn)妥的方法是使用?？礢DK或?qū)ｉT的RTSP轉(zhuǎn)RTMP網(wǎng)關(guān)工具。3.2 跨域代理服務(wù)器實(shí)現(xiàn)流媒體服務(wù)器在A域名或IP你的WebGL應(yīng)用部署在B域名。瀏覽器會阻止這種跨域請求。我們需要一個(gè)代理。使用Node.js Express實(shí)現(xiàn)一個(gè)簡單的CORS代理初始化項(xiàng)目:mkdir stream-proxy cd stream-proxy npm init -y npm install express http-proxy-middleware cors創(chuàng)建server.js:const express require(express); const { createProxyMiddleware } require(http-proxy-middleware); const cors require(cors); const app express(); const PORT 3000; // 代理服務(wù)器端口 // 啟用CORS允許所有來源生產(chǎn)環(huán)境應(yīng)指定具體域名 app.use(cors()); // 定義代理規(guī)則 const flvProxy createProxyMiddleware({ target: http://你的流媒體服務(wù)器IP:8080, // 指向SRS服務(wù)器 changeOrigin: true, onProxyRes: function (proxyRes, req, res) { // 關(guān)鍵確保響應(yīng)頭包含CORS允許信息 proxyRes.headers[Access-Control-Allow-Origin] *; proxyRes.headers[Access-Control-Allow-Methods] GET, OPTIONS; proxyRes.headers[Access-Control-Allow-Headers] Origin, X-Requested-With, Content-Type, Accept; // 對于FLV流確保Content-Type正確防止瀏覽器MIME類型錯(cuò)誤 if (req.url.endsWith(.flv)) { proxyRes.headers[Content-Type] video/x-flv; } }, // 可選日志 // logger: console }); // 將所有以 /proxy/ 開頭的請求轉(zhuǎn)發(fā)到流媒體服務(wù)器 app.use(/proxy, flvProxy); // 健康檢查端點(diǎn) app.get(/health, (req, res) { res.send(Proxy server is running); }); app.listen(PORT, () { console.log(CORS proxy server running at http://localhost:${PORT}); console.log(Example FLV stream: http://localhost:${PORT}/proxy/live/stream1.flv); });運(yùn)行代理:node server.js現(xiàn)在你的Unity WebGL應(yīng)用應(yīng)該去請求http://代理服務(wù)器IP:3000/proxy/live/stream1.flv而不是直接請求流媒體服務(wù)器。這個(gè)代理地址是允許跨域訪問的。實(shí)操心得在生產(chǎn)環(huán)境中千萬不要用Access-Control-Allow-Origin: *。應(yīng)該用app.use(cors({ origin: https://你的WebGL站點(diǎn)域名 }))來精確控制。另外這個(gè)代理服務(wù)器非常簡易沒有認(rèn)證、限流、負(fù)載均衡。如果流量大或安全性要求高可以考慮用Nginx來做反向代理和CORS配置性能更好配置也更靈活。4. Unity項(xiàng)目集成與AVProVideo配置4.1 AVProVideo導(dǎo)入與基本設(shè)置導(dǎo)入插件從Asset Store購買并導(dǎo)入AVProVideo。導(dǎo)入后檢查Tools/AVPro Video/Run Auto Configure讓插件自動根據(jù)你的Unity版本和平臺進(jìn)行一些基礎(chǔ)配置。創(chuàng)建播放器在場景中創(chuàng)建一個(gè)UI RawImage然后為其添加AVPro Video組件?；蛘吣阋部梢灾苯訌腉ameObject - AVPro Video - Media Player菜單創(chuàng)建一個(gè)完整的播放器預(yù)制體。關(guān)鍵組件說明Media Player核心組件負(fù)責(zé)加載、解碼、播放控制。Display uGui將視頻畫面渲染到指定的uGUI RawImage上。Audio Output處理音頻輸出監(jiān)控流通常無音頻可忽略。4.2 WebGL平臺專項(xiàng)配置這是最容易出錯(cuò)的地方。Player Settings:Resolution and Presentation: 取消勾選Run In Background對于監(jiān)控看板通常需要一直運(yùn)行。Publishing Settings:Compression Format: 建議選擇Brotli以獲得更小的包體和更快的加載速度。Data Caching: 啟用提升重復(fù)訪問體驗(yàn)。AVProVideo針對WebGL的設(shè)置:在Media Player組件的Platform Options中找到WebGL選項(xiàng)卡。Video API: 選擇HTML5 Video。這是必須的WebGL平臺只能用它。Use Texture Mipmaps: 通常關(guān)閉除非你的視頻紋理需要縮小的LOD。Allow Background Playback: 勾選。確保瀏覽器標(biāo)簽頁非激活時(shí)視頻也能繼續(xù)播放對于監(jiān)控場景很重要。4.3 編寫播放控制腳本創(chuàng)建一個(gè)C#腳本掛載到播放器對象上。using UnityEngine; using RenderHeads.Media.AVProVideo; public class HikvisionStreamPlayer : MonoBehaviour { public MediaPlayer mediaPlayer; public string streamUrl http://你的代理服務(wù)器:3000/proxy/live/stream1.flv; void Start() { if (mediaPlayer null) { mediaPlayer GetComponentMediaPlayer(); } if (mediaPlayer ! null) { // 監(jiān)聽事件便于調(diào)試 mediaPlayer.Events.AddListener(OnMediaPlayerEvent); // 設(shè)置播放源 // 注意WebGL上AVProVideo會將這個(gè)URL直接傳遞給HTML5 Video元素 mediaPlayer.OpenMedia(MediaPathType.AbsolutePathOrURL, streamUrl, true); } else { Debug.LogError(MediaPlayer component not found!); } } void OnMediaPlayerEvent(MediaPlayer mp, MediaPlayerEvent.EventType et, ErrorCode errorCode) { switch (et) { case MediaPlayerEvent.EventType.Started: Debug.Log(視頻開始播放); break; case MediaPlayerEvent.EventType.FirstFrameReady: Debug.Log(第一幀準(zhǔn)備就緒); break; case MediaPlayerEvent.EventType.FinishedPlaying: Debug.Log(視頻播放結(jié)束); // 如果是直播流通常不會結(jié)束除非出錯(cuò)?？梢栽谶@里嘗試重連。 break; case MediaPlayerEvent.EventType.Error: Debug.LogError($播放錯(cuò)誤: {errorCode}); // 處理錯(cuò)誤例如網(wǎng)絡(luò)斷開、流地址錯(cuò)誤等 break; } } // 提供給UI按鈕的方法 public void PlayStream(string url) { if (!string.IsNullOrEmpty(url)) { streamUrl url; } mediaPlayer.OpenMedia(MediaPathType.AbsolutePathOrURL, streamUrl, true); } public void StopStream() { mediaPlayer.Stop(); } void OnDestroy() { if (mediaPlayer ! null) { mediaPlayer.Events.RemoveListener(OnMediaPlayerEvent); mediaPlayer.Stop(); } } }腳本要點(diǎn)MediaPathType.AbsolutePathOrURL因?yàn)槲覀兊牧魇且粋€(gè)完整的HTTP URL。OpenMedia的第三個(gè)參數(shù)autoPlay設(shè)為true打開后自動播放。事件監(jiān)聽OnMediaPlayerEvent至關(guān)重要它是你了解播放狀態(tài)加載中、開始、錯(cuò)誤的唯一途徑。4.4 處理WebGL特有的播放問題在WebGL平臺視頻播放受瀏覽器控制權(quán)限更高。需要注意自動播放策略現(xiàn)代瀏覽器Chrome, Safari等都有嚴(yán)格的自動播放策略。通常要求視頻必須是靜音的muted或者用戶之前與頁面有過交互如點(diǎn)擊才能自動播放。解決方案在Start()中打開視頻前可以先嘗試將mediaPlayer.Control.MuteAudio(true)?；蛘咴O(shè)計(jì)一個(gè)“點(diǎn)擊以啟動監(jiān)控”的按鈕在用戶的點(diǎn)擊事件回調(diào)里再調(diào)用PlayStream。格式支持雖然我們用了HTTP-FLV但瀏覽器原生并不支持.flv。這里AVProVideo和流媒體服務(wù)器做了“欺騙”。SRS服務(wù)器在分發(fā)FLV流時(shí)響應(yīng)的Content-Type是video/x-flv而AVProVideo在WebGL模式下內(nèi)部可能是通過MediaSource ExtensionsMSE來喂流給video標(biāo)簽的MSE可以支持FLV封裝。如果遇到播放失敗檢查代理服務(wù)器是否正確設(shè)置了Content-Type頭見前面Node.js代理代碼。5. 部署、優(yōu)化與問題排查實(shí)錄5.1 完整部署流程服務(wù)器端在擁有公網(wǎng)IP或內(nèi)網(wǎng)可達(dá)的服務(wù)器上部署SRS或同類流媒體服務(wù)。確保攝像頭RTSP流能穩(wěn)定推送到SRS并通過HTTP-FLV地址能正常播放。在同一臺或另一臺服務(wù)器上部署Node.js跨域代理服務(wù)。配置防火墻開放SRS的1935RTMP、8080HTTP端口以及Node.js代理服務(wù)的端口如3000。重要生產(chǎn)環(huán)境務(wù)必為代理服務(wù)配置HTTPS。因?yàn)閃ebGL應(yīng)用如果部署在HTTPS站點(diǎn)它只能請求HTTPS資源。可以使用Let‘s Encrypt免費(fèi)證書。Unity端在腳本中將streamUrl更新為你的代理服務(wù)器HTTPS地址例如https://proxy.yourdomain.com/proxy/live/stream1.flv。進(jìn)行WebGL構(gòu)建File - Build Settings選擇WebGL平臺點(diǎn)擊Build。將構(gòu)建生成的Build文件夾和TemplateData文件夾上傳到你的Web服務(wù)器如Nginx, Apache。Web服務(wù)器配置確保你的Web服務(wù)器能正確托管Unity WebGL文件通常需要配置正確的MIME類型例如.data為application/octet-stream.wasm為application/wasm。如果你的WebGL應(yīng)用也涉及跨域請求其他API同樣需要在Web服務(wù)器配置CORS頭部。5.2 性能優(yōu)化建議降低延遲協(xié)議選擇HTTP-FLV延遲1-3s通常低于HLS10s。優(yōu)先使用FLV。SRS配置調(diào)整SRS的gop_cache和queue_size參數(shù)降低緩存。但注意緩存太小可能導(dǎo)致卡頓。網(wǎng)絡(luò)鏈路確保流媒體服務(wù)器、代理服務(wù)器、用戶瀏覽器之間的網(wǎng)絡(luò)延遲盡可能低。盡量讓它們處于同一個(gè)地域或內(nèi)網(wǎng)。降低帶寬與負(fù)載視頻參數(shù)在攝像頭端或ffmpeg轉(zhuǎn)碼時(shí)降低視頻碼率、分辨率和幀率。例如從1080P 25fps降至720P 15fps帶寬消耗會大幅下降。CDN如果用戶分布廣可以考慮使用支持FLV的CDN來分發(fā)視頻流減輕源站壓力。按需播放在數(shù)字孿生場景中可以設(shè)計(jì)為只有當(dāng)用戶視角靠近某個(gè)監(jiān)控點(diǎn)位時(shí)才加載和播放對應(yīng)的視頻流離開時(shí)則停止。5.3 常見問題與排查技巧下面是一個(gè)快速排查表涵蓋了從流源頭到Unity播放的整個(gè)鏈條問題現(xiàn)象可能原因排查步驟Unity WebGL中視頻黑屏無畫面無錯(cuò)誤1. 自動播放策略阻止2. 流地址錯(cuò)誤或無法訪問3. CORS問題未解決1. 打開瀏覽器開發(fā)者工具F12- Console查看是否有自動播放策略的警告。嘗試在代碼中先靜音或通過用戶交互觸發(fā)播放。2. 在瀏覽器新標(biāo)簽頁直接輸入代理后的流地址如https://proxy.../stream.flv用VLC或PotPlayer測試能否播放。如果不能問題在代理或上游。3. 在開發(fā)者工具 - Network標(biāo)簽頁找到對視頻流的請求查看Response Headers是否有Access-Control-Allow-Origin: *或你的域名。沒有就是代理服務(wù)器配置問題?？刂婆_報(bào)錯(cuò)Cross-Origin Request Blocked跨域請求被瀏覽器攔截確認(rèn)代理服務(wù)器的響應(yīng)頭包含正確的CORS頭部。確保代理服務(wù)器本身能正常訪問上游流。視頻能播放但延遲極高10秒1. 使用了HLS協(xié)議2. 流媒體服務(wù)器或網(wǎng)絡(luò)緩存過大1. 確認(rèn)流地址是.flv而非.m3u8。如果是HLS考慮切換為HTTP-FLV。2. 檢查SRS配置嘗試減小gop_cache等緩存參數(shù)。播放幾秒后卡住或斷開1. 網(wǎng)絡(luò)不穩(wěn)定2. 流本身中斷攝像頭離線、推流工具停止3. 瀏覽器標(biāo)簽頁休眠1. 檢查網(wǎng)絡(luò)。2. 在服務(wù)器上查看ffmpeg推流進(jìn)程是否還在運(yùn)行。查看SRS日志。3. 在Unity Player Settings和AVProVideo設(shè)置中確保允許后臺播放。檢查瀏覽器是否設(shè)置了“休眠不活動的標(biāo)簽頁以節(jié)省電量”。畫面綠屏或花屏視頻編碼格式或封裝與瀏覽器/AVProVideo不兼容1. 嘗試在ffmpeg推流時(shí)指定明確的編碼格式如-vcodec libx264 -acodec aac。2. 嘗試將視頻編碼統(tǒng)一為H.264 Baseline/Main Profile這是兼容性最廣的格式。3. 用專業(yè)工具如ffprobe分析原始RTSP流和SRS輸出的FLV流的編碼信息是否一致。MediaPlayer報(bào)告ErrorCode.LoadFailed加載失敗通常是網(wǎng)絡(luò)或地址問題1. 檢查streamUrl字符串是否正確是否有拼寫錯(cuò)誤。2. 檢查代理服務(wù)器是否在運(yùn)行端口是否開放。3. 在瀏覽器中直接訪問該URL看是否返回?cái)?shù)據(jù)可能是一個(gè)播放器或文件下載。WebGL構(gòu)建后視頻組件不顯示或報(bào)JS錯(cuò)誤1. AVProVideo的WebGL插件未正確包含在構(gòu)建中2. Unity版本與AVProVideo版本不兼容1. 檢查構(gòu)建日志確認(rèn)AVProVideo的相關(guān)文件通常在Assets/Plugins/WebGL下被包含。2. 查閱AVProVideo官方文檔確認(rèn)其支持的Unity版本。嘗試創(chuàng)建一個(gè)最簡場景只放AVProVideo播放器進(jìn)行測試構(gòu)建。一個(gè)關(guān)鍵的調(diào)試技巧充分利用瀏覽器開發(fā)者工具。Console看錯(cuò)誤和警告Network看視頻流請求的狀態(tài)碼、響應(yīng)頭、數(shù)據(jù)接收是否持續(xù)。Media面板Chrome可以查看視頻緩沖、解碼狀態(tài)。這些信息是定位WebGL端問題最直接的依據(jù)。6. 進(jìn)階考量與擴(kuò)展方向當(dāng)基礎(chǔ)播放搞定后可以考慮以下方向來提升項(xiàng)目的專業(yè)度和用戶體驗(yàn)多攝像頭管理與切換數(shù)字孿生場景往往有幾十上百個(gè)攝像頭?？梢栽O(shè)計(jì)一個(gè)數(shù)據(jù)驅(qū)動系統(tǒng)為每個(gè)監(jiān)控點(diǎn)位在3D空間中放置一個(gè)“視頻播放器”預(yù)制體根據(jù)用戶視角或選擇動態(tài)加載和卸載流避免同時(shí)播放所有流造成的性能災(zāi)難。使用對象池管理MediaPlayer實(shí)例。流媒體服務(wù)器高可用單點(diǎn)SRS有風(fēng)險(xiǎn)?？梢钥紤]SRS集群或者采用更企業(yè)級的方案如ZLMediaKit、Monibuca等它們對大規(guī)模并發(fā)和集群化支持更好。安全性加固流地址鑒權(quán)不要在代理服務(wù)器上暴露無鑒權(quán)的流地址?？梢栽诖磉壿嬂锛尤隩oken驗(yàn)證Unity端在請求流時(shí)攜帶由業(yè)務(wù)后端頒發(fā)的臨時(shí)Token。HTTPS全鏈路HTTPS包括攝像頭RTSPover TLS、流媒體服務(wù)器、代理服務(wù)器、WebGL站點(diǎn)。限制訪問IP在流媒體服務(wù)器和代理服務(wù)器防火墻層面限制只允許業(yè)務(wù)服務(wù)器或特定IP段訪問。狀態(tài)監(jiān)控與告警在代理服務(wù)器或業(yè)務(wù)后端增加監(jiān)控檢測每個(gè)視頻流是否正常。當(dāng)流中斷時(shí)可以在3D場景中將對應(yīng)的監(jiān)控圖標(biāo)變紅并觸發(fā)告警通知。錄制與回放實(shí)時(shí)監(jiān)控往往需要聯(lián)動錄像回放?？梢栽诹髅襟w服務(wù)器端開啟錄制功能將FLV流同時(shí)寫入文件。然后在Unity中設(shè)計(jì)一個(gè)時(shí)間軸界面通過請求不同的錄制文件片段地址來實(shí)現(xiàn)回放。AVProVideo也支持播放本地文件或網(wǎng)絡(luò)視頻文件可以復(fù)用。這條路走下來你會發(fā)現(xiàn)Unity WebGL播放?？禂z像頭直播流難點(diǎn)不在于Unity本身而在于流媒體服務(wù)鏈路的搭建和Web安全策略的規(guī)避。AVProVideo扮演了一個(gè)優(yōu)秀的“橋梁”讓我們能用一套接近原生的代碼去控制視頻而把協(xié)議轉(zhuǎn)換和跨域這些“臟活累活”交給服務(wù)器端去處理。這種前后端分離、各司其職的架構(gòu)也使得系統(tǒng)更清晰、更易于維護(hù)和擴(kuò)展。希望這篇詳盡的實(shí)戰(zhàn)記錄能幫你繞過我踩過的那些坑順利地把實(shí)時(shí)視頻流整合到你的數(shù)字孿生項(xiàng)目中。