用JS实现简单的屏幕录像机-德赢Vwin官网网

作者：京东保险张洁

本文将介绍如何用JS实现简单的屏幕录像机。

一、录制准备

创建一个按钮

Start recording< /button >

书写JavaScript

var RECORDING_ONGOING = false;
var recordingToggle = document.getElementById("recording-toggle"); // 按钮

recordingToggle.addEventListener("click", function(){
     RECORDING_ONGOING = !RECORDING_ONGOING; // 开始 / 停止 录制
     if(RECORDING_ONGOING){
         recordingToggle.innerHTML = "Stop Recording";
         startRecording(); // 开始录制
     } else {
         recordingToggle.innerHTML = "Start Recording";
         stopRecording(); // 停止录制
 }
});

看起来内容很多，但实际上，只是向按钮添加一个事件侦听器来开始和停止记录并相应地更改文本。

二、开始录制

在写功能函数之前，声明 3 个全局变量（在函数之外）。

var blob, mediaRecorder = null;
var chunks = [];

现在，开始屏幕录制

async function startRecording(){
     var stream = await navigator.mediaDevices.getDisplayMedia(
         {video: {mediaSource: "screen"}, audio: true}
     );

     deviceRecorder = new deviceRecorder(stream, {mimeType: "video/webm"});
}

在用户屏幕之外创建媒体流。媒体记录器有一个mimeType. 这是你想要的输出文件类型。

可以mimeTypes 在此处阅读更多相关信息。

Edge 支持video/webmmime 类型。这是文件扩展名.webm。可以通过以下方式检查浏览器是否支持mimeType：

console.log(MediaRecorder.isTypeSupported("video/webm"))
console.log(MediaRecorder.isTypeSupported("video/mp4"))
console.log(MediaRecorder.isTypeSupported("video/mp4;codecs=avc1"))

向该函数添加几行startRecording

 deviceRecorder.ondataavailable = (e) => {
     if(e.data.size > 0){
         chunks.push(e.data);
     }
 }
 deviceRecorder.onstop = () => {
     chunks = [];
 }
 deviceRecorder.start(250)

每当有数据时，都会将其添加到块数组（之前定义）中。当停止录制时，将调用该stopRecording() 函数。

三、停止录制

function stopRecording(){
     var filename = window.prompt("File name", "video"); // Ask the file name

     deviceRecorder.stop(); // 停止录制
     blob = new Blob(chunks, {type: "video/webm"})
     chunks = [] // 重置数据块
     var dataDownloadUrl = URL.createObjectURL(blob);

     // 将其下载到用户的设备上
     let a = document.createElement('a')
     a.href = dataDownloadUrl;
     a.download = `${filename}.webm`
     a.click()
 
     URL.revokeObjectURL(dataDownloadUrl)
}

用JS做录屏就是这么简单。如果你想要 mp4 或其他格式，则必须使用 API 进行转换或自己进行转换。

浏览器会通知是否正在共享屏幕

审核编辑黄宇

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表德赢Vwin官网网立场。文章及其配图仅供工程师学习之用，如有内容侵权或者其他违规问题，请联系本站处理。举报投诉

录像机

录像机

+关注

关注
1

文章
89

浏览量
27846
JS

JS

+关注

关注
0

文章
78

浏览量
18096

AWTK-WEB 快速入门(2) - JS 应用程序

导读AWTK可以使用相同的技术栈开发各种平台的应用程序。有时我们需要使用Web界面与设备进行交互，本文介绍一下如何使用JS语言开发AWTK-WEB应用程序。用AWTKDesigner新建一个应用程序先安装AWTKDesigner：

发表于 12-05 01:04 •86次阅读

AWTK-WEB 快速入门(2) - <b class='flag-5'>JS</b> 应用程序

Node.js小科普和Node.js安装常见管理工具

Node.js是一个JavaScript的运行环境，用来执行JavaScript代码。为什么会出现这么一个运行环境呢，从JavaScript研发初衷可以看出它是为了运行在浏览器中的，让网页交互更加

发表于 11-23 15:37 •100次阅读

Node.<b class='flag-5'>js</b>小科普和Node.<b class='flag-5'>js</b>安装常见管理工具

aic3104 adc录像白躁音很大怎么解决？

