如何使用 electron 屏幕或摄像头录制并保存到本地
思路分析
- 通过 electron desktopCapturer 和 navigator 获取要进行录制的媒体源信息;
- 使用 MediaRecorder 对视频流进行录制;
- 将 MediaRecorder 保存到本地文件。
获取媒体源信息
获取摄像头和麦克源信息
navigator.mediaDevices.enumerateDevices()
.then(devices => devices.filter(d => d.kind === 'videoinput'))
.then(devices => console.log(devices) // devices 为摄像头数组);
获取当前屏幕和应用窗口源信息
desktopCapturer.getSources({ types: ['window', 'screen'] }, (error, sources) => {
if (error) throw error;
console.log(sources); // sources 当前屏幕和应用窗口的数组
});
使用 MediaRecorder 进行视频录制
首先根据选择的录制源是窗口还是摄像头以不同的方式获取视频流。
媒体源是摄像头
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 }));
媒体源是屏幕或窗口
let sourceId = ''; // 所选择的屏幕或窗口 sourceId
let stream = navigator.mediaDevices.getUserMedia({
audio: false,
video: {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: sourceId,
maxWidth: window.screen.width,
maxHeight: window.screen.height,
},
},
});
因为无法通过直接设置 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 保存至文件
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);
};
},
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
- https://www.electronjs.org/docs/api/desktop-capturer
- https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder
- https://github.com/hokein/electron-screen-recorder
如何使用 electron 屏幕或摄像头录制并保存到本地的更多相关文章
- javaCV开发详解之2:推流器实现,推本地摄像头视频到流媒体服务器以及摄像头录制视频功能实现(基于javaCV-FFMPEG、javaCV-openCV)
javaCV系列文章: javacv开发详解之1:调用本机摄像头视频 javaCV开发详解之2:推流器实现,推本地摄像头视频到流媒体服务器以及摄像头录制视频功能实现(基于javaCV-FFMPEG.j ...
- 把演讲人的桌面、头像、声音合成后推送到 指定的直播流平台上; 录制电脑桌面、摄像头头像、声音保存为本地视频; 适用于讲课老师、医生等演讲内容保存为视频; 提供PPT嵌入Winform/WPF解决方案,Winform/WPF 中嵌入 office ppt 解决方案
提供PPT嵌入Winform/WPF解决方案,Winform/WPF 中嵌入 office ppt 解决方案 Winform/WPF 中嵌入 office ppt(powerpoint)解决方案示: ...
- openwrt挂载摄像头及视频保存
一.编译选项的选择: -> Utilities ->usbutils (这个里面包含lsusb的命令,是查看你的摄像头型号的) -> Kernel modules -> I2C ...
- luvcview,使用mplayer查看摄像头和luvcview保存YUV图像视频的播放(转)
luvcview,使用mplayer查看摄像头和luvcview保存YUV图像视频的播放 在mplayer中查看摄像头,可使用如下命令:mplayer tv:// -tv driver=v4l2:in ...
- Ubuntu10.04中利用V4L2读取摄像头数据并保存成文件【转】
转自:http://blog.chinaunix.net/uid-29339876-id-4042245.html 利用V4L2读取UVC摄像头数据并保存成视频文件,主要参考http://linuxt ...
- [转]GStreamer资料(摄像头采集,视频保存,远程监控)DVR
http://blog.csdn.net/wzwxiaozheng/archive/2010/12/26/6099397.aspx GStreamer资料整理(包括摄像头采集,视频保存,远程监控,流媒 ...
- OpenCV x64 vs2010 下打开摄像头录制视频写成avi(代码为转载)
首先参照下面这里进行opencv x64位机器下面的配置 http://wiki.opencv.org.cn/index.php/VC_2010%E4%B8%8B%E5%AE%89%E8%A3%85O ...
- ffmpeg命令 从网络摄像头录制视频
安装 sudo apt-get install ffmpeg 录制视频为record.mp4文件 ffmpeg -y -i rtsp://cameral_ip:port -vcodec copy -a ...
- 摄像头录制视频并且保存成mp4
import cv2import numpy as npimport os cap = cv2.VideoCapture(1)#v4l2-ctl --list-devices 查看设备号,非正常中断时 ...
随机推荐
- 用新架构适配MI3中遇到的各种坑
用新架构适配MI3中遇到的各种坑 首先不得不说hendy架构的强大之处, mi3也直接开机但是遇到各种坑,不能怪架构不够强大,只有说miui定制化太高.下面详细说一下mi3适配中的各种坑.有些坑会附带 ...
- PS4游戏将登陆PC:一曲属于主机的悲歌
曾经,红白机.PS游戏机等成为一代人难以磨灭的记忆.而随后的索尼PS3.微软Xbox 360.任天堂Wii U等,也称霸了次时代主机时代,成为家庭娱乐的中心.但面对着依托于PC和智能移动终端 ...
- [续更]一起来撸一下Flex布局里面的那些属性
Flex的全称是Flexible Box,意为弹性布局,用来为盒模型提供最大的灵活性. Flex包含的属性有很多,每个属性又包含了许多不同意义的属性值···然而在实际开发中,能被我们临幸的可能也只是那 ...
- 趣谈编程史第3期-大器晚成的新晋流量Python发展史
写在前面 这篇博文主要介绍javaScript的发展史,根据作者在B站发布的同名视频的文案整理修改而成,对视频感兴趣的博友可访问https://www.bilibili.com/video/av860 ...
- python之迭代器 生成器 枚举 常用内置函数 递归
迭代器 迭代器对象:有__next__()方法的对象是迭代器对象,迭代器对象依赖__next__()方法进行依次取值 with open('text.txt','rb',) as f: res = f ...
- 第八次——非确定的自动机NFA确定化为DFA
NFA 确定化为 DFA 子集法: f(q,a)={q1,q2,…,qn},状态集的子集 将{q1,q2,…,qn}看做一个状态A,去记录NFA读入输入符号之后可能达到的所有状态的集合. 步骤: 1. ...
- CVE-2020-1947 Sharding-UI的反序列化复现及分析
CVE-2020-1947 复现及分析 0x01 影响 Apache ShardingSphere < =4.0.0 0x02 环境搭建 incubator-shardingsphere 的ui ...
- 必备技能六、Vue中实现全局方法
现实背景:很多时候我们会在全局调用一些方法. 实现方式两种:官网的实现use方法,然后你也可以用野路子直接在Vue.prototype上面定义. 先说野路子,因为其实野路子就是最根本的实现方式,官方的 ...
- 聊聊CAS - 面试官最喜欢问的并发编程专题
什么是CAS 学习Java并发编程,CAS(Compare And Set)机制都是一个不得不掌握的知识点.除了通过synchronized进行并发控制外,还可以通过CAS的方式控制,大家熟悉的Ree ...
- 【colab pytorch】使用tensorboard可视化
import datetime import torch import torch.nn as nn import torch.nn.functional as F import torch.opti ...