WebRTC demo

AWS加油站

于 2024-04-23 06:35:13 发布

阅读量479

点赞数 10

文章标签： webrtc

本文链接：https://blog.csdn.net/weixin_38781498/article/details/138104876

版权

本文介绍了如何使用WebRTC技术中的getDisplayMediaAPI实现实时屏幕共享功能，包括获取视频流、设置帧率选项以及处理用户结束共享的逻辑。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Screen Capture with WebRTC</title>
</head>
<body>
<h1>WebRTC Screen Capture Example</h1>
<button onclick="startCapture()">Share Screen</button>
<video id="videoElement" autoplay playsinline></video>

<script>
    async function startCapture() {
        const videoElement = document.getElementById('videoElement');
        try {
            // 请求视频流，这里可以添加更多的配置选项，如限制分辨率等
            const stream = await navigator.mediaDevices.getDisplayMedia({
                video: {
                    cursor: "always",
                    // 设置帧率// 可选项: 'never', 'always', 'motion'
                },
                audio: false  // 根据需要可以请求音频
            });
            // 将捕获的流赋值给video元素的srcObject
            videoElement.srcObject = stream;

            // 监听流结束事件，处理用户停止共享的情况
            stream.getVideoTracks()[0].onended = function () {
                console.log('Screen sharing stopped');
                videoElement.srcObject = null;
            };
        } catch (err) {
            // 处理错误，可能是用户拒绝了屏幕共享请求
            console.error("Error: " + err);
        }
    }
</script>
</body>
</html>

AWS加油站

关注

10
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
WebRTC demo

/ 设置帧率// 可选项: 'never', 'always', 'motion'// 请求视频流，这里可以添加更多的配置选项，如限制分辨率等。// 将捕获的流赋值给video元素的srcObject。// 监听流结束事件，处理用户停止共享的情况。// 处理错误，可能是用户拒绝了屏幕共享请求。// 根据需要可以请求音频。
复制链接

扫一扫