aic3104adc 录像白躁音很大用adc 高通滤波有效吗用示波器量过时钟 mclk 12.288 mhz;wclk 48000 khz ;bclk1.536mhz adc 增益调小采集的声音也会变小请问 aic310

发表于 10-16 06:11

鸿蒙跨端实践-JS虚拟机架构实现

类似的框架，我们需要自行实现以确保核心基础能力的完整。鸿蒙虚拟机的开发经历了从最初 ArkTs2V8 到 JSVM + Roma新架构方案。在此过程中，我们实现了完整的鸿蒙版的“J2V8”和基于系统JSVM的

发表于 09-30 14:42 •2400次阅读

鸿蒙跨端实践-<b class='flag-5'>JS</b>虚拟机架构<b class='flag-5'>实现</b>

聚徽-影响 LED 屏幕清晰度的因素有哪些

，‌LED 屏幕可以显示文字、‌ 图形、‌ 图像、‌ 动画、‌ 行情、‌ 视频、‌ 录像信号等各种信息。‌ 影响 LED 屏幕清晰度的因素主要包括以下几点：‌

发表于 09-23 09:59 •236次阅读

推荐一个支持js的嵌入式设备开发平台

可以通过vscode开发js，实时推送js代码到设备里运行，无需编译，支持屏幕，感兴趣的可以看看 https://github.com/duoxianwulian/dxdop 提供很多js

发表于 09-04 14:04

公交车安全与监控：车载监控的应用与发展

车载录像机可以把图像记录和保存下来的人类科技发展的产物；安防行业升华了这一项功能的含义，用在了安全防范中视频记录保存，把监控摄像机接受的视频完好的保存下来，方便查阅，调用；车载录像机的性质也是如此

发表于 08-05 10:17 •408次阅读

可编程振荡器替换SiTime应用于NVR（网络视频录像机）

可编程振荡器替换SiTime应用于NVR（网络视频录像机）

发表于 06-24 09:51 •278次阅读

车载硬盘录像机：移动监控的新里程碑

车载硬盘录像机的出现，不仅代表了安防科技在移动监控领域的最新成果，也预示着移动监控将朝着更加智能化、网络化、定制化的方向发展。随着技术的不断进步和应用领域的不断拓展，车载硬盘录像机必将在未来的移动监控领域发挥更加重要的作用。

发表于 04-29 17:11 •560次阅读

请问大伙labview调用海康录像机无法回放的问题

我调用了海康的库函数，运行起来没报错，返回值是0，但是无法正常显示回放画面

发表于 04-22 20:28

浅谈S-VIDEO接口静电浪涌防护

浅谈S-VIDEO接口静电浪涌防护S-Video接口曾经在一些旧款的电视机、录像机、游戏机等设备上广泛应用，用于传输视频信号。不过，随着技术的发展，S-Video接口已经逐渐被其他更先进的接口所取

发表于 03-07 08:02 •695次阅读

浅谈S-VIDEO接口静电浪涌防护

S-Video 接口曾经在一些旧款的电视机、录像机、游戏机等设备上广泛应用，用于传输视频信号。不过，随着技术的发展，S-Video 接口已经逐渐被其他更先进的接口所取代，比如 HDMI、DVI 等

发表于 03-03 17:03 •571次阅读

CYUSB3065通过DMA的方式来上传录像到电脑，请问如何暂停和启动录像？

我用的是 CYUSB3065，然后通过DMA的方式来上传录像到电脑，请问如何暂停和启动录像？

发表于 02-29 06:35

【鸿蒙】NAPI 框架生成工具实现流程

开发者无需关注 Nodejs 语法、C++ 与 JS 之间的数据类型转换等上层应用转换逻辑，只关注底层业务逻辑即可。那他的实现过程，以及在实际开发中该如何使用呢？为此分析了下代码，分解其过程如下。 1.

发表于 02-28 17:00 •683次阅读

监控录像机和交换机的作用区别

监控录像机和交换机是现代安防系统中的核心设备，它们在维护公共秩序、保护人们财产安全、预防犯罪等方面发挥着重要作用。尽管这两种设备都在安防系统中扮演着重要角色，但它们的作用和功能却有很大的不同。在本文

发表于 02-22 10:19 •4754次阅读