Electron应用中实现调用外接摄像头并拍照上传

最新推荐文章于 2024-08-14 23:16:36 发布

大转转FE

最新推荐文章于 2024-08-14 23:16:36 发布

阅读量662

点赞数

文章标签： electron javascript 前端 ecmascript 前端框架

本文链接：https://blog.csdn.net/P6P7qsW6ua47A2Sb/article/details/129210752

版权

本文详细介绍了如何在Electron应用中实现调用外接摄像头进行实时视频采集，拍照生成图片，并上传至CDN。首先，通过navigator.mediaDevices.getUserMedia获取摄像头视频流并在video标签中展示。接着，利用canvas捕获视频帧并保存为图片。然后，通过canvas.toBlob或toDataURL方法生成图片数据，上传至CDN获取链接。最后，将图片链接发送至后端进行处理。整个过程充分利用了Electron对Web标准的良好支持。

摘要由CSDN通过智能技术生成

背景

基于Electron实现的pc端智能验机应用，近期迭代了一个新的功能，需求是通过电脑外接摄像头对手机屏幕进行拍照，拍照后需将照片上传至服务端进行屏幕信息比对，确定被检测屏幕是否为原厂屏。

需求分析

根据上面的需求，分析大概要以下几个步骤。

先实现将摄像头的画面实时展示在页面视频采集区域中；
将摄像头中的视频画面采集一帧成图片并回显；
将生成的图片上传至CDN拿到图片链接；
将图片链接上传到后端接口做处理；

确定了需要以上四个步骤后，接下来一步一步实现。

实现

视频采集

由于 Electron 内置了 Chromium 浏览器，该浏览器对各项前端标准都支持得非常好，所以基于 Electron 开发应用不会遇到浏览器兼容性问题。几乎可以在 Electron 中使用所有 HTML5、CSS3 、ES6 标准中定义的 API。

所以基于WebRTC提供的API即可获取到摄像头的视频流。

`MediaDevices.getUserMedia()`

代码如下：

methods: {
    getUserMedia() {
        /* 可同时开启video(摄像头)和audio(麦克风) 这里只请求摄像头，所以只设置video为true */
        navigator.mediaDevices.getUserMedia({ video: true })
            .then(function(stream) {
              /* 使用这个 stream 传递到成功回调中 */
              this.success(stream)
            })
            .catch(function(err) {
              /* 处理 error 信息 */
              this.error(error)
            });
    }
}

MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D 转换器等等），也可能是其它轨道类型。

它返回一个 Promise 对象，成功后会resolve回调一个 MediaStream 对象。若找不到满足请求参数的媒体类型，promise会reject回调一个NotFoundError。

现