一、在线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. SpringBoot+Shiro+LayUI权限管理系统项目-8.实现日志管理

    1.说明 基于注解和AOP实现的日志管理.只讲解关键部分,详细看源码,文章下方捐赠或QQ联系捐赠获取. 2.功能展示 包括日志搜索.查看详情和批量删除. 3.业务模型 @Data @TableName ...

  2. jsp中无法识别EL表达式问题

    今天在开发系统时需要在JSP中遍历List<javabean>,其中用到了EL表达式:${item.value} 页面死活不出数据,只显示表达式本身:${item.value}. 页面代码 ...

  3. python第一章pta习题总结

    chapter 1 一.选择判断部分 1.高级语言程序要被机器执行,只有用解释器来解释执行.(F) 计算机高级语言按程序的执行方式可以分为编译型和解释型两种. 执行方式 跨平台 特点 缺点 代表语言 ...

  4. [BUUCTF][Web][极客大挑战 2019]EasySQL 1

    打开靶机对应的url 界面显示需要输入账号和密码 分别在两个输入框尝试加单引号尝试是否有sql注入的可能,比如 123' 发现两个框可以注入,因为报了个错误信息 You have an error i ...

  5. FastGateway 发布v0.0.0.5

    FastGateway 发布v0.0.0.5 修复构建错误 修复docker-compose执行目录 修改请求来源分析数据列表展示 update README.md. 增加默认证书 修复构建脚本目录错 ...

  6. 【八股cover#1】MySQL Q&A与知识点

    MySQL Q&A与知识点 1.基础知识 什么是主键? 它用来唯一标识一条记录(一个字段).每个表都必须有且只能有一个主键,主键的取值不允许为空,而且在表中必须是唯一的(当然还可以有复合主键) ...

  7. 【算法day4】堆结构、堆排序、比较器以及桶排

    堆与堆结构(优先级队列结构) 知识点: 堆结构就是用数组实现的完全二叉树结构 完全二叉树中如果每棵子树的最大值都在顶部就是大根堆 完全二叉树中如果每棵子树的最小值都在顶部就是小根堆 堆结构的heapl ...

  8. Unity3D常用方法

    1.StartCoroutine(Thread1()) 启动协程运行Thread1()方法. 注意是协程,不是线程,详情见:https://www.jianshu.com/p/6d923cb0c900 ...

  9. 【Azure 环境】如果Azure中的某一个资源被删除后是否可以查看到删除的记录呢？如Resource Group

    问题描述 当一个资源从Azure中删除后,是否有地方可以查看到这些操作的记录呢?如操作人,操作时间等. 问题解答 可以的.通过 Azure订阅页面的活动日志,可以查看所有对订阅下资源的操作记录,包含D ...

  10. Java 接口的使用

    1 package com.bytezreo.interfacetest; 2 3 /** 4 * 5 * @Description 接口的使用 6 * @author Bytezero·zhengl ...