记录--纯前端如何实现录屏并保存视频到本地

这篇具有很好参考价值的文章主要介绍了记录--纯前端如何实现录屏并保存视频到本地。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

记录--纯前端如何实现录屏并保存视频到本地

作为一个资深的切图仔,我们难免会需要用到把自己写的页面的一些功能通过视频的方式分享给别人。还有一个场景,就是当我们面试的时候,我们需要把我们的屏幕分享给面试官看,那么这些都是怎么实 现的呢?

那么接下来我们就通过这篇文章来学习一下如何实现一个浏览器录屏的功能。

navigator.mediaDevices

mediaDevices 是 Navigator 只读属性,返回一个 MediaDevices 对象,该对象可提供对相机和麦克风等媒体输入设备的连接访问,也包括屏幕共享。

const media = navigator.mediaDevices;

通过原型链可以查找到一些方法,如下图所示:

记录--纯前端如何实现录屏并保存视频到本地

 其中 getDisplayMedia 方法来获取用户的屏幕分享或屏幕捕获流,通常用于制作屏幕录像或视频会议等应用。

navigator.mediaDevices.getDisplayMedia({
  video: true,
});

在这段代码中,请求获取包含视频流的媒体许可,并将其存储在名为 stream 的变量中,以便后续使用。这个流可以用于在网页上显示屏幕共享或进行其他媒体处理操作。

又因为该方法是异步的,我们要编写如下代码:

<body>
  <button>共享屏幕</button>
  <script>
    const button = document.querySelector("button");
    button.addEventListener("click", async () => {
      const stream = await navigator.mediaDevices.getDisplayMedia({
        video: true,
      });
    });
  </script>
</body>

通过点击 button 按钮后会如下图所示效果:

记录--纯前端如何实现录屏并保存视频到本地

这个时候 stream 流我们是拿到了。

MediaRecorder

MediaRecorder 是一个 Web API,用于在浏览器中进行媒体录制,主要用于录制音频和视频。它允许你从不同的来源,例如麦克风、摄像头、屏幕共享或其他媒体元素,捕获音频和视频数据,并将其保存为文件或进行实时流媒体传输。

通过调用 MediaRecorder.isTypeSupported() 方法会判断其 MIME 格式能否被客户端录制。它支持的类型主要有以下几种方式:

const types = [
  "video/webm",
  "audio/webm",
  "video/webm;codecs=vp8",
  "video/webm;codecs=daala",
  "video/webm;codecs=h264",
  "audio/webm;codecs=opus",
  "video/mpeg",
];

通过这种方式来查看当前浏览器是否支持该类型,如下代码所示:

const mime = MediaRecorder.isTypeSupported("video/webm;codecs=h264")
  ? "video/webm;codecs=h264"
  : "video/webm";

结果如下图所示:

const mediaRecorder = new MediaRecorder(stream, { mimeType: mime });

在这段代码里面,执行 new 关键字实例化 MediaRecorder 对象。该对象的结构如下图所示:

记录--纯前端如何实现录屏并保存视频到本地

 我们可以通过监听它的事件来进行不同的操作,如下代码所示:

const chunks = [];
mediaRecorder.addEventListener("dataavailable", function (e) {
  chunks.push(e.data);
});

mediaRecorder.addEventListener("stop", () => {
  const blob = new Blob(chunks, { type: chunks[0].type });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = "video.webm";
  a.click();
});

接下来我们来看看段代码的详细步骤:

  1. dataavailable 事件的监听器。当 MediaRecorder 有可用的音频/视频数据块时,它会触发此事件。在这里,每当数据可用时,将数据块(e.data)添加到 chunks 数组中。这是为了在录制完成后将这些数据块合并成一个完整的媒体文件。
  2. stop 事件的监听器。当录制停止时,MediaRecorder 会触发此事件。
  3. const blob = new Blob(chunks, { type: chunks[0].type });:使用 Blob 构造函数将 chunks 数组中的数据块合并成一个二进制对象(Blob 对象)。chunks[0].type 用于指定 Blob 的媒体类型,通常是 WebM。
  4. const url = URL.createObjectURL(blob);:使用 URL.createObjectURL 方法将 Blob 对象转换为一个临时 URL。这个 URL 可以用于创建下载链接。通过这个 url 传递给新创建的 a 元素用于下载功能。
  5. a.click() 通过模拟点击超链接来触发下载操作。用户将看到一个下载对话框,允许他们保存录制的媒体文件

这样就实现了一个屏幕录制功能了,并且通过该方法实现了一个音视频下载的功能。

完整代码

该功能的完整代码如下所示:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>共享屏幕</button>
    <script>
      const button = document.querySelector("button");
      button.addEventListener("click", async () => {
        const stream = await navigator.mediaDevices.getDisplayMedia({
          video: true,
        });

        const mime = MediaRecorder.isTypeSupported("video/webm;codecs=h264")
          ? "video/webm;codecs=h264"
          : "video/webm";

        const mediaRecorder = new MediaRecorder(stream, { mimeType: mime });

        const chunks = [];
        mediaRecorder.addEventListener("dataavailable", function (e) {
          chunks.push(e.data);
        });

        mediaRecorder.addEventListener("stop", () => {
          const blob = new Blob(chunks, { type: chunks[0].type });
          const url = URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.href = url;
          a.download = "video.webm";
          a.click();
        });
        mediaRecorder.start();
      });
    </script>
  </body>
</html>

完整效果如下图所示:

记录--纯前端如何实现录屏并保存视频到本地

 你也可以直接在其他任何一个页面,将 js 代码修改一下,然后直接复制粘贴到控制台上,并点击页面,如下所示:

