0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看威廉希尔官方网站 视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

用JS实现简单的屏幕录像机

京东云 来源:京东保险 张洁 作者:京东保险 张洁 2024-10-09 15:27 次阅读

作者:京东保险 张洁

本文将介绍如何用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 进行转换或自己进行转换。

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

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 录像机
    +关注

    关注

    1

    文章

    89

    浏览量

    27854
  • JS
    JS
    +关注

    关注

    0

    文章

    78

    浏览量

    18099
收藏 人收藏

    评论

    相关推荐

    一款支持USB摄像头输入录像的高清录播

    春源丽影4KR-05高清录像机,不仅支持HDMI输入进行4K高清录制,还支持USB高清摄像头输入录制!不仅可以录制4K高清音视频,还可以一键切为单独录音,可以录制无损MP3音频。支持一键录制、暂停
    的头像 发表于 12-24 16:01 100次阅读
    一款支持USB摄像头输入<b class='flag-5'>录像</b>的高清录播<b class='flag-5'>机</b>

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

    导读AWTK可以使用相同的威廉希尔官方网站 栈开发各种平台的应用程序。有时我们需要使用Web界面与设备进行交互,本文介绍一下如何使用JS语言开发AWTK-WEB应用程序。AWTKDesigner新建一个应用程序先安装AWTKDesigner:
    的头像 发表于 12-05 01:04 101次阅读
    AWTK-WEB 快速入门(2) - <b class='flag-5'>JS</b> 应用程序

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

    Node.js是一个JavaScript的运行环境,用来执行JavaScript代码。 为什么会出现这么一个运行环境呢,从JavaScript研发初衷可以看出它是为了运行在浏览器中的,让网页交互更加
    的头像 发表于 11-23 15:37 109次阅读
    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 2408次阅读
    鸿蒙跨端实践-<b class='flag-5'>JS</b>虚拟机架构<b class='flag-5'>实现</b>

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

    ,‌LED 屏幕可以显示文字、‌ 图形、‌ 图像、‌ 动画、‌ 行情、‌ 视频、‌ 录像信号等各种信息。‌ 影响 LED 屏幕清晰度的因素主要包括以下几点:‌
    的头像 发表于 09-23 09:59 243次阅读

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

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

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

    车载录像机可以把图像记录和保存下来的人类科技发展的产物;安防行业升华了这一项功能的含义,用在了安全防范中视频记录保存,把监控摄像接受的视频完好的保存下来,方便查阅,调用;车载录像机的性质也是如此
    的头像 发表于 08-05 10:17 412次阅读

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

    可编程振荡器替换SiTime应用于NVR(网络视频录像机
    的头像 发表于 06-24 09:51 284次阅读
    可编程振荡器替换SiTime应用于NVR(网络视频<b class='flag-5'>录像机</b>)

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

    车载硬盘录像机的出现,不仅代表了安防科技在移动监控领域的最新成果,也预示着移动监控将朝着更加智能化、网络化、定制化的方向发展。随着威廉希尔官方网站 的不断进步和应用领域的不断拓展,车载硬盘录像机必将在未来的移动监控领域发挥更加重要的作用。
    的头像 发表于 04-29 17:11 568次阅读
    车载硬盘<b class='flag-5'>录像机</b>:移动监控的新里程碑

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

    我调用了海康的库函数,运行起来没报错,返回值是0,但是无法正常显示回放画面
    发表于 04-22 20:28

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

    浅谈S-VIDEO接口静电浪涌防护S-Video接口曾经在一些旧款的电视录像机、游戏等设备上广泛应用,用于传输视频信号。不过,随着威廉希尔官方网站 的发展,S-Video接口已经逐渐被其他更先进的接口所取
    的头像 发表于 03-07 08:02 703次阅读
    浅谈S-VIDEO接口静电浪涌防护

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

    S-Video 接口曾经在一些旧款的电视录像机、游戏等设备上广泛应用,用于传输视频信号。不过,随着威廉希尔官方网站 的发展,S-Video 接口已经逐渐被其他更先进的接口所取代,比如 HDMI、DVI 等
    的头像 发表于 03-03 17:03 577次阅读
    浅谈S-VIDEO接口静电浪涌防护

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

    的是 CYUSB3065,然后通过DMA的方式来上传录像到电脑,请问如何暂停和启动录像
    发表于 02-29 06:35

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

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