webrtc实时直播录屏demo代码
不多说直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video id="screen-video" class="screen-video"></video>
<button onclick="startScreenRecording()">开始</button>
</body>
<style>
.screen-video {
width: 100%;
height: 100%;
}
</style>
<script>
// 获取屏幕媒体流并进行录屏
async function startScreenRecording() {
try {
const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
// 将媒体流显示在 <video> 元素中
const videoElement = document.getElementById('screen-video');
videoElement.srcObject = stream;
videoElement.controls = true;
videoElement.play();
console.log(stream)
// 停止录屏
// stopScreenRecording(stream);
} catch (error) {
console.error('无法获取屏幕媒体流:', error);
}
}
// 停止录屏
function stopScreenRecording(stream) {
const tracks = stream.getTracks();
tracks.forEach(track => track.stop());
console.log(4)
}
</script>
</html>
本地开个服务就可以看到视频了，记得授权哦
扫一扫
862
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
