纯前端实现录屏并保存视频到本地

使用场景: 面试时共享屏幕,录制面试过程,分享网站页面的内容

如何实现浏览器录屏功能?

1.了解 mediaDevices 对象

mediaDevices 是 Navigator 只读属性,返回一个 MediaDevices 对象,该对象可提供对相机和麦克风等媒体输入设备的连接访问,也包括屏幕共享。

图1 mediaDevices对象展示

其中 getDisplayMedia 方法可以获取用户的屏幕分享或屏幕捕获流,通常用于制作屏幕录像或视频会议等应用。

可通过如下代码请求获取包含视频流的媒体许可:

xml 复制代码
<body>
<button>共享屏幕</button> 
<script> 
    const button = document.querySelector("button"); 
    let stream
    button.addEventListener("click", async () => {
    stream = await navigator.mediaDevices.getDisplayMedia({ video: true }) }); 
</script>
</body>

可以将其存储在名为 stream 的变量中,以便后续使用。

这个流可以用于在网页上显示屏幕共享或进行其他媒体处理操作。

2.了解 MediaRecorder API

MediaRecorder 是一个 Web API,用于在浏览器中进行媒体录制,主要用于录制音频和视频。它允许你从不同的来源,例如麦克风、摄像头、屏幕共享或其他媒体元素,捕获音频和视频数据,并将其保存为文件或进行实时流媒体传输。通过调用 MediaRecorder.isTypeSupported() 方法会判断其 MIME 格式能否被客户端录制。

它支持的类型主要有以下几种方式:

ini 复制代码
const types = [ 
    "video/webm",  "audio/webm",  "video/webm;codecs=vp8",  "video/mpeg",  
    "video/webm;codecs=daala",  "video/webm;codecs=h264",  "audio/webm;codecs=opus"
];

3.结合 mediaDevices 对象和 MedieRecorder API 实现录屏并保存视频到本地

首先通过1.中方式获取屏幕分享或屏幕捕获流

然后判断当前浏览器是否支持对应MIME类型

// 举例

ini 复制代码
const mime = MediaRecorder.isTypeSupported("video/webm;codecs=h264") ? 
"video/webm;codecs=h264" : "video/webm";
// 之后以两者为基础通过new关键字实例化一个 MediaRecorder 对象
const mediaRecorder = new MediaRecorder( stream , { mimeType: mime });
// 可以通过监听 mediaRecorder 的 dataavailable 和 stop 事件来进行屏幕分享或屏幕捕获流的下载
// 如下代码所示:
const chunks = [];
mediaRecorder.addEventListener("dataavailable", (e)=> { 
    chunks.push(e.data)
});
mediaRecorder.addEventListener("stop", () => { 
    const blob = new Blob(chunks, { type: chunks[0].type }); 
    const url = URL.createObjectURL(blob); 
    const a = document.createElement("a"); 
    a.hidden = true;
    a.target = _blank;
    a.href = url; 
    a.download = "video.webm"; 
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
});
mediaRecorder.start();

通过如上代码即可实现录屏并保存视频到本地

接下来分析一下dataavailable 和 stop 事件

① dataavailable 事件:当 MediaRecorder 有可用的音频/视频数据块时,它会触发此事件。在这里,每当数据可用时,将数据块(e.data)添加到 chunks 数组中。这是为了在录制完成后将这些数据块合并成一个完整的媒体文件。

② stop 事件:当录制停止时,MediaRecorder 会触发此事件。

综上,实现了一个屏幕录制功能,并且通过 MediaRecorder API 实现了一个音视频下载的功能。

相关推荐
慧一居士8 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead10 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js