天天看點

web技術分享| WebRTC 實作螢幕共享

螢幕共享在工作中是非常實用的功能,比如開會時分享ppt,資料圖表等,老師也可以分享自己的螢幕,實作線上教學,那麼螢幕共享是如何實作的呢,今天就跟随筆者一起研究一下吧!

mediaDevices 是 Navigator 隻讀屬性,傳回一個 <code>MediaDevices</code> 對象,該對象可提供對相機和麥克風等媒體輸入裝置的連接配接通路,也包括螢幕共享。

<code>getDisplayMedia()</code> 方法提示使用者去選擇和授權捕獲展示的内容或部分内容(如一個視窗)在一個 <code>MediaStream</code> 裡. 然後,這個媒體流可以通過使用 MediaStream Recording 被記錄或者作為<code>WebRTC</code> 會話的一部分被傳輸。

一個可選的<code>MediaStreamConstraints</code>對象,它指定了傳回的<code>MediaStream</code>的要求。 因為<code>getDisplayMedia()</code>需要視訊軌道,是以即使<code>constraints</code> 對象沒有明确請求視訊軌道,傳回的流也會有一個。

一個被解析為 <code>MediaStream</code> 的 <code>Promise</code>,其中包含一個視訊軌道。視訊軌道的内容來自使用者選擇的螢幕區域以及一個可選的音頻軌道。

<code>HTML 部分結構比較簡單,隻需要一個 video 标簽和一個 button 按鈕</code>

引入<code>index.js</code> 和 <code>index.css</code>

web技術分享| WebRTC 實作螢幕共享
web技術分享| WebRTC 實作螢幕共享