使用20行JS代码实现屏幕录制功能

 更新时间:2023年11月10日 08:27:48   作者:南城FE  
在开发中可能有遇到过屏幕录制的需求,无论是教学、演示还是游戏录制,都需要通过屏幕录制来记录和分享内容,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 我们可以方便地实现屏幕录制功能。这种功能在教学、演示等场景下非常有用,同时也为开发者提供了更多创造性的可能性。有兴趣的可以体验使用看看效果,在实际使用中也要合理使用此功能,确保用户隐私和数据安全。

以上就是使用20行JS代码实现屏幕录制功能的详细内容,更多关于JS屏幕录制的资料请关注脚本之家其它相关文章!

相关文章

  • js实现带积分弹球小游戏

    js实现带积分弹球小游戏

    这篇文章主要为大家详细介绍了js实现带积分弹球小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07
  • JavaScript 中判断变量是否为数字的示例代码

    JavaScript 中判断变量是否为数字的示例代码

    这篇文章主要介绍了JavaScript 中判断变量是否为数字的示例代码,代码简单易懂对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-10-10
  • js实现开关灯效果

    js实现开关灯效果

    这篇文章主要为大家详细介绍了js实现开关灯效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • javaScript代码飘红报错看不懂?读完这篇文章再试试

    javaScript代码飘红报错看不懂?读完这篇文章再试试

    这篇文章主要介绍了javaScript代码飘红报错看不懂?读完这篇文章再试试,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • 详解小程序循环require之坑

    详解小程序循环require之坑

    这篇文章主要介绍了详解小程序循环require之坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • 详解JavaScript对象的深浅复制

    详解JavaScript对象的深浅复制

    从层次上来看,对象的复制可以简单地分为浅复制和深复制,顾名思义,浅复制是指只复制一层对象的属性,不会复制对象中的对象的属性,对象的深复制会复制对象中层层嵌套的对象的属性。本文是我在复制对象方面的一些心得总结,由浅复制到深复制,感兴趣的朋友一起学习吧
    2017-03-03
  • 如何使用JavaScript实现无缝滚动自动播放轮播图效果

    如何使用JavaScript实现无缝滚动自动播放轮播图效果

    这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-08-08
  • js关闭浏览器窗口及检查浏览器关闭事件

    js关闭浏览器窗口及检查浏览器关闭事件

    js关闭浏览器窗口,不弹出提示框。支持ie6+,火狐,谷歌等浏览器,下面以一个示例为大家详细介绍下具体的实现方法,感兴趣的朋友可以参考下
    2013-09-09
  • JS实现瀑布流布局

    JS实现瀑布流布局

    这篇文章主要为大家详细介绍了JS实现瀑布流布局效果展示,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • script标签中的defer和async使用技巧说明

    script标签中的defer和async使用技巧说明

    这篇文章主要介绍了script标签中的defer和async使用技巧,包含他们的下载顺序和执行顺序,以及使用场景需要的朋友可以参考下
    2023-02-02

最新评论