一、在线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. Shiro 框架的MD5加密算法实现原理

    直接上代码:该代码可以直接用于项目中做MD5加密,加盐加密,多层散列加密 import java.io.UnsupportedEncodingException; import java.securi ...

  2. Laravel入坑指南(9)——数据迁移与填充

    当我们开发完成一个(小)项目,发布到线上时,我们需要将本地数据库迁移到服务器上,并且填充初始化数据.而Laravel框架规定了一套完善的数据迁移与填充机制. 在官网中分别介绍了以下四个命令: php ...

  3. 两台redhat7虚拟机配置ssh免密访问

    说明 有时候为了方便搭建各种集群环境,需要配置多台虚拟机之间可以互相免密码访问.本文就介绍一下这个知识点,希望所帮助的朋友给老徐点个赞:) 两台虚拟机环境配置如下: 虚拟机1:192.168.56.1 ...

  4. 在MATPool矩池云完成Pytorch训练MNIST数据集

    本文为矩池云入门手册的补充:Pytorch训练MNIST数据集代码运行过程. 案例代码和对应数据集,以及在矩池云上的详细操作可以在矩池云入门手册中查看,本文基于矩池云入门手册,默认用户已经完成了机器租 ...

  5. Java面向对象之内部类的几类使用场景

    介绍 Java内部类是一种特殊的类,它定义在另一个类的内部.内部类提供了许多有用的特性,包括访问外部类的私有成员.隐藏实现细节以及实现回调接口等.以下是Java内部类的一些常用场景及其举例说明: 回调 ...

  6. Excel Undo-Redo的编程问题

    Excel Undo历史栈对外是不透明的. 代码对Excel表单的编辑操作会清空Excel内部的Undo历史. Application.OnUndo只支持一次撤销,并且不支持ReDo. 使用DDE的方 ...

  7. 【Azure Function App】遇见无法加载Microsoft.Azure.WebJobs.ParameterBindingData的问题

    问题描述 新部署Azure Funciton代码,遇见无法加载 "Microsoft.Azure.WebJobs.ParameterBindingData" 问题 错误消息:Mic ...

  8. 【Azure Redis 缓存】Redis性能指标之Server Load

    Server Load描述 在Redis的官方介绍中,Server Load指标是Redis 服务器忙于处理消息并且非空闲等待消息的周期百分比. 如果此计数器达到 100,则意味着 Redis 服务器 ...

  9. 2.UML类图基本介绍

    1. UML 基本介绍 UML--Unified modeling language UML(统一建模语言),是一种用于软件系统分析和设计的语言工具,它用于帮助软件开发人员进行思考和记录思路的结果 U ...

  10. P2251 质量检测(分块线段树RMQ单调队列)

    P2251 质量检测 正解应该是ST表和单调队列,不过对于这道题来说只有查询没有修改,这里我还是想用线段树和分块来写,不得不说分块是真好,优雅的暴力 线段树版本: #include <bits/ ...