-const button = document.querySelector("button");
-button.addEventListener("click", async () => {

+const body = document.body;
+body.addEventListener("click", async () => {

紧接着将代码复制粘贴到浏览器控制台上面,并点击页面的空白处:

记录--纯前端如何实现录屏并保存视频到本地

记录--纯前端如何实现录屏并保存视频到本地

通过这种方式就实现了一种屏幕录制或者屏幕分享的功能了。

最后分享两个我的两个开源项目,它们分别是:

  • 前端脚手架 create-neat
  • 在线代码协同编辑器

本文转载于:

https://juejin.cn/post/7280057907055869992

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 记录--纯前端如何实现录屏并保存视频到本地文章来源地址https://www.toymoban.com/news/detail-709917.html

到了这里,关于记录--纯前端如何实现录屏并保存视频到本地的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【关于前端打开本地文件夹获取本地文件路径】碰到需要打开本地文件路径,然后选中路径保存问题功能实现

    需要导入const ipcRenderer = require(“electron”).ipcRenderer; 但是必须要选中的文件夹里含有文件,因为是截取的,如果没有文件获取到的就是空的,是无法得到路径的 还是不知道怎么完全写打开一个目录然后保存到此目录。目前选择的目录如果无文件则覆盖不到。

    2024年04月11日
    浏览(84)
  • vue前端实现图片下载,实现点击按钮弹出本地窗口,选择自定义保存路径

    直接上代码,废话不多说,点关注,不迷路 一、下载代码 二、别找代码了,不用代码就可以实现 以下按照步骤一步一步来 按照红色箭头所指,用鼠标戳它 恭喜你,功能完成了

    2024年02月13日
    浏览(59)
  • 「Python|音视频处理|场景案例」如何使用ffmpeg下载m3u8视频到本地并保存成mp4

    本文主要介绍如何使用ffmpeg批量下载视频到本地并保存成指定格式。 当我们希望将网页上的视频下载到本地的时候,我们可能获取到的视频地址是指向 .m3u8 格式的,当视频多的时候,手动下载并使用工具转换格式就显得工作量过大。 ffmpeg 是一个强大的音视频处理工具,具体

    2024年02月16日
    浏览(77)
  • 如何通过 nginx 实现远程投屏并控制 android 手机

    操作步骤 本地电脑 Local-A.   远程电脑 Remote-B 和 跟 Remote-B 通过 USB 连接的手机 C 1. 手机 C 连接到 Remote-B 2. Remote-B  通adb tcpip port 将台架的adb设置为以太网模式,从而使台架的adb服务可以被端口绑定。 # enable adb ethernet connection adb tcpip 5555 配置 nginx 5. 修改跳板机nginx配置,将端

    2024年02月12日
    浏览(52)
  • ros来保存图像和保存记录视频的方法---gmsl相机保存视频和图片

    rosrun image_view image_view image:=/myimg_topic这个命令只是用来查看图像的,它并不会保存图像。如果你想要保存图像,你需要使用image_saver节点,并指定保存路径。例如: 下面指令就可以了,可以用 在这个命令中,/path/to/folder/是你想要保存图片的文件夹路径。image%04d.jpg是保存的图

    2024年02月04日
    浏览(37)
  • 前端如何实现本地图片上传?

    对于学习前端的小伙伴都有一个困惑,就是平常想上手小项目,但碍于不想购买服务器,实践受到了限制。 一般我选择node.js搭建服务器,毕竟基于JavaScript语言,简直不是一家人不进一家门。 但是,刚学node.js只会链接数据库进行增删改查,图片上传简直就是渣渣…… 现在,

    2024年02月05日
    浏览(38)
  • 前端如何实现搜索记录展示以及清楚历史搜索记录

    div class=\\\"historydata\\\" v-show=\\\"input\\\"             div历史搜索/div             ul class=\\\"\\\"               li v-for=\\\"(item, index) in historyList\\\" :key=\\\"index\\\" class=\\\"text\\\"                 {{ item }}               /li             /ul           /div  mounted() {     if (JSON.parse(localStorage.getItem(\\\"history

    2024年02月06日
    浏览(46)
  • 如何用ipad录屏,实现16:9视频录制格式?

    1、打开控制中心 在iPad上向上滑动屏幕,打开控制中心。您也可以在设置中选择控制中心,并将“屏幕录制”添加到控制中心中。 2、开始录制 在控制中心中找到“屏幕录制”图标,点击它。屏幕录制会在3秒钟后开始。在录制过程中,iPad会记录您的屏幕操作,并捕捉您的声

    2024年02月12日
    浏览(62)
  • untiy 录制网络摄像头视频并保存到本地文件

    网络摄像头使用的是海康威视的,关于如何使用Ump插件播放海康威视rtsp视频流,请参考我的这篇文章 内部有ump插件的下载链接 untiy接入 海康威视网络摄像头 录屏使用的插件是 AVPro movieCapture 4.6.3版, 插件和完整工程的下载链接放在本文的最后 录制摄像头的实现思想为 1 um

    2023年04月09日
    浏览(53)
  • JAVA根据URL路径将网络视频保存到本地

    开发项目遇到这么一个功能就是,通过http或者https的视频或者图片的浏览地址去下载视频,或者图片保存到本地 1.我们可以看到远程的视频 这个视频是在远程的,需要用浏览器浏览 2.想要下载此视频,以下程序代码可以做到,一个测试的类  控制台输出   说明下载成功了,

    2024年02月12日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包