vue 连接高拍仪实现pc 端拍照上传功能

需求描述：实现电脑拍照内置摄像头拍照和连接高拍仪外置摄像头拍照。

实现原理：利用H5 调用浏览器的摄像头来实现视频功能，然后利用canvas 截图，把当前的屏幕截取，生成一张图片。

注意事项：电脑有内置的摄像头，也有外接的高拍仪，所以需要获取到全部的，然后可以选择切换摄像头。

打开弹窗时会默认获取所有的摄像头，并且默认选择第一个，然后打开摄像头。点击确定时会生成一张图片。然后拿到图片就可以调取接口了。

效果如下：

以下为拍照子组件代码：

里面有一点点数据是业务数据，可自行去掉。

<template><el-dialogwidth="50%"title="拍照":before-close="closeCamera":close-on-click-modal="false":close-on-press-escape="false":destroy-on-close="true":visible.sync="innerVisible"append-to-body><div class="camera-content"><el-form ref="form" :model="form" label-width="80px"><el-form-item label=""><el-input v-model="form.eyes"></el-input></el-form-item><el-form-item label=""><el-input v-model="form.remark"></el-input></el-form-item><el-form-item label="摄像头"><el-select v-model="camera"style="width: 100%"@change="handleChange"placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item></el-form><!--开启摄像头--><!--        <img @click="callCamera" :src="headImgSrc" alt="摄像头">--><!--                canvas截取流--><canvas v-show="false" ref="canvas" width="640" height="480"></canvas><!--            图片展示--><video ref="video" width="640" height="480" autoplay></video><!--确认--><el-button size="mini" type="primary" @click="photograph">确定</el-button><el-button size="mini" type="primary" @click="handleClose">关闭</el-button></div></el-dialog></template>
<script>export default {name: 'CameraUpload',props: {innerVisible: {type: Boolean,default: false,},rowData: {type: Object,default: () => {return {}}}},data() {return {form: {eyes: '',remark: '',},headImgSrc: '',dialogCamera: false,camera: '',options: [],}},mounted() {// this.getAllCamera();},methods: {handleClose() {this.closeCamera();this.$emit('closeCamera');},handleChange(val) {this.closeCamera();this.camera = val;this.callCamera()},// 获取摄像头getAllCamera() {navigator.mediaDevices.enumerateDevices().then(this.gotDevices).then(this.callCamera).catch(this.handleError);},handleError(error) {this.$message.error(error.name + ": " + error.message)},gotDevices(deviceInfos) {console.log(deviceInfos);this.options = [];for (var i = 0; i < deviceInfos.length; ++i) {var deviceInfo = deviceInfos[i];var option = document.createElement('option');option.value = deviceInfo.deviceId;if (deviceInfo.kind === 'videoinput') {this.options.push({value: deviceInfo.deviceId,label: deviceInfo.label})} else {console.log('Found ome other kind of source/device: ', deviceInfo);}}this.camera = this.options[0].value;},// 调用摄像头callCamera() {// this.getAllCamera();// H5调用电脑摄像头APInavigator.mediaDevices.getUserMedia({// video: true,video: {optional: [{sourceId: this.camera}]}}).then(success => {console.log(success);// 摄像头开启成功this.$refs['video'].srcObject = success// 实时拍照效果this.$refs['video'].play()}).catch(error => {this.$message.error('摄像头开启失败，请检查摄像头是否可用并重新打开！')})},// 拍照photograph() {let ctx = this.$refs['canvas'].getContext('2d')// 把当前视频帧内容渲染到canvas上ctx.drawImage(this.$refs['video'], 0, 0, 640, 480)// 转base64格式、图片格式转换、图片质量压缩let imgBase64 = this.$refs['canvas'].toDataURL('image/jpeg', 0.7)console.log(imgBase64);// 由字节转换为KB 判断大小let str = imgBase64.replace('data:image/jpeg;base64,', '')let strLength = str.lengthlet fileLength = parseInt(strLength - (strLength / 8) * 2)// 图片尺寸  用于判断let size = (fileLength / 1024).toFixed(2)console.log(size)// 上传拍照信息  调用接口上传图片 .........// 保存到本地// this.dialogCamera = false// let ADOM = document.createElement('a')// ADOM.href = this.headImgSrc// ADOM.download = new Date().getTime() + '.jpeg'// ADOM.click()},// 关闭摄像头closeCamera() {if (!this.$refs['video'].srcObject) {this.dialogCamera = falsereturn}let stream = this.$refs['video'].srcObjectlet tracks = stream.getTracks()tracks.forEach(track => {track.stop()})this.$refs['video'].srcObject = null;// this.$emit('closeCamera')},}}
</script>
<style lang="less" scoped>.camera-content {text-align: center;}
</style>

以下为父组件引用代码：

一些业务逻辑代码可自行去掉

<CameraUpload:rowData="rowData"@closeCamera="closeCamera":innerVisible="innerVisible"ref="myCameraUpload"/>handleCamera() {this.innerVisible = true;this.$nextTick(() => {this.$refs.myCameraUpload.getAllCamera();})},closeCamera() {this.innerVisible = false;this.getUploadList();},

vue 连接高拍仪实现pc 端拍照上传功能相关推荐

vue本地上传并预览php,vue.js 实现图片本地预览裁剪压缩上传功能
以下代码涉及 Vue 2.0 及 ES6 语法. 目标纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还 ...
android com.mylhyl,Android 高仿微信朋友圈拍照上传功能
模仿微信朋友圈发布动态,输入文字支持文字多少高度自增,有一个最小输入框高度,输入文字有限制,不过这些都很easy! 1. photopicker的使用这是一个支持选择多张图片,点击图片放大,图片之间 ...
android 微信高仿,Android 高仿微信朋友圈拍照上传功能
模仿微信朋友圈发布动态,输入文字支持文字多少高度自增,有一个最小输入框高度,输入文字有限制,不过这些都很easy! 1. PhotoPicker的使用这是一个支持选择多张图片,点击图片放大,图片之间 ...
php连接高拍仪,无线投屏与高拍仪结合方案
无线投屏与高拍仪结合方案 AWIND奇机小编很早之前就跟大家介绍过,AWIND奇机无线投屏器能跟有HDMI信号输出接口的摄像机连接,也能跟我们日常使用的手机.平板等智能系统连接,进行一边拍摄,一边实时 ...
webAPP如何实现移动端拍照上传（Vue组件示例）？
摘要:使用HTML5编写移动Web应用,主要是为了尝试一下"一套代码多处运行",一个webapp几乎可以不加修改的运行在PC/Android/iOS等上面运行.但是写到现在觉得虽然 ...
移动端拍照上传到服务器
一.html代码如下 <form id="myFormData" class="mui-input-group"><div class=&qu ...
奔图高拍仪-vue二次开发
开发环境:Windows10系统高拍仪品牌:奔图PFZ1201 首先问那边技术要过来二次开发的sdk,安装成功后,文件夹里会有名为samples的文件夹,里面放着的就是demo了. 我的是这个版本 ...
良田高拍仪集成vue项目
一.硬件及开发包说明: 产品型号为良田高拍仪S1800A3,集成b/s系统,适用现代浏览器,图片使用BASE64数据.开发包的bin文件下的video.flt文件需要和高拍仪型号的硬件id对应,这个可 ...
c++ 二次开发良田高拍仪_良田高拍仪集成vue项目
一.硬件及开发包说明: 产品型号为良田高拍仪S1800A3,集成b/s系统,适用现代浏览器,图片使用BASE64数据.开发包的bin文件下的video.flt文件需要和高拍仪型号的硬件id对应,这个可 ...
思源高拍仪万能驱动_动态展示和教学良田YL1050AF高拍仪评测
高拍仪的一大特点就是灵活多样,通过不同的工业设计用于文件扫描.视频展示.多媒体教学.信息采集.体温监测等等.良田最新款YL1050AF教学高拍仪通过巧妙的设计和专业的软件,为教学.培训.实时展示等应用 ...

vue 连接高拍仪实现pc 端拍照上传功能

vue 连接高拍仪实现pc 端拍照上传功能相关推荐

最新文章

热门文章