web技術分享| WebRTC 實現屏幕共享

本文轉載自查看原文 2021-11-04 12:01 1597 web技術分享/ webRTC/ 前端技術/ 屏幕共享/ 音視頻

前言

屏幕共享在工作中是非常實用的功能，比如開會時分享ppt，數據圖表等，老師也可以分享自己的屏幕，實現線上教學，那么屏幕共享是如何實現的呢，今天就跟隨筆者一起研究一下吧！

獲取button元素

const startButton = document.getElementById('startButton');

檢測瀏覽器是否支持

mediaDevices 是 Navigator 只讀屬性，返回一個 MediaDevices 對象，該對象可提供對相機和麥克風等媒體輸入設備的連接訪問，也包括屏幕共享。

if ((navigator.mediaDevices && 'getDisplayMedia' in navigator.mediaDevices)) {
      startButton.disabled = false;
} else {
      errorMsg('不支持getDisplayMedia');
}

實現屏幕共享

getDisplayMedia() 方法提示用戶去選擇和授權捕獲展示的內容或部分內容（如一個窗口）在一個 MediaStream 里. 然后，這個媒體流可以通過使用 MediaStream Recording 被記錄或者作為WebRTC 會話的一部分被傳輸。
[參數] constraints 可選
- 一個可選的MediaStreamConstraints對象，它指定了返回的MediaStream的要求。因為getDisplayMedia()需要視頻軌道，所以即使constraints 對象沒有明確請求視頻軌道，返回的流也會有一個。
[返回值]
- 一個被解析為 MediaStream 的 Promise，其中包含一個視頻軌道。視頻軌道的內容來自用戶選擇的屏幕區域以及一個可選的音頻軌道。

startButton.addEventListener('click', () => {
      navigator.mediaDevices.getDisplayMedia({video: true})
      .then(handleSuccess, handleError);
});

function handleSuccess(stream) {
      startButton.disabled = true;
      const video = document.querySelector('video');
      video.srcObject = stream;

      // 檢測用戶已停止共享屏幕
      // 通過瀏覽器UI共享屏幕。
      stream.getVideoTracks()[0].addEventListener('ended', () => {
            errorMsg('用戶已結束共享屏幕');
            startButton.disabled = false;
      });
}

function handleError(error) {
      errorMsg(`getDisplayMedia error: ${error.name}`, error);
}

function errorMsg(msg, error) {
      const errorElement = document.querySelector('#errorMsg');
      errorElement.innerHTML += `<p>${msg}</p>`;
      if (typeof error !== 'undefined') {
            console.error(error);
      }
}

HTML

HTML 部分結構比較簡單，只需要一個 video 標簽和一個 button 按鈕
引入index.js 和 index.css

<!DOCTYPE html>
<html>
<head>
      <meta charset="utf-8">
      <title>getDisplayMedia</title>
      <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div>
        <video id="gum-local" autoplay playsinline muted></video>
        <button id="startButton" disabled>Start</button>
        <div id="errorMsg"></div>
  </div>
  <script src="./index.js"></script>
</body>
</html>