webRTC 录制屏幕 HTML中录制屏幕

ZuuuuYao

已于 2024-06-12 10:55:07 修改

阅读量617

点赞数 2

分类专栏：前端 # JavaScript 文章标签： webrtc html javascript

于 2024-06-12 10:52:52 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42703501/article/details/139619942

版权

前端同时被 2 个专栏收录

4 篇文章

订阅专栏

JavaScript

2 篇文章

订阅专栏

文章目录

实现目标
实现代码
实现效果

WebRTC（Web Real-Time Communication）即网页实时通信。
它是一项开放标准和免费的技术，主要用于在网页浏览器中实现实时通信，包括但不限于以下几个方面的特点和优势：
特点：
实时性：能够实现低延迟的音频、视频和数据通信。
浏览器集成：直接在浏览器中运行，无需额外安装插件。
对等通信：支持端到端的直接连接，减少对中间服务器的依赖。
优势：
广泛适用性：使得网页应用能够轻松具备实时通信能力，如视频会议、在线教育、实时互动游戏等场景。
开发便捷性：提供了相对简单的 API，方便开发者构建实时通信功能。
跨平台性：可以在多种操作系统和浏览器上运行。
WebRTC 为网页应用带来了强大的实时交互能力，极大地拓展了互联网应用的可能性和用户体验。它在众多领域都有着广泛的应用和发展前景。

实现目标

在 Web 应用中，可以使用 WebRTC 的getDisplayMedia方法获取屏幕共享的媒体流，然后结合MediaRecorder和Blob将视频流数据保存下来，实现屏幕录制的功能。
以下我们实现网页中录后屏预览并下载

实现代码

	<!DOCTYPE html>
	<html lang="en">
	<head>
	  <meta charset="UTF-8">
	  <meta http-equiv="X-UA-Compatible" content="IE=edge">
	  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	  <title>webRTC录屏</title>
	</head>
	<body>
	
	<button id="startRecording">开始录屏</button>
	<button id="stopRecording">停止录屏</button>
	
	<script>
	
	  // 定义媒体录制器对象
	  let mediaRecorder;
	  // 用于存储录制的数据片段
	  let chunks = [];
	  // 屏幕共享的媒体流
	  let stream;
	
	  // 开始录屏的函数
	  const startRecording = async () => {
	    try {
	
	      // 获取屏幕共享的媒体流
	      stream = await navigator.mediaDevices.getDisplayMedia({
	        // 录制屏幕
	        video: true,
	        // 录制麦克风
	        audio: true
	      });
	
	      // 创建媒体录制器，并关联媒体流
	      mediaRecorder = new MediaRecorder(stream);
	
	      // 当有数据可用时的处理函数
	      mediaRecorder.ondataavailable = event => {
	        // 将数据添加到数据片段数组
	        chunks.push(event.data);
	      };
	
	      // 监听停止记录时
	      mediaRecorder.onstop = stopEvent => {
	        // 创建一个包含录制数据的 Blob 对象, 设置视频格式mp4
	        const blob = new Blob(chunks, {type: 'video/mp4'});
	        // 创建可访问该 Blob 的 URL
	        const url = URL.createObjectURL(blob);
	        // 创建一个a标签链接元素
	        const a = document.createElement('a');
	        // 设置链接的地址为 Blob 的 URL
	        a.href = url;
	        // 设置下载的文件名
	        a.download = 'recording.mp4';
	        // 模拟点击进行下载
	        a.click();
	        // 使用完删除
	        a.remove();
	
	        // 创建一个video元素用于预览
	        let videoElement = document.createElement('video');
	        videoElement.id = 'previewVideo';
	        videoElement.width = 600;
	        videoElement.height = 400;
	        videoElement.controls = true; // 添加控制条
	        document.body.appendChild(videoElement); // 将video元素添加到页面中
	        // 将Blob URL设置为video元素的src
	        videoElement.src = url;
	        // 自动播放视频（根据需要开启，注意某些浏览器可能需要用户交互才能自动播放）
	        videoElement.autoplay = true;
	        // 重置video的当前时间，确保从头开始播放
	        videoElement.currentTime = 0;
	
	        // 清空数据片段数组
	        chunks = [];
	        // 停止媒体流中各个轨道的播放
	        stream.getTracks().forEach(track => track.stop());
	        // 重置
	        mediaRecorder = null;
	      }
	
	      // 开始录制
	      mediaRecorder.start();
	    } catch (error) {
	      // 处理获取流出错的情况
	      console.error('获取屏幕共享出错:', error);
	    }
	  };
	
	  // 停止录屏的函数
	  const stopRecording = () => {
	    // 停止录制器
	    mediaRecorder.stop();
	  };
	
	  // 为开始录屏按钮添加点击事件监听
	  document.getElementById('startRecording').addEventListener('click', startRecording);
	  // 为停止录屏按钮添加点击事件监听
	  document.getElementById('stopRecording').addEventListener('click', stopRecording);
	</script>
	</body>
	</html>