用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 相关文章推荐
javascript 面向对象编程  function是方法(函数)
Sep 17 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
javascript中的事件代理初探
Mar 08 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
jquery操作angularjs对象
Jun 26 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
Nov 03 Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
iview给radio按钮组件加点击事件的实例
Sep 30 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
vant中的toast层级改变操作
Nov 04 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 缓存函数代码
2008/08/27 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
jQuery Mobile 和 Kendo UI 的比较
2016/05/05 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
vue3自定义dialog、modal组件的方法
2021/01/04 Vue.js
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
用Python的urllib库提交WEB表单
2009/02/24 Python
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
Python简单生成随机数的方法示例
2018/03/31 Python
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
Python logging模块原理解析及应用
2020/08/13 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
湖南卫视在线视频媒体平台:芒果TV
2019/10/30 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
竞选班长演讲稿
2013/12/30 职场文书
军训自我鉴定
2014/01/22 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL
Python OpenCV超详细讲解基本功能
2022/04/02 Python
pycharm无法安装cv2模块问题
2022/05/20 Python