linux 摄像头采集图像 mplayer,如何使用 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

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

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

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 ...

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

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

Mac录制或保存视频后如何放大？

想要在录制和拍摄视频后在喜欢的场景(例如Mark)中放大视频吗?本文将向您展示如何放大视频并通过裁剪视频和“平移和缩放”效果来制作Ken Burns效果.Filmora9是一款功能强大的视频编辑器,具 ...

随机推荐

.Net开发笔记(二十一) 反射在.net中的应用

反射概念在网上到处都有,但是讲到的具体的应用很少,一个重要的原因是现实中真的很少用得到它.引用msdn上对“反射”的解释: "通过 System.Reflection 命名空间中的类以及 S ...

C++11 并发指南三(Lock 详解)

在 一文中我们主要介绍了 C++11 标准中的互斥量(Mutex),并简单介绍了一下两种锁类型.本节将详细介绍一下 C++11 标准 ...

[51单片机] SPI nRF24L01无线 [可以放在2个单片机里实现通信]

main.c #include #include"2401.h" #define uint unsigned int #define uchar un ...

datatable把一个LIst的数据放入两个colum防止窜行的做法

DataColumn objectOne = new DataColumn("objectOne", typeof(object)); dt.Columns.Add(objectO ...

DzzOffice管理员登陆方法和管理员应用介绍

DzzOffice的管理方式类似于windows的管理方式,是直接在桌面中,通过管理员应用进行系统中的所有管理里工作. 1.访问http://www.domain.com (你站点的访问地址) 2.点 ...

C# 使用Tuple传递多个参数

Tuple是基于.NET Framework 4.0 及以上版本才有的.微软称它为元组,如果有三个参数那就是三元组.如 Tuple(T1, T2, T3) Tuple的命名空间在 System 很短吧 ...

ubuntu google chrome 全屏显示命令

全屏模式:kiosk默认全屏打开一个网页呢,只需要在快捷方式中加上 --kiosk [url] 就可以了.终端命令行打开: google-chrome --kiosk www.baidu.com 参考 ...

[C++]动态规划系列之Warshall算法

/** * * @author Zen Johnny * @date 2018年3月31日 下午8:13:09 * */ package freeTest; /* [动态规划系列:Warshall算法 ...

Wireshark抓包实例诊断TCP连接问题

转载请在文首保留原文出处:EMC中文支持论坛https://community.emc.com/go/chinese  介绍 前文论述了TCP基础知识,从本节开始,通过TCP抓包实例来诊断TCP常见问 ...