一、在线demo

1、在线demo地址：http://www.lb0125.com/videoRecord.html

注：目前测试发现只有在chrome浏览器里可以使用

二、直接上代码

<!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">录制</button>

  <script>

    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()

    })

  </script>

</body>

</html>

三、效果

操作步骤：

1、点击录制按钮后，在弹窗窗口中选择需要录制的窗口，并点击分享后开始录制

2、录制中时，页面底部会有停止共享的按钮，点击即可结束录制，并下载录制视频到本地，同时可在该页面播放

js实现页面窗口录制的更多相关文章

  1. js关闭当前页面(窗口)的几种方式总结(转)

    js关闭当前页面(窗口)的几种方式总结     1. 不带任何提示关闭窗口的js代码 代码如下 <a href="javascript:window.opener=null;windo ...

  2. js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法

    js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法 javascript如何捕捉IE窗口失去焦点事件window.onblur = function(e) { //you code}; 弹框的 ...

  3. js页面跳转 和 js打开新窗口 方法

    js页面跳转 和 js打开新窗口 方法 第一种: 第二种: 第三种: 第四种: 第五种: 1.在原来的窗体中直接跳转用 window.location.href="你所要跳转的页面" ...

  4. js关闭当前页面窗口的问题

    有两种情况,如果当前页面窗口是由js代码打开的,那么可以直接用js关闭该窗口 如: window.close(); 如果该页面是由用户输入地址直接进去的,直接close是会无效的,此时需要这样做: w ...

  5. JS关闭窗口或JS关闭页面的几种代码

    //JS定时自动关闭窗口 <script language="javascript"> <!-- function closewin(){ self.opener ...

  6. JS关闭窗口或JS关闭页面的几种代码！

    第一种:JS定时自动关闭窗口 <script language="javascript"> <!-- function closewin(){ self.open ...

  7. js实现页面局部弹窗打印

    原文出自:http://www.haorooms.com/post/css3media 在网页中经常看到有打印功能,点击之后,只针对特定区域进行的打印.网上看了一下,大体上有2中实现方法,一种是用cs ...

  8. js中页面刷新和页面跳转的方法总结

    .js中cookie的基本用法简介 2009-12-15 js中页面刷新和页面跳转的方法总结 文章分类:Web前端 关键字: javascript js中页面刷新和页面跳转的方法总结 1.histor ...

  9. JS刷新页面总和！多种JS刷新页面代码!

    1)<meta http-equiv="refresh"content="10;url=跳转的页面">10表示间隔10秒刷新一次2)<scri ...

  10. js中页面刷新和页面跳转的方法总结 [ 转自欢醉同学 ]

    .js中cookie的基本用法简介 2009-12-15 js中页面刷新和页面跳转的方法总结 文章分类:Web前端 关键字: javascript js中页面刷新和页面跳转的方法总结 1.histor ...

随机推荐

  1. NC22544 车站

    题目链接 题目 题目描述 一个国家有n个城市,有n-1条道路连接,保证联通.还有m条铁路,从1~m编号,第i条铁路是从ui到vi的简单路径,多次询问一段区间的铁路的车站. 一个点可以作为区间[L,R] ...

  2. NC204871 求和

    题目链接 题目 题目描述 已知有 \(n\) 个节点,有 \(n-1\) 条边,形成一个树的结构. 给定一个根节点 \(k\) ,每个节点都有一个权值,节点i的权值为 \(v_i\) . 给 \(m\ ...

  3. NC16416 [NOIP2017]逛公园

    题目链接 题目 题目描述 策策同学特别喜欢逛公园. 公园可以看成一张 N 个点 M 条边构成的有向图,且没有自环和重边.其中 1 号点是公园的入口, N 号点是公园的出口,每条边有一个非负权值,代表策 ...

  4. gitlab+jenkins+docker持续集成环境搭建实战

    介绍 什么是持续集成? 持续集成(CI)是在源代码变更后自动检测.拉取.构建和(在大多数情况下)进行单元测试的过程.持续集成是启动管道的环节(尽管某些预验证 -- 通常称为 上线前检查(pre-fli ...

  5. Java并发编程实例--14.在一个同步类中安排独立属性

    当你使用synchronized关键字去保护一个代码块时,你必须传入一个对象的引用. 正常来讲,你讲使用this关键字去引用执行这个方法的对象,但是你可以使用其他对象的引用. 通常的,这些对象将会是专 ...

  6. RESTful API 介绍，设计

    一:RESTful介绍 在互联网发展过程中,最开始是以html静态网页展示内容,url的表现形式一般为 http://www.example.com/getInfo.html:后来随着需求不断提高以及 ...

  7. [超实用插件]在Visual Studio中查看EF Core查询计划

    前言 EF Core是我们.NET开发中比较常用的一款ORM框架,今天我们分享一款可以直接在Visual Studio中查看EF Core查询计划调试器可视化工具(帮助开发者分析和优化数据库查询性能) ...

  8. 多线程系列(九) -ReentrantLock常用方法详解

    一.简介 在上一篇文章中,我们介绍了ReentrantLock类的一些基本用法,今天我们重点来介绍一下ReentrantLock其它的常用方法,以便对ReentrantLock类的使用有更深入的理解. ...

  9. 【Python OO其二】设计模式之工厂模式（举例说明）

    工厂模式 工厂模式中的"工厂"实际上就是把类看成制造某种模板的工具(工厂),由这个类生成的实例除了本身自有的属性外,还可以通过指定的方式产出具有不同属性的同一类实例 比如:有一个面 ...

  10. SemanticKernel如何基于自有数据聊天

    效果 使用gpt-3.5-turbo的效果 什么是向量数据库? 向量数据库是一种专为处理高维向量数据而设计的数据库系统.与传统的关系型数据库不同,向量数据库专注于存储和查询向量数据,例如图像.音频.文 ...