master

分支 (1)

管理

管理

master

tool-box
/
capture.html

<!DOCTYPE html>
<!--
 *  Copyright (c) 2018 The WebRTC project authors. All Rights Reserved.
 *
 *  Use of this source code is governed by a BSD-style license
 *  that can be found in the LICENSE file in the root of the source
 *  tree.
-->
<html>
<head>

  <meta charset="utf-8">
  <meta name="description" content="WebRTC code samples">
  <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
  <meta itemprop="description" content="Client-side WebRTC code samples">
  <meta itemprop="name" content="WebRTC code samples">
  <meta name="mobile-web-app-capable" content="yes">
  <meta id="theme-color" name="theme-color" content="#ffffff">

  <base target="_blank">

  <title>getDisplayMedia</title>
</head>
<body>
  <div>
    <video autoplay playsinline muted></video>
    <button id="startButton">Start</button>
    <div id="errorMsg" style="color:red">这里显示错误信息</div>
  </div>
  <script>
    const startButton = document.getElementById('startButton');
    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;
      // demonstrates how to detect that the user has stopped
      // sharing the screen via the browser UI.
      stream.getVideoTracks()[0].addEventListener('ended', () => {
        errorMsg('The user has ended sharing the screen');
        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);
      }
    }
  </script>
</body>
</html>