利用getDisplayMedia()在WebRTC上实现屏幕捕获-CSDN博客

本文链接：https://blog.csdn.net/weixin_41821317/article/details/111176861

这是一个关于使用navigator.mediaDevices.getDisplayMedia() API进行屏幕捕获的简单示例。该API允许在浏览器中获取用户的屏幕或特定应用窗口的媒体流，用于在网页上播放。此代码演示了如何在用户点击按钮后调用这个API，并将捕获的屏幕流显示到video元素中。浏览器兼容性和相关代码实现也已提供。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 用法

var promise = navigator.mediaDevices.getDisplayMedia(constraints);

2. 浏览器兼容性

3. demo

<!--
    getDisplayMedia_demo
-->
<style>
    html, body {
        margin: 0!important;
        padding: 0!important;
        text-align: center;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-size: 1em;
    }

    video {
       width: 40%;
       border-radius: 5px;
       border: 1px solid black;
   }
</style>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2020-12-14 屏幕捕获getDisplayMedia demo</title>
</head>

<body>
    <div id="mainDiv">
        <h1><code>getDisplayMedia()</code> very simple demo</h1>

        <video controls autoplay playsinline muted="false" volume=0></video>
        <br><br>
        <button id="btn-test-getDisplayMedia">Test getDisplayMedia API</button>
        
        <script src="getDisplayMedia_demo.js"> </script> 
      </div>
</body>

var constraints = {video: true};
var video = document.querySelector('video');
var button = document.querySelector('#btn-test-getDisplayMedia');

button.onclick = function(){
    this.disabled = true;

    invokeGetDisplayMedia(function(screen){
        video.srcObject = screen;
    });
}

function invokeGetDisplayMedia(success){
    var constraints = {
        video : true
    };
    if(navigator.mediaDevices.getDisplayMedia) {
        navigator.mediaDevices.getDisplayMedia(constraints).then(success);
    }
    else {
        navigator.getDisplayMedia(constraints).then(success);
    }
}