4┃音視頻直播系統之瀏覽器中通過 WebRTC 進行桌面共享

一、共享桌面原理

共享桌面在直播系統中是一個必備功能

共享者：每秒鐘抓取多次屏幕，每次抓取的屏幕都與上一次抓取的屏幕做比較，取它們的差值，然后對差值進行壓縮；如果是第一次抓屏或切幕的情況，即本次抓取的屏幕與上一次抓取屏幕的變化率超過 80% 時，就做全屏的幀內壓縮。最后再將壓縮后的數據通過傳輸模塊傳送到觀看端；數據到達觀看端后，再進行解碼，這樣即可還原出整幅圖片并顯示出來

遠程控制端：當用戶通過鼠標點擊共享桌面的某個位置時，會首先計算出鼠標實際點擊的位置，然后將其作為參數，通過信令發送給共享端。共享端收到信令后，會模擬本地鼠標，即調用相關的 API，完成最終的操作

共享桌面的過程：抓屏、壓縮編碼、傳輸、解碼、顯示、控制

二、抓取桌面

瀏覽器 WebRTC 中提供了方法 var promise = navigator.mediaDevices.getDisplayMedia(constraints) 進行桌面的抓取

共享桌面，大多數人知道的可能是RDP（Remote Desktop Protocal）協議，它是 Windows 系統下的共享桌面協議；還有一種更通用的遠程桌面控制協議 VNC（Virtual Network Console），它可以實現在不同的操作系統上共享遠程桌面，而 TeamViewer、Todesk 都是使用的該協議

遠程桌面協議一般分為桌面數據處理與信令控制兩部分

桌面數據：包括了桌面的抓取、編碼、壓縮、傳輸、解碼和渲染

信令控制：包括鍵盤事件、鼠標事件以及接收到這些事件消息后的相關處理等

抓取桌面

三、桌面展示

桌面采集后，就可以通過 HTML 中的

當桌面數據被抓到之后，會觸發 getDeskStream 函數

在該函數中將獲取到的 stream 與 video 標簽聯系起來，這樣就可以顯示桌面了

抓取桌面

四、錄制桌面視頻

錄制視頻其實在上一章中詳細說過，這里就不再重復了，這里只貼一下大概的邏輯代碼

首先通過 getDisplayMedia 方法獲取到本地桌面數據

然后將該流當作參數傳給 MediaRecorder 對象

并實現 ondataavailable 事件，最終將音視頻流錄制下來

具體實現請參考上一篇文章自己進行完善

開始錄制

視頻 視頻直播

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。