一、在线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. NC22494 选点

    题目链接 题目 题目描述 有一棵n个节点的二叉树,1为根节点,每个节点有一个值wi.现在要选出尽量多的点. 对于任意一棵子树,都要满足: 如果选了根节点的话,在这棵子树内选的其他的点都要比根节点的值大 ...

  2. Rancher 2.x 安装

    Rancher 是一个容器管理平台.Rancher 简化了使用 Kubernetes 的流程. 下面记录一下手动安装Rancher的步骤 1.  部署 Rancher Server 执行以下命令即可( ...

  3. gunzip命令

    解压提取文件内容 语法格式:gunzip 参数 压缩包 常用参数 -a 使用ASCII文本模式 -q 静默执行模式 -c 将解压后的文件输出到标准输出设备 -r 递归处理所有子文件 -f 强制解压文件 ...

  4. 【八股cover#4】OS Q&A与知识点

    OS Q&A与知识点 重点知识 进程 概念 ​ 我们编译的代码可执行文件只是储存在硬盘的静态文件,运行时被加载到内存,CPU执行内存中指令,这个运行的程序被称为进程. 进程是对运行时程序的封装 ...

  5. Linux管理SpringBoot应用shell脚本实现

    ​ Liunx系统如何部署和管理SpringBoot项目应用呢?最简单的方法就是写个shell脚本. Spring Boot是Java的一个流行框架,用于开发企业级应用程序.下面我们将学习如何在Lin ...

  6. 关于Chrome版本太旧的更新问题

    •问题 这两天不知道咋了,Chrome 老是给我提示版本太旧,需要更新. 作为一名资深的强迫症患者,这让我很是不爽. •解决方案 在桌面找到 Chrome 图标,右击选择[属性],在该位置添加如下语句 ...

  7. 多线程系列(十八) -AQS原理浅析

    一.摘要 在之前的文章中,我们介绍了 ReentrantLock.ReadWriteLock.CountDownLatch.CyclicBarrier.Semaphore.ThreadPoolExec ...

  8. input textarea 禁止输入 非数字，特别是中文字符，光标位置保持不变 - vue2

    input textarea 禁止输入 非数字,特别是中文字符,光标位置保持不变 思路:禁止输入 主要是用 keydown事件限制 不让输入即可,主要是输入中文的时候,之前没弄过. 禁止中文输入思路 ...

  9. npm-links - 查看项目依赖包 - vscode 插件

    npm-links 依赖包相关快捷链接

  10. idea branch 分支比较 | git 查看分支命令 `git branch -vv`

    git 查看分支命令 git branch -vv