js实现桌面录屏功能

纯js实现桌面录屏功能

案例背景

最近在web项目开发过程中，遇到需要录制界面操作视频的需求。在一般情况下，我们一般通过视频录制软件完成桌面录屏功能。然而无意间发现W3C早已提供了API，web也可以在开发过程中使用纯js也能在浏览器上实现桌面录屏功能。

API介绍

mediaDevices

mediaDevices是navigator对象提供的一个接口属性，它提供了可供访问了解的媒体对象。mediaDevices也提供了很多API，例如我们下面要讲解的getDisplayMedia接口。
getDisplayMedia接口提示用户去选择和授权捕获展示的内容或者部分内容（例如多屏窗口下选择哪一个屏幕，或者哪一个应用窗口，或者哪一个chrome标签页）。创建完成后返回一个stream对象。stream在后续的录屏对象创建中会得到使用。

1. const stream = await navigator.mediaDevices.getDisplayMedia({
2. video: true
3. })

MediaRecorder

MediaRecorder是W3C提供的，用于创建媒体记录对象的构造函数。我们可以使用这个API去创建一个媒体记录对象实例。

MediaRecorder构造函数接收两个参数，第一个参数是我们在上面所说的stream对象，另外一个函数就是MIME类型。由于不同的浏览器支持的MIME类型不同，所以我们需要根据浏览器去判断哪种类型是当前浏览器支持的，而MediaRecorder.isTypeSupported这个方法可以实现这个判断功能。

1. // MIME类型判断
2. const mime = MediaRecorder.isTypeSupported('video/mp4;codecs=vp9') ? 'video/mp4;codecs=vp9' : 'video/mp4'

完成了MIME类型判断判断后，我们开始初始化媒体记录对象实例

1. const mediaRecorder = new MediaRecorder(stream, {
2. MimeType: mime
3. })

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() 路径结束时间，该事件在录屏结束时触发

具体使用方法如下：

1. let chunks = [] // 录屏数据存储数组
2. /**
3. * 接收录屏数据处理方法，在本方法中我们需要将录屏数据存放在chunks数组中，便于录屏结束后播放或者下载
4. */
5. mediaRecorder.ondataavailable = (e) => {
6. chunks.push(e.data)
7. }
8. /**
9. * 录屏异常处理方法
10. */
11. mediaRecorder.onerror = () => {
12. console.log('error')
13. }
14. /**
15. * 开始录屏处理方法
16. */
17. mediaRecorder.onstart = () => {
18. console.log('start')
19. }
20. /**
21. * 录屏暂停处理方法
22. */
23. mediaRecorder.onpause = () => {
24. console.log('pause')
25. }
26. /**
27. * 录屏暂停处理方法
28. */
29. mediaRecorder.onstop = () => {
30. // 将chunks中存放的数据转为blob
31. let blob = new Blob(chunks, {
32. type: chunks[0].type
33. })
34. // 生产一个url，便于video标签播放或者下载
35. let url = URL.createObjectURL(blob)
36. // 录制视频回放
37. let video = document.querySelector('video')
38. video.src = url;
39. // 录屏下载
40. let a = document.createElement('a')
41. a.href = url;
42. a.download = 'video.mp4'
43. a.click()
44. }

兼容性问题

视频录制API存在浏览器兼容性问题，IE浏览器全部无法使用，chrome浏览器要求版本在47及以上，Edge浏览器要求版本在12及以上，火狐、safari兼容性都较好。具体可以参考官网文档。

案例总结

通过学习和实践，纯js实现桌面录屏功能还是上手容易，官网说明也较为详细。这种小功能在某些业务场景还是较为实用的，例如本地测试操作视频录制，或者安防产品在现场调试时，由于客户安全等级较高，某些录屏软件无法安装，又需要研发帮忙定位原因时，通过页面内实现的录屏功能，将录屏文件导出交给研发进行排查和定位。