<!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. HttpWebRequest使用时发生阻塞的解决办法

    HttpWebRequest使用如下: 第一种:使用Using 释放资源 /// <summary> /// Http Get请求返回数据 /// </summary> /// ...

  2. MySQL 5.6&5.7 性能优化 TOP10(转)

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/NLOneDay/article/deta ...

  3. pytorch torch.nn 实现上采样——nn.Upsample

    Vision layers 1)Upsample CLASS torch.nn.Upsample(size=None, scale_factor=None, mode='nearest', align ...

  4. ros 学习 array 的添加

    array的添加,使用 arry[i]赋值时会出现段错误,需要使用array.push_back添加到数据中,在ros中array数组是以vector方式存储的. 例如: 包含数组的msg定义为: h ...

  5. 增强篇1 PO保存增强

    公众号文章地址:https://mp.weixin.qq.com/s?__biz=Mzg4MzI1OTM0OA==&mid=2247484108&idx=7&sn=90e561 ...

  6. MongoDB学习笔记一：MongoDB基础

    目录 MongoDB是什么? 学了有什么用? MongoDB入门 安装 修改数据库位置 MongoDB的启动方式 MongoDB的图形化工具 MongoDB基本命令 增 查询 更新 删除 排序 投影 ...

  7. PhpStorm的主题和字体设置

    打开PhpStorm,点击File,然后点击Setting 然后 点击Apply,就可以看到主题变化的效果,其次就是来设置字体,先要选取一个样式,然后点击Save As ,然后命名,我选择的是最后一个 ...

  8. [ kvm ] 嵌套虚拟化

    1. 前言 在学习 kvm 的过程中,需要在虚拟机中再次开启虚拟机,这里就需要使用到嵌套虚拟化,做个记录吧. 2. 配置嵌套虚拟化 2.1 查看物理机是否支持嵌套虚拟化 cat /sys/module ...

  9. Python第一阶段01

    1.变量: name = "sisi" print(name) age = print(age) 2.常量: PIE = 3.1415926 3.注释: # password = ...

  10. 实验1 C 语言开发环境使用和数据类型、运算符、表达式

    # include <stdio.h> int main() { int x; printf("x:\n"); scanf("%d",&x) ...