原生JavaScript实现录屏功能

1. 前言

使用JavaScript实现浏览器中打开系统录屏功能

示例图:

示例图

2. 源码

<!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>Document</title></head><body><button id="start">开始录制</button><button id="end">结束录制</button><script>let recorder;// 开始录制视频按钮点击事件document.getElementById('start').addEventListener('click', function () {// 获取当前屏幕,video:true表示获取屏幕,audio:true表示获取声音navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }).then(stream => {// stream就是返回的视频流// 使用MediaRecorder录制视频流recorder = new MediaRecorder(stream);// 定义data变量,用于存放视频数据const data = [];// 在ondataavailable(录制视频的时候触发)recorder.ondataavailable = function (e) {// 将视频数据添加到data中data.push(e.data);};// onstop表示视频录制完毕recorder.onstop = function () {// 获取录制窗口并调用stop方法停止录制this.stream.getTracks().forEach(track => track.stop());// 将视频数据转化为blob对象const blob = new Blob(data, { type: this.mimeType });// 创建a标签(用于下载)const a = document.createElement('a');// 使用URL.createObjectURL给视频流创建链接a.href = URL.createObjectURL(blob);// 设置下载时的视频名称a.download = new Date().getTime() + '.webm';// 调用a标签的click方法下载视频a.click();// 使用URL.revokeObjectURL方法释放占用的资源URL.revokeObjectURL(a.href);// 删除a标签a.remove();};// recorder.start()开始录制recorder.start();});});// 结束录制视频按钮点击事件document.getElementById('end').addEventListener('click', function () {// 停止录屏recorder.stop();});</script></body>
</html>## 3. 总结
以上就是本期分享的全部内容了,本篇博客只是分享的录屏的小demo,使用时可以根据不同的情景调整源码,例如腾讯会议的这种实时分享屏幕之类的需求