用JS创建一个录屏功能


Posted in Javascript onNovember 11, 2021

OBS studio很酷,但 JavaScript 更酷,现在,我们用 JavaScript 创建自己的录屏功能。

首先,创建一个HTML文件,包含记录按钮和一个播放标签,

内容如下:

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Parcel Sandbox</title> 
    <meta charset="UTF-8" /> 
  </head> 
  <body> 
    <video class="video" width="600px" controls></video> 
    <button class="record-btn">record</button> 
 
    <script src="./index.js"></script> 
  </body> 
</html>

然后在创建 index.js

监听按钮的点击:

let btn = document.querySelector(".record-btn"); 
 
btn.addEventListener("click", function () { 
  console.log("hello"); 
});

在浏览器中打开 html文件,点击按钮,我们可以在控制台看到打印的 hello

用JS创建一个录屏功能

现在把打印去掉,换成如下的内容:

let btn = document.querySelector(".record-btn"); 
 
btn.addEventListener("click", async function () { 
  let stream = await navigator.mediaDevices.getDisplayMedia({ 
    video: true 
  }); 
});

现在点击按钮,会弹出屏幕选择框:

用JS创建一个录屏功能

因为,我现在用的是两个屏幕,所以会出现两个选择。

现在你可能认为选择一个屏幕,然后点击分享,就开始录制了。非也,这个比我们想象中的复杂点。我们要使用 MediaRecorder 来录制我们的视频。

let btn = document.querySelector(".record-btn") 
 
btn.addEventListener("click", async function () { 
  let stream = await navigator.mediaDevices.getDisplayMedia({ 
    video: true 
  }) 
 
  // 需要更好的浏览器支持 
  const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")  
             ? "video/webm; codecs=vp9"  
             : "video/webm" 
    let mediaRecorder = new MediaRecorder(stream, { 
        mimeType: mime 
    }) 
    // 必须手动启动 
    mediaRecorder.start() 
})

当我们的屏幕被录制下来时,mediaRecorder 会给我们提供分块的数据,我们需要将这些数据存储在一个变量中。

let btn = document.querySelector(".record-btn") 
 
btn.addEventListener("click", async function () { 
  let stream = await navigator.mediaDevices.getDisplayMedia({ 
    video: true 
  }) 
 
  // 需要更好的浏览器支持 
  const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")  
             ? "video/webm; codecs=vp9"  
             : "video/webm" 
    let mediaRecorder = new MediaRecorder(stream, { 
        mimeType: mime 
    }) 
 
    let chunks = [] 
    mediaRecorder.addEventListener('dataavailable', function(e) { 
        chunks.push(e.data) 
    }) 
 
    // 必须手动启动 
    mediaRecorder.start() 
})

现在,当我们点击停止共享按钮时,希望在我们的 video元素中播放录制的视频,可以这么做:

let btn = document.querySelector(".record-btn") 
 
btn.addEventListener("click", async function () { 
  let stream = await navigator.mediaDevices.getDisplayMedia({ 
    video: true 
  }) 
 
  // 需要更好的浏览器支持 
  const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")  
             ? "video/webm; codecs=vp9"  
             : "video/webm" 
    let mediaRecorder = new MediaRecorder(stream, { 
        mimeType: mime 
    }) 
 
    let chunks = [] 
    mediaRecorder.addEventListener('dataavailable', function(e) { 
        chunks.push(e.data) 
    }) 
 
     mediaRecorder.addEventListener('stop', function(){ 
          let blob = new Blob(chunks, { 
              type: chunks[0].type 
          }) 
 
          let video = document.querySelector(".video") 
          video.src = URL.createObjectURL(blob) 
      }) 
 
 
    // 必须手动启动 
    mediaRecorder.start() 
})

现在基本就可以完成了,可以在润色下,如自动下载录制的视频,

可以这么做:

let btn = document.querySelector(".record-btn") 
 
btn.addEventListener("click", async function () { 
  let stream = await navigator.mediaDevices.getDisplayMedia({ 
    video: true 
  }) 
 
  // 需要更好的浏览器支持 
  const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")  
             ? "video/webm; codecs=vp9"  
             : "video/webm" 
    let mediaRecorder = new MediaRecorder(stream, { 
        mimeType: mime 
    }) 
 
    let chunks = [] 
    mediaRecorder.addEventListener('dataavailable', function(e) { 
        chunks.push(e.data) 
    }) 
 
   mediaRecorder.addEventListener('stop', function(){ 
      let blob = new Blob(chunks, { 
          type: chunks[0].type 
      }) 
      let url = URL.createObjectURL(blob) 
 
      let video = document.querySelector("video") 
      video.src = url 
 
      let a = document.createElement('a') 
      a.href = url 
      a.download = 'video.webm' 
      a.click() 
  }) 
 
 
    // 必须手动启动 
    mediaRecorder.start() 
})

现在,最基本的一个录制功能就完善了,动手来试试吧!!

到此这篇关于用JS创建一个录屏功能的文章就介绍到这了,更多相关JS创建一个录屏功能内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS代码格式化和语法着色V2
Oct 14 Javascript
jquery如何把参数列严格转换成数组实现思路
Apr 01 Javascript
Javascript如何判断数据类型和数组类型
Jun 22 Javascript
JQuery为元素添加样式的实现方法
Jul 20 Javascript
微信小程序 底部导航栏目开发资料
Dec 05 Javascript
用原生js做单页应用
Jan 17 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
如何开发出更好的JavaScript模块
Dec 22 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 Javascript
OpenLayers3实现鼠标移动显示坐标
Sep 25 Javascript
JavaScript数组 几个常用方法总结
Nov 11 #Javascript
JavaScript 事件捕获冒泡与捕获详情
JavaScript 定时器详情
Nov 11 #Javascript
使用javascript解析二维码的三种方式
Nov 11 #Javascript
实现一个简单得数据响应系统
Nov 11 #Javascript
JavaScript函数柯里化
Nov 07 #Javascript
JS数组去重详情
Nov 07 #Javascript
You might like
php 生成随机验证码图片代码
2010/02/08 PHP
php实现多张图片上传加水印技巧
2013/04/18 PHP
php ios推送(代码)
2013/07/01 PHP
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
php基于dom实现的图书xml格式数据示例
2017/02/03 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
简单的js分页脚本
2009/05/21 Javascript
监控 url fragment变化的js代码
2010/04/19 Javascript
JavaScript函数详解
2014/11/17 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
python字典基本操作实例分析
2015/07/11 Python
python中字符串的操作方法大全
2018/06/03 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
python实现读取类别频数数据画水平条形图案例
2020/04/24 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
Calphalon美国官网:美国顶级锅具品牌
2020/02/05 全球购物
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
早安问候语大全
2015/11/10 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
致毕业季:你如何做好自己的职业生涯规划书?
2019/07/01 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