思路分析

  1. 通过 electron desktopCapturer 和 navigator 获取要进行录制的媒体源信息;
  2. 使用 MediaRecorder 对视频流进行录制;
  3. 将 MediaRecorder 保存到本地文件。

获取媒体源信息

  1. 获取摄像头和麦克源信息

    navigator.mediaDevices.enumerateDevices()
    .then(devices => devices.filter(d => d.kind === 'videoinput'))
    .then(devices => console.log(devices) // devices 为摄像头数组);
  2. 获取当前屏幕和应用窗口源信息

    desktopCapturer.getSources({ types: ['window', 'screen'] }, (error,  sources) => {
    if (error) throw error;
    console.log(sources); // sources 当前屏幕和应用窗口的数组
    });

使用 MediaRecorder 进行视频录制

首先根据选择的录制源是窗口还是摄像头以不同的方式获取视频流。

  1. 媒体源是摄像头

    let deviceId = ''; // 所选择的摄像头 deviceId
    let stream = navigator.mediaDevices.enumerateDevices()
    .then(device => device.find(d => d.kind === 'videoinput' && d.deviceId === deviceId))
    .then(video => navigator.mediaDevices.getUserMedia({ video }));
  2. 媒体源是屏幕或窗口

    let sourceId = ''; // 所选择的屏幕或窗口 sourceId
    let stream = navigator.mediaDevices.getUserMedia({
    audio: false,
    video: {
    mandatory: {
    chromeMediaSource: 'desktop',
    chromeMediaSourceId: sourceId,
    maxWidth: window.screen.width,
    maxHeight: window.screen.height,
    },
    },
    });
  3. 因为无法通过直接设置 audio: true 来获取音频,所以需要另外加入麦克风的音轨

    stream
    .then(Mediastream => {
    let audioTracks = await navigator.mediaDevices
    .getUserMedia({ audio: true, video: false })
    .then(mediaStream => mediaStream.getAudioTracks()[0]);
    stream.addTrack(audioTracks);
    createRecorder(stream); // createRecorder() 函数实现见下文
    })
    .catch(err => console.error('startRecord error', err));

将 MediaRecorder 保存至文件

  1. createRecorder() 函数初始化录制

    let recorder = null;
    
    function createRecorder(stream) {
    recorder = new MediaRecorder(stream);
    recorder.start();
    // 如果 start 没设置 timeslice,ondataavailable 在 stop 时会触发
    recorder.ondataavailable = event => {
    let blob = new Blob([event.data], {
    type: 'video/mp4',
    });
    saveMedia(blob);
    };
    recorder.onerror = err => {
    console.error(err);
    };
    },
  2. stopRecorder() 函数结束录制并保存至本地 mp4 文件

    function stopRecord() {
    recorder.stop();
    } function saveMedia() {
    let reader = new FileReader();
    reader.onload = () => {
    let buffer = new Buffer(reader.result);
    fs.writeFile('test.mp4', buffer, {}, (err, res) => {
    if (err) return console.error(err);
    });
    };
    reader.onerror = err => console.error(err);
    reader.readAsArrayBuffer(blob);
    }

以上,就顺利完成了使用 electron 录制视频功能,若有疑问可以加 qq (997494167) 进行交流。

Reference

  1. https://www.electronjs.org/docs/api/desktop-capturer
  2. https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder
  3. https://github.com/hokein/electron-screen-recorder

如何使用 electron 屏幕或摄像头录制并保存到本地的更多相关文章

  1. javaCV开发详解之2:推流器实现,推本地摄像头视频到流媒体服务器以及摄像头录制视频功能实现(基于javaCV-FFMPEG、javaCV-openCV)

    javaCV系列文章: javacv开发详解之1:调用本机摄像头视频 javaCV开发详解之2:推流器实现,推本地摄像头视频到流媒体服务器以及摄像头录制视频功能实现(基于javaCV-FFMPEG.j ...

  2. 把演讲人的桌面、头像、声音合成后推送到 指定的直播流平台上; 录制电脑桌面、摄像头头像、声音保存为本地视频; 适用于讲课老师、医生等演讲内容保存为视频; 提供PPT嵌入Winform/WPF解决方案,Winform/WPF 中嵌入 office ppt 解决方案

    提供PPT嵌入Winform/WPF解决方案,Winform/WPF 中嵌入 office ppt 解决方案 Winform/WPF 中嵌入 office ppt(powerpoint)解决方案示: ...

  3. openwrt挂载摄像头及视频保存

    一.编译选项的选择: -> Utilities ->usbutils (这个里面包含lsusb的命令,是查看你的摄像头型号的) -> Kernel modules -> I2C ...

  4. luvcview,使用mplayer查看摄像头和luvcview保存YUV图像视频的播放(转)

    luvcview,使用mplayer查看摄像头和luvcview保存YUV图像视频的播放 在mplayer中查看摄像头,可使用如下命令:mplayer tv:// -tv driver=v4l2:in ...

  5. Ubuntu10.04中利用V4L2读取摄像头数据并保存成文件【转】

    转自:http://blog.chinaunix.net/uid-29339876-id-4042245.html 利用V4L2读取UVC摄像头数据并保存成视频文件,主要参考http://linuxt ...

  6. [转]GStreamer资料(摄像头采集,视频保存,远程监控)DVR

    http://blog.csdn.net/wzwxiaozheng/archive/2010/12/26/6099397.aspx GStreamer资料整理(包括摄像头采集,视频保存,远程监控,流媒 ...

  7. OpenCV x64 vs2010 下打开摄像头录制视频写成avi(代码为转载)

    首先参照下面这里进行opencv x64位机器下面的配置 http://wiki.opencv.org.cn/index.php/VC_2010%E4%B8%8B%E5%AE%89%E8%A3%85O ...

  8. ffmpeg命令 从网络摄像头录制视频

    安装 sudo apt-get install ffmpeg 录制视频为record.mp4文件 ffmpeg -y -i rtsp://cameral_ip:port -vcodec copy -a ...

  9. 摄像头录制视频并且保存成mp4

    import cv2import numpy as npimport os cap = cv2.VideoCapture(1)#v4l2-ctl --list-devices 查看设备号,非正常中断时 ...

随机推荐

  1. c++背包问题

    又鸽了好久…… 前言 博主刚刚学会背包问题不久,然后有一段时间没练习了 今天就来重新温习一下,顺手就写了这一篇博客. 好了,下面进入正题! 算法简介 背包问题是动态规划的一个分支 主要是分成了01背包 ...

  2. 【Mood】八上期末考

    Final exam  Day -30 平姐在班会上突然就说了一句,离期末考只有一个月了. 刚从体育节的气氛中脱离出来的我想了想,好像还真的是诶. 又努力地去想了想,好像不太慌张呢. Final ex ...

  3. es6中的属性名表达式

    代码如下: 问题: 为什么我可以这样给obj1对象添加动态属性? 为什么我最终的结果是只添加了right属性? 解答: 1. 第一个问题解答如下: 我们知道在es5中给对象添加属性有两种方法,一种是通 ...

  4. 在服务器上保存图片没有权限该怎么办?Permission denied:xxxxxx

    用Flask框架,写了一个上传图片的接口,把这个Flask服务用nginx+uwsgi部署在了服务器上,保存图片至服务器指定目录,显示没有权限?? 一开始我以为是nginx或者uwsgi影响的(可能很 ...

  5. 分享一个基于Net Core 3.1开发的模块化的项目

    先简单介绍下项目(由于重新基于模块化设计了整个项目,所以目前整个项目功能不多) 1.Asp.Net Core 3.1.2+MSSQL2019(LINUX版) 2.中间件涉及Redis.RabbitMQ ...

  6. 论JS函数传参时:值传递与引用传递的区别

    什么是值传递:值传递是指在调用函数时将实际参数(实参)复制一份传递到函数中,这样在函数中如果对参数进行修改,将不会影响到实际参数. 值传递的总结:也就是说,将实参复制到函数中的这个过程叫值传递 什么是 ...

  7. 初探Linux

    这是一个小小新手根据自己对Linux的理解而写下的笔记,记录的是大体的学习内容.记录的笔记不全面,甚至没有整体的概念,但也希望能够给部分人一些入门的帮助,实机基于CentOS 7. 导语:学习一件新事 ...

  8. 遍历Map的四种方式(Java)

    public static void main(String[] args) { Map<String, String> map = new HashMap<String, Stri ...

  9. 在AX中解析多层的json信息

        str jsonstr ='{"FieldValues":[{"FieldName":"Field1","FieldVal ...

  10. flask 设置https请求 访问flask服务器

    学习过程中想要学教程中一样,做个假的微信公众号推送,不过去了微信开发文档怎么一直说需要https的请求(教学中没有说需要https,一直是http) 但是我的服务器只能使用http请求访问,如果硬是要 ...