深圳网页设计与制作工资多少钱,互联网推广seo,高端网站制作系统,伍佰亿网站推广在开发中可能有遇到过屏幕录制的需求#xff0c;无论是教学、演示还是游戏录制#xff0c;都需要通过屏幕录制来记录和分享内容。一般在App内H5页基于客户端能力实现的较多#xff0c;现在浏览器中的 MediaRecorder 也提供了这种能力。MediaRecorder 是一种强大的技术#…在开发中可能有遇到过屏幕录制的需求无论是教学、演示还是游戏录制都需要通过屏幕录制来记录和分享内容。一般在App内H5页基于客户端能力实现的较多现在浏览器中的 MediaRecorder 也提供了这种能力。MediaRecorder 是一种强大的技术可以在浏览器端实现屏幕录制功能。本文将介绍如何使用JS MediaRecorder 实现屏幕录制。
代码实现
要实现屏幕录制我们需要通过 navigator.mediaDevices.getDisplayMedia() 方法获取屏幕媒体流这个方法会弹出一个选择窗口让用户选择要录制的屏幕或窗口。但出于安全原因发起录制时必须确保用户手势触发捕获例如点击按钮
const button document.createElement(button);
button.innerHTML capture;
document.body.append(button);
button.addEventListener(click, async () {// TODO
});点击后获取视频流并录制获取到媒体流后我们可以将其传给 MediaRecorder 对象后开始屏幕录制。
const stream await navigator.mediaDevices.getDisplayMedia();
const recoder new MediaRecorder(stream);
recoder.start();当用户停止共享屏幕时停止录制调用 recoder.stop()即可停止录制。 const [video] stream.getVideoTracks();
video.addEventListener(ended, () {recoder.stop();
});监听recoder的dataavailable事件获取录制文件并通过URL.createObjectURL()方法将其转换为可下载的URL供用户下载录制的视频文件。
recoder.addEventListener(dataavailable, (evt) {const a document.createElement(a);a.href URL.createObjectURL(evt.data);a.download capture.webm;a.click();
});这样一个简单的屏幕记录器就完成了不到20行代码就实现了整个屏幕录制的核心功能。完整代码如下
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 我们可以方便地实现屏幕录制功能。这种功能在教学、演示等场景下非常有用同时也为开发者提供了更多创造性的可能性。有兴趣的可以体验使用看看效果在实际使用中也要合理使用此功能确保用户隐私和数据安全。
参考
https://dev.to/ninofiliu/simple-screen-recorder-in-20-lines-of-javascript-4ina 看完本文如果觉得有用记得点个赞支持收藏起来说不定哪天就用上啦
专注前端开发分享前端相关技术干货公众号南城大前端ID: nanchengfe
