<!DOCTYPE html>

<html lang="zh-CN">

<head>

	<meta charset="utf-8">

      <title>在线屏幕录制</title>

      <style>

        body{

          font-family: Arial;

          margin: 4vh auto;

          width: 90vw;

          max-width: 600px;

          text-align: center;

        }

        #controls{

          text-align: center;

        }

        .btn{

          margin: 10px 5px;

          padding: 15px;

          background-color: #2bcbba;

          border: none;

          color: white;

          font-weight: bold;

          border-radius: 6px;

          outline: none;

          font-size: 1.2em;

          width: 120px;

          height: 50px;

        }

        .btn:hover{

          background-color: #26de81;

          cursor: hand;

        }

        .btn:disabled{

          background-color: #2bcbba80;

        }

        #stop{

          background-color: #fc5c65;

        }

        #video{

          margin-top: 10px;

          margin-bottom: 20px;

          border: 12px solid #a5adb0 ;

          border-radius: 15px;

          outline: none;

          width: 100%;

          height: 400px;

          background-color: black;

        }

        h1{

          color: #2bcbba;

          letter-spacing:-2.5px;

          line-height: 30px;

        }

        .created{

          color: lightgrey;

          letter-spacing: -0.7px;

          font-size: 1em;

          margin-top: 40px;

        }

        .created > a{

          color: #4b7bec;

          text-decoration: none;

        }

      </style>

    </head>

    <body>

      <h1><u style='color:#fc5c65'>在线屏幕录制</u><br>支持 :新版本 Chrome,Edge,Firefox 桌面浏览器  <br></h1>

      <video autoplay='true' id='video' controls='true' controlsList='nodownload'></video>

      <button class='btn' id='record' onclick='record()'>录制</button>

      <button style='display: none' class='btn' id='stop' onclick='stop()'>停止</button>

      <button disabled='true' class='btn' id='download' onclick='download()'>下载</button>

      <div class='created'>  </div>

    </body>

    <script>

      const video = document.getElementById('video')

      const downloadBtn = document.getElementById('download')

      const recordBtn = document.getElementById('record')

      const stopBtn = document.getElementById('stop')

      let recorder

      async function record() {

		  // 开始录屏

        let captureStream

        try{

          captureStream = await navigator.mediaDevices.getDisplayMedia({

            video: true,

            // audio: true,   not support

            cursor: 'always'

          })

        }catch(e){

			// 取消录屏或者报错

          alert("Could not get stream")

          return

        }

        downloadBtn.disabled = true

        recordBtn.style = 'display: none'

        stopBtn.style = 'display: inline'

		// 删除之前的 Blob

        window.URL.revokeObjectURL(video.src)

        video.autoplay = true

		// 实时的播放录屏

        video.srcObject = captureStream

		// new 一个媒体记录

        recorder = new MediaRecorder(captureStream)

        recorder.start()

        captureStream.getVideoTracks()[0].onended = () => {

			// 录屏结束完成

          recorder.stop()

        }

        recorder.addEventListener("dataavailable", event => {

			// 录屏结束，并且数据可用

			console.log("dataavailable------------")

          let videoUrl = URL.createObjectURL(event.data, {type: 'video/ogg'})

          video.srcObject = null

          video.src = videoUrl

          video.autoplay = false

          downloadBtn.disabled = false

          recordBtn.style = 'display: inline'

          stopBtn.style = 'display: none'

        })

      }

      function download(){

		  // 下载

        const url = video.src

        const name = new Date().toISOString().slice(0, 19).replace('T',' ').replace(" ","_").replace(/:/g,"-")

        const a = document.createElement('a')

        a.style = 'display: none'

        a.download = `${name}.ogg`

        a.href = url

        document.body.appendChild(a)

        a.click()

      }

      function stop(){

        let tracks = video.srcObject.getTracks()

        tracks.forEach(track => track.stop())

        recorder.stop()

      }

    </script>

  </html>

　　

