如何使用电脑摄像头拍照片(联想笔记本摄像头开启但黑屏快捷键)

背景

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

需求

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

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

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

实现

采集

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

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

代码如下:

methods: {
getUser {
/* 可同时开启video(摄像头)和dio(麦克风) 这里只请求摄像头,所以只设置video为true */
({ video: true })
.then(nction(stream) {
/* 使用这个 stream 传递到成回调中 */
(stream)
})
.catch(nction(err) {
/* 处理 err 信息 */
(err)
});
}
}
会提示用户给予使用媒体输入的许可,媒体输入会产生一个Stream,里面包含了请求的媒体类型的轨道。此流可以包含一个轨道(来自硬件或者虚拟源,比如相机、采集设备和屏幕服务等等)、一个音频轨道(同样来自硬件或虚拟音频源,比如麦克风、A/D 转换器等等),也可能是其它轨道类型。

它返回一个 Pmise 对象,成后会resolve回调一个 Stream 对象。若找不到满足请求参数的媒体类型,pmise会reject回调一个NotFoundErr。

现在已经成获取到流,接下来就是将流回显到页面。这里使用video标签完成,代码如下:

<template>
<div class="video-page">
<div class="video-content">
<video ref="video" class="video-"></video>
</div>
</div>
</template>
export deflt {
methods: {
getUser {
/* 可同时开启video(摄像头)和dio(麦克风) 这里只请求摄像头,所以只设置video为true */
({ video: true })
.then(nction(stream) {
/* 使用这个 stream 传递到成回调中 */
(stream)
})
.catch(nction(err) {
/* 处理 err 信息 */
(err)
});
},
success(stream) {
('成', stream);
/* 将stream 分配给video标签 */
this.$
this.$;
}
}
}

这时,摄像头中的画面就可以显示在页面video标签内,如下。

为了用户体验,在进入页面之前添加了判断摄像头是否已经接入并可用的逻辑,避免用户的摄像头未接入或者启动,造成应用不可用的错觉。

使用来获取可用媒体输入和输出设备的列表,例如摄像头、麦克风、耳机等。

.then(devicesList => {
('------devicesList', deviceList)
})

得到的设备列表数据格式如下:

kind类型有三种,分别是dioinput、diooutput和videoinput。分别代表音的输入和输出。可在列表中查找目标媒体是否已经接入且可用。

若有选择切换设备需求,可根据kind类型进行媒体设备分类,选择目标deviceId,传入,完成来源切换。

 ({ video: { deviceId: x } })

拍照生成片

拍照其实就是截取中的某一帧,这里使用canvas来实现截取。getContext 方法可返回一个对象,该对象提供了用于在画布上绘的方法和属。其中drawIge方法用来向画布上绘制像、画布或。

<template>
<div class="video-page">
<div class="video-content">
<video ref="video" class="video-" v-if="showVideo"></video>
<canvas ref="canvas" v-else width="500" height="346"></canvas>
<div class="video-buttons">
<div @click="capte" class="button- capte">拍照</div>
<div @click="submit" class="button- submit"}">提交</div>
</div>
</div>
</template>
export deflt {
data: {
showVideo: true, // 是否展示摄像头画面
},
methods: {
/* 拍照按钮点击 */
capte {
var context = this.$('2d');
/* 要跟video的宽高一致 */
(this.$, 0, 0, 1000, 692, 0, 0, 500, 346);
}
}
}

拍照的片回显至canvas标签。

上传片至CDN

上个步骤已经完成了拍照,接下来就需要将片上传至CDN,拿到片链接。这里有两种方式可以实现获取片数据。

1. 使用

方法生成 Blob 对象,用以展示 canvas 上的片。因为直接可以拿到片文件,所以无需再使用方法2中的函数来base,直接可以获取到片文件用来上传。

语法

toBlob(callback, type, quality)

参数

callback:回调函数,参数为Blob对象(目标片文件)。

type:片格式,默认为ige/png 可选。

quality:0-1的数字,表示片质量,可选。

点击提交按钮按钮时,先获取片文件,为上传做准备。

methods: {
/* 提交按钮点击 */
submit {
const baseUrl = this.$(blob => {
('===blob', blob)
const data = new FormData
('file', blob)
('https://XXXXX/upload', data)
}, "ige/jpeg", 0.95)
}
}

console的结果如下:

2. 使用

方法返回一个包含片展示的Data L。

Data L,即前缀为 data: 协议的 L,其允许内容创建者向文档中嵌入小文件。

语法

(type, encoderOptions);

参数

type 片格式,默认为ige/png。

encoderOptions 0到1之间的值,用来选定片质量,默认值是0.92,超出范围会使用默认值。

返回值

base组成的数据,上传前需转为片文件。这里封装了一个convertBaseUrlToImgFile函数用来转换。代码如下:

<template>
<div class="video-page">
<div class="video-content">
<video ref="video" class="video-" v-if="showVideo"></video>
<canvas ref="canvas" v-else width="500" height="346"></canvas>
<div class="video-buttons">
<div @click="capte" class="button- capte">拍照</div>
<div @click="submit" class="button- submit">提交</div>
</div>
</div>
</template>
export deflt {
data: {
/* 是否展示摄像头画面 */
showVideo: true,
},
methods: {
/* 将base转为片文件 */
convertBaseUrlToImgFile(lData, fileType) {
const imgData = ('base,').splice(-1)[0]
/* 解码使用 base- 编码的字符串 转换为byte */
const bytes = (imgData)
/* 处理异常,将ASCII码小于0的转换为大于0 */
const ab = new ArrayBuffer
const ia = new Int8Array(ab)
for (let i = 0; i < ++) {
ia[i] = (i)
}
/* 转换成文件,可以添加文件的type,lastModifiedDate属 */
const blob = new Blob([ab], { type: fileType })
retn blob
},
/* 提交按钮点击 */
async submit {
const baseUrl = this.$
const imgFile = (baseUrl, 'ige/jpg')
('====imgFile', imgFile)
const data = new FormData
('file', imgFile)
/* 上传 */
('https://XXXXX/upload', data)
},
}
}

convertBaseUrlToImgFile可用于在使用canvas外的场景进行base转换片文件。和方法得到的结果一致。

以上两种方法都可以完成片上传,拿到CDN片链接后可传给后端进行处理。获取屏幕信息。

总结

通过以上四个步骤就完成了Electn应用中通过外接摄像头拍照并上传的能。这里基本用不到Electn的能力,和在web端的实现方式并无区别,Electn在这里起到的作用就是获取摄像头媒体流不需要获取用户权限。

Electn是基于Chmium和Node.js实现的,这就使前端者可以使用JavaScpt、HTML和S轻松构建跨的桌面应用。Electn可以使用几乎所有的Web前端生态领域及Node.js生态领域的组件和技术方案。

后续会介绍Electn在验机应用中的实践方案,敬请期待~

作者:谢星


上一篇: 2023高性价比手机推荐(2023年12月最值得入手的手机排行榜新款手机)
下一篇: 返回列表

为您推荐