纯js实现桌面录屏功能
案例背景
最近在web项目开发过程中,遇到需要录制界面操作视频的需求。在一般情况下,我们一般通过视频录制软件完成桌面录屏功能。然而无意间发现W3C早已提供了API,web也可以在开发过程中使用纯js也能在浏览器上实现桌面录屏功能。
API介绍
mediaDevices
mediaDevices是navigator对象提供的一个接口属性,它提供了可供访问了解的媒体对象。mediaDevices也提供了很多API,例如我们下面要讲解的getDisplayMedia接口。
getDisplayMedia接口提示用户去选择和授权捕获展示的内容或者部分内容(例如多屏窗口下选择哪一个屏幕,或者哪一个应用窗口,或者哪一个chrome标签页)。创建完成后返回一个stream对象。stream在后续的录屏对象创建中会得到使用。
- const stream = await navigator.mediaDevices.getDisplayMedia({
- video: true
- })
MediaRecorder
MediaRecorder是W3C提供的,用于创建媒体记录对象的构造函数。我们可以使用这个API去创建一个媒体记录对象实例。
MediaRecorder构造函数接收两个参数,第一个参数是我们在上面所说的stream对象,另外一个函数就是MIME类型。由于不同的浏览器支持的MIME类型不同,所以我们需要根据浏览器去判断哪种类型是当前浏览器支持的,而MediaRecorder.isTypeSupported这个方法可以实现这个判断功能。
- // MIME类型判断
- const mime = MediaRecorder.isTypeSupported('video/mp4;codecs=vp9') ? 'video/mp4;codecs=vp9' : 'video/mp4'
完成了MIME类型判断判断后,我们开始初始化媒体记录对象实例
- const mediaRecorder = new MediaRecorder(stream, {
- MimeType: mime
- })
mediaRecorder实例提供了多种方法,包括开始、结束、暂停和恢复录制。具体如下
1、mediaRecorder.start() 开始录制视频
2、mediaRecorder.stop() 停止录制视频
3、mediaRecorder.pause() 暂停录制视频
4、mediaRecorder.resume() 恢复录制视频
此外mediaRecorder还提供了多种事件处理方法,包括
1、ondataavailable() 该事件用于获取录制的媒体资源
2、onerror() 该事件用于处理录屏错误,当录制过程异常时,我们可以在该方法中进行相应处理和提示
3、onpause() 该事件用于处理录屏暂停,它会在录屏暂停时触发
4、onresume() 该事件在录屏暂停后恢复录屏时触发
5、onstart() 录屏启动处理方法,该事件在录屏开始时触发
6、onstop() 路径结束时间,该事件在录屏结束时触发
具体使用方法如下:
- let chunks = [] // 录屏数据存储数组
- /**
- * 接收录屏数据处理方法,在本方法中我们需要将录屏数据存放在chunks数组中,便于录屏结束后播放或者下载
- */
- mediaRecorder.ondataavailable = (e) => {
- chunks.push(e.data)
- }
- /**
- * 录屏异常处理方法
- */
- mediaRecorder.onerror = () => {
- console.log('error')
- }
- /**
- * 开始录屏处理方法
- */
- mediaRecorder.onstart = () => {
- console.log('start')
- }
- /**
- * 录屏暂停处理方法
- */
- mediaRecorder.onpause = () => {
- console.log('pause')
- }
- /**
- * 录屏暂停处理方法
- */
- mediaRecorder.onstop = () => {
- // 将chunks中存放的数据转为blob
- let blob = new Blob(chunks, {
- type: chunks[0].type
- })
- // 生产一个url,便于video标签播放或者下载
- let url = URL.createObjectURL(blob)
- // 录制视频回放
- let video = document.querySelector('video')
- video.src = url;
- // 录屏下载
- let a = document.createElement('a')
- a.href = url;
- a.download = 'video.mp4'
- a.click()
- }
兼容性问题
视频录制API存在浏览器兼容性问题,IE浏览器全部无法使用,chrome浏览器要求版本在47及以上,Edge浏览器要求版本在12及以上,火狐、safari兼容性都较好。具体可以参考官网文档。
案例总结
通过学习和实践,纯js实现桌面录屏功能还是上手容易,官网说明也较为详细。这种小功能在某些业务场景还是较为实用的,例如本地测试操作视频录制,或者安防产品在现场调试时,由于客户安全等级较高,某些录屏软件无法安装,又需要研发帮忙定位原因时,通过页面内实现的录屏功能,将录屏文件导出交给研发进行排查和定位。