原生 js 录屏功能的更多相关文章

  1. 简析hotjar录屏功能实现原理

    简析hotjar录屏功能实现原理 众所周知,hotjar中录屏功能是其重要的一个卖点,看着很牛X酷炫的样子,今天就简单的分析一下其可能实现(这里只根据其请求加上个人理解分析,并不代表hotjar中真实 ...

  2. iOS的录屏功能

    iOS的录屏功能其实没什么好说的,因为网上的教程很多,但是网上的Demo无一例外几乎都有一个bug,那就是iPad上会出现闪退,这也体现了国内的教程文档的一个特点,就是抄袭,教程几乎千篇一律,bug也 ...

  3. 【转载】华为荣耀V9的手机录屏功能如何开启

    手机录屏有时候对我们的帮助很大,例如可以录制相应的APP使用教程.微信小程序使用流量讲解视频等,针对于软件开发人员等来说,手机录屏功能针对功能演示视频非常的有帮助.在华为荣耀V9手机中,进行手机录屏有 ...

  4. Chrome71版本使用screenfull.js全屏功能时报参数错误

    在生产环境长期使用的一个“全屏”功能突然失效了,查看Console 如下报错: Failed to execute 'requestFullscreen' on 'Element': paramete ...

  5. 原生js实现分页功能

    原生就是实现分页功能 代码如下: var pagination = function(option,fun){ this.parentId = option.id; //容器 this.pageSiz ...

  6. 使用原生js实现选项卡功能实例教程

    选项卡是前端常见的基本功能,它是用多个标签页来区分不同内容,通过选择标签快速切换内容.学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础. 先来完成html部分 ...

  7. 原生js拖拽功能制作滑动条实例教程

    拖拽属于前端常见的功能,很多效果都会用到js的拖拽功能.滑动条的核心功能也就是使用js拖拽滑块来修改位置.一个完整的滑动条包括 滑动条.滑动痕迹.滑块.文本 等元素,先把html代码写出来,如下所示: ...

  8. 原生JS实现购物车功能

    html <div class="catbox"> <table id="cartTable"> <thead> <t ...

  9. QT+OPENCV实现录屏功能

    本文使用QT+opencv来实现对指定窗体画面录制,并保存为avi文件. (1)获取窗体界面 QScreen类有一个grabWindow函数,可以用来获取窗体的画面,这个函数使用很简单,就是传入窗体句 ...

随机推荐

  1. https://lug.ustc.edu.cn/wiki/user/boj/linkers-and-loaders

    https://lug.ustc.edu.cn/wiki/user/boj/linkers-and-loaders   程序员的自我修养——链接.装载与库

  2. SpringBoot整合Hibernate

    编写配置文件 <!--配置读取properties文件--> <context:property-placeholder location="classpath:jdbc. ...

  3. Js/jQuery实时监听input输入框值变化

    前言在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满 ...

  4. 【插件式框架探索系列】使用多UI线程提升性能

    了解WPF线程模型的都知道,UI线程负责呈现和管理UI,而UI元素(派生自 DispatcherObject)只能由创建该元素的线程来访问,这就导致了一些耗时的UI操作将影 响到整个应用程序性能,未响 ...

  5. rs-enumerate-devices data

    realsense rs2::context ctx; auto devicelist = ctx.query_devices(); if (devicelist.size() > 0) { r ...

  6. 泡泡一分钟：FMD Stereo SLAM: Fusing MVG and Direct Formulation Towards Accurate and Fast Stereo SLAM

    FMD Stereo SLAM: Fusing MVG and Direct Formulation Towards Accurate and Fast Stereo SLAM FMD Stereo ...

  7. 基于Source Insight_Scan的C/C++静态代码检查工具安装说明

    基于Source Insight_Scan的C/C++静态代码检查工具安装说明   本文链接:https://blog.csdn.net/M19930517/article/details/79977 ...

  8. Qt编写自定义控件71-圆弧进度条

    一.前言 现在web形式的图表框架非常流行,国产代表就是echart,本人用过几次,三个字屌爆了来形容,非常强大,而且易用性也非常棒,还是开源免费的,使用起来不要太爽,内置的各种图表和仪表盘等非常丰富 ...

  9. intellij 插件的使用

    目录 intellij 插件的使用 插件的设置 插件推荐 @(目录) intellij 插件的使用 插件的设置 在 IntelliJ IDEA 的安装讲解中我们其实已经知道,IntelliJ IDEA ...

  10. gen语言

    概率编程语言(PPL)领域正经历着机器学习技术快速发展带来的奇迹般的复兴.在短短的几年里,PPL 已经从一个模糊的统计研究领域发展出十几个活跃的开源方案.最近,麻省理工学院(MIT)的研究人员推出了一 ...