欢迎光临散文网 会员登陆 & 注册

electron16.0.5+vue实现电脑选择区域录制视频(01)

2022-01-13 18:00 作者:布依前端  | 我要投稿


electron跨平台构建桌面应用框架

electron是一个跨端构建桌面应用的框架,利用electron实现录制指定区域视频并保存到本地,读取视频目录到播放列表并实现播放视频的功能。

功能需求:

  1. electron实现电脑系统录屏和指定区域录屏功能;

  2. 利用node保存视频到本地文件目录功能;

  3. 利用node读取本地视频到播放列表;

  4. electron实现视频播放和删除本地视频功能;

  5. electron实现录时选择区域预览视频功能;

  6. 实现录制流程,包括:开始录制,暂停录制,恢复录制,结束录制的功能;

  7. electron实现打开视频并播放的功能;

  8. electron实现录制视频前选择本地保存视频目录的功能。

备注:本篇文章主要介绍electron录制视频实现,其他部分会陆续更新。

最终效果图:

electron录制页面基础版

软件版本:

  •  "electron": "^16.0.5"

  • "@electron/remote": "^2.0.1"

  • "fix-webm-metainfo": "^1.0.6"

  • "vue-cli-plugin-electron-builder": "~2.1.1"

  • "view-design": "^4.7.0"

  •  "vue": "^2.6.11"

  • "node-sass": "^6.0.1"

  • "sass-loader": "^10.2.0"

实现思路:

利用electron的desktopCapturer模块和navigator.mediaDevices.getUserMedia获取视频源列表,获得想要录制的区域,获取音频用navigator.mediaDevices.getDisplayMedia,将音频流加到视频流里合并,之后用新建对象 MediaRecorder  对音视频流进行录制,录制好的视频会出现没有视频时长和时间线不能拖拽问题这两个问题,这是MediaRecorder API设计的缺陷,官方也没有给出明确解决方式,鼓励开发者到其他社区寻求答案。后面会给出解决方案。

1、获取视频流

2、获取音频流

这里获取音频流建议使用异步方法,这样能准确获取到设备的音频。

3、获取视频流异常

4、开始录制

重要:解决视频没有时长和时间线拖拽不生效问题

this.recorder.onstop录制结束这里,如果不做修复处理,录制出来的视频没有视频时长和时间线拖拽不了的问题,视频录制没有声音是因为使用new MediaRecorder录屏API所致,查找很多资料,官方给出了明确解释,该API录制视频时没有处理录制视频时间和时间线拖拽问题,并鼓励开发者到其他社区寻求解决之法。解决:用到了fixWebmMetaInfo()对视频流进行处理的,这个方法需要到npm官方搜索fix-webm-metainfo并安装到项目即可。

安装方式:

在需要用的地方导入,然后就可以使用了

官方给出使用示例:

5、保存视频方法

时间戳数字方法,全局注入绑定vue的main.js中


electron16.0.5+vue实现电脑选择区域录制视频(01)的评论 (共 条)

分享到微博请遵守国家法律