首页 > 其他分享 >20行JS代码实现屏幕录制

20行JS代码实现屏幕录制

时间:2023-11-09 23:00:38浏览次数:34  
标签:MediaRecorder const recoder button 录制 JS 20 屏幕

在开发中可能有遇到过屏幕录制的需求,无论是教学、演示还是游戏录制,都需要通过屏幕录制来记录和分享内容。一般在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();
});

监听recoderdataavailable事件获取录制文件并通过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)

标签:MediaRecorder,const,recoder,button,录制,JS,20,屏幕
From: https://blog.51cto.com/react/8286281

相关文章

  • 【re】[广东省大学生攻防大赛 2022]pyre --爆破字符
    附件下载下来,解压,发现是一个python打包的exe这里用pyinstxtractor进行反编译,后面会得到一个文件夹,里面有一个pyc文件这里可以用进行网站进行对pyc进行反编译:在线Pythonpyc文件编译与反编译(lddgo.net)反编译的python结果如下:#Visithttps://www.lddgo.net/string/pyc-com......
  • 通过一道题目带你深入了解WAF特性、PHP超级打印函数、ASCII码chr()对应表等原理[RoarC
    题目环境:<br/>依此输入以下内容并查看回显结果1+11'index.phpls<br/><br/>到这里没思路了F12查看源代码<br/>一定要仔细看啊,差点没找到,笑哭访问calc.php文件<br/>果然有点东西PHP代码审计error_reporting(0);关闭错误报告通过GET方式传参的参数numsho......
  • 【专题】2023智能汽车发展趋势洞察报告PDF合集分享(附原数据表)
    原文链接:https://tecdat.cn/?p=34219原文出处:拓端数据部落公众号至2025年,智能网联汽车产业规模将突破5000亿。预计具备L2及以上自动驾驶能力的车型销量将突破千万级,渗透率将跃升至42.9%。阅读原文,获取专题报告合集全文,解锁文末56份智能汽车相关行业研究报告。智能汽车发展水平......
  • 【专题】2022-2023中国跨境出口B2C电商报告PDF合集分享(附原数据表)
    报告链接:http://tecdat.cn/?p=32805原文出处:拓端数据部落公众号全球疫情的爆发对于全球经济和消费市场都带来了很大的冲击,特别是在消费者的消费行为和零售市场格局方面发生了重大变革。同时由于全球供应链的重新调整,产业分化现象也加速出现。中国跨境电商已经历了十年以上的发......
  • 前端学习-JavaScrip学习-js基础03
    学习教程:黑马程序员视频链接循环案例-九九乘法表<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>......
  • [ZJCTF 2019]NiZhuanSiWei 1
    1.进入页面2.从代码中可以看出要求,以get方式传递text,file,password三个参数。3.第一层验证if(isset($text)&&(file_get_contents($text,'r')==="welcome to the zjctf"))  传入text,而且file_get_contents($text,'r')之后内容为“welcometothezjctf”  利用php伪协......
  • 重磅!大厂2023最新全套面试题,简直就是拿Offer的神器
    前言大厂的面试一直都是风向标,动态必须关注!想要高效迅速的拿到心仪的offer,一定要从面试官的角度出发,提前做好功课,了解市场的最新风向。我在和几位大佬详细沟通之后,终于整理出了这份最新的《2023Android面试收割指南》,内容涵盖各大厂最新面试题合集,部分题目还是有点难度的,希望大家能......
  • Adobe Photoshop 2023最新激活(附图文教程)
    介绍Photoshop软件是一个非常强大的数字图像处理和编辑软件,具有直观易用的用户界面,各种图像编辑和处理工具,各种图层和蒙版功能,各种滤镜和插件。无论是初学者还是有经验的设计师都可以使用该软件轻松地处理、修改和创建各种类型的图像,以满足不同领域的需求。安装步骤下载地址  htt......
  • 20231109打卡
    早上,我准时开始了新一轮的学习。首先,我学习了算法与数据结构中的迪杰斯特拉算法和弗洛伊德算法。迪杰斯特拉算法是一种用来解决最短路径问题的算法,而弗洛伊德算法则可以求解任意两点之间的最短路径。通过课堂讲解和实例演示,我逐渐理解了它们的原理和应用。我通过编写代码实践了这......
  • P7514 [省选联考 2021 A/B 卷] 卡牌游戏
    [省选联考2021A/B卷]卡牌游戏题目描述Alice有\(n\)张卡牌,第\(i\)(\(1\lei\len\))张卡牌的正面有数字\(a_i\),背面有数字\(b_i\),初始时所有卡牌正面朝上。现在Alice可以将不超过\(m\)张卡牌翻面,即由正面朝上改为背面朝上。Alice的目标是让最终朝上的\(n\)个数......