<!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. 【转】adb server is out of date. killing完美解决

    今天,久未出现的著名的“adb server is out of date.  killing”又发生了,在此,将解决方法记下,以便日后查看. 1. 错误信息: C:\Users\lizy>ad ...

  2. 在Eclipse IDE进行Struts开发时提示错误：java.lang.ClassNotFoundException: org.apache.struts2.dispatcher.FilterDispatcher的解决办法

    If you have... included all necessary jars Configured build path correctly added them all in deploym ...

  3. JS构造函数中有return

    function foo(name) { this.name = name; return name } console.log(new foo('光何')) function bar(name) { ...

  4. shell编程系列18--文本处理三剑客之awk动作中的条件及if/while/do while/for循环语句

    shell编程系列18--文本处理三剑客之awk动作中的条件及if/while/do while/for循环语句条件语句 if(条件表达式) 动作1 else if(条件表达式) 动作2 else 动 ...

  5. Python3入门（十三）——常用内置模块之URL模块urlib

    见名知意,一系列用于URL的操作 当然了,主要是用于web爬虫等处理(发送Get/Post请求,处理响应等),暂不展开, 参考:https://www.liaoxuefeng.com/wiki/101 ...

  6. *438. Find All Anagrams in a String 找到字符串中所有字母异位词

    1. 原始题目 给定一个字符串 s 和一个非空字符串 p,找到 s 中所有是 p 的字母异位词的子串,返回这些子串的起始索引. 字符串只包含小写英文字母,并且字符串 s 和 p 的长度都不超过 201 ...

  7. （十三）class文件结构：常量池（转）

    Class类文件的结构 全局规范 1.任何一个Class文件都对应着唯一一个类或接口的定义信息,但反过来说,类或接口并不一定都得定义在文件里(譬如类或接口也可以通过类加载器直接生成).本章中,只是通俗 ...

  8. ASP.NET(C#)图片加文字、图片水印，神啊，看看吧

    ASP.NET(C#)图片加文字.图片水印 一.图片上加文字: //using System.Drawing; //using System.IO; //using System.Drawing.Im ...

  9. 时空卷积网络TCN

    1.写在前面 实验表明,RNN 在几乎所有的序列问题上都有良好表现,包括语音/文本识别.机器翻译.手写体识别.序列数据分析(预测)等. 在实际应用中,RNN 在内部设计上存在一个严重的问题:由于网络一 ...

  10. Winsock.简单TCP

    PS:vs2017 编译C++代码 支持 XP:项目属性-->链接器-->系统-->需要的最小版本--> 输入 "5.1" 1.ZC:测试:c向s 发送长度 ...