使用20行JS代码实现屏幕录制功能
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
代码实现
要实现屏幕录制,我们需要通过 navigator.mediaDevices.getDisplayMedia()
方法获取屏幕媒体流,这个方法会弹出一个选择窗口,让用户选择要录制的屏幕或窗口。但出于安全原因,发起录制时必须确保用户手势触发捕获,例如点击按钮:
1 2 3 4 5 6 | const button = document.createElement( "button" ); button.innerHTML = "capture" ; document.body.append(button); button.addEventListener( "click" , async () => { // TODO }); |
点击后,获取视频流并录制,获取到媒体流后,我们可以将其传给 MediaRecorder
对象后开始屏幕录制。
1 2 3 | const stream = await navigator.mediaDevices.getDisplayMedia(); const recoder = new MediaRecorder(stream); recoder.start(); |
当用户停止共享屏幕时停止录制,调用 recoder.stop()
即可停止录制。
1 2 3 4 | const [video] = stream.getVideoTracks(); video.addEventListener( "ended" , () => { recoder.stop(); }); |
监听recoder
的dataavailable
事件获取录制文件并通过URL.createObjectURL()
方法将其转换为可下载的URL,供用户下载录制的视频文件。
1 2 3 4 5 6 | recoder.addEventListener( "dataavailable" , (evt) => { const a = document.createElement( "a" ); a.href = URL.createObjectURL(evt.data); a.download = "capture.webm" ; a.click(); }); |
这样一个简单的屏幕记录器就完成了,不到20行代码就实现了整个屏幕录制的核心功能。完整代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | button.addEventListener( "click" , async () => { const stream = await navigator.mediaDevices.getDisplayMedia(); const recoder = new MediaRecorder(stream); recoder.start(); const [video] = stream.getVideoTracks(); video.addEventListener( "ended" , () => { recoder.stop(); }); recoder.addEventListener( "dataavailable" , (evt) => { const a = document.createElement( "a" ); a.href = URL.createObjectURL(evt.data); a.download = "capture.webm" ; a.click(); }); }); |
浏览器兼容
目前的浏览器支持情况,对于较低的版本需要升级才能使用。
实现这么强大的功能只需要这么少的代码确实是很不错的感觉,但是这只是一个简单的录制功能,实际开发中要考虑的因素相对会比较多,由于屏幕录制可能消耗较多的资源,因此在长时间录制时,我们应该提示用户录制时间或大小的限制,并提供相应的操作和反馈。
使用 MediaRecorder
我们可以方便地实现屏幕录制功能。这种功能在教学、演示等场景下非常有用,同时也为开发者提供了更多创造性的可能性。有兴趣的可以体验使用看看效果,在实际使用中也要合理使用此功能,确保用户隐私和数据安全。
以上就是使用20行JS代码实现屏幕录制功能的详细内容,更多关于JS屏幕录制的资料请关注脚本之家其它相关文章!

微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
最新评论