vue调用本地摄像头实现拍照功能
作者:浩星 发布时间:2024-04-28 09:21:46
标签:vue,摄像头,拍照
前言:
vue调用本地摄像头实现拍照功能,由于调用摄像头有使用权限,只能在本地运行,线上需用https域名才可以使用。实现效果:
1、摄像头效果:
2、拍照效果:
实现代码:
<template>
<div class="camera_outer">
<video id="videoCamera" :width="videoWidth" :height="videoHeight" autoplay></video>
<canvas style="display:none;" id="canvasCamera" :width="videoWidth" :height="videoHeight" ></canvas>
<div v-if="imgSrc" class="img_bg_camera">
<img :src="imgSrc" alt="" class="tx_img">
</div>
<button @click="getCompetence()">打开摄像头</button>
<button @click="stopNavigator()">关闭摄像头</button>
<button @click="setImage()">拍照</button>
</div>
</template>
<script>
export default {
data () {
return {
videoWidth: 3000,
videoHeight: 300,
imgSrc: '',
thisCancas: null,
thisContext: null,
thisVideo: null,
}
},
methods: {
// 调用权限(打开摄像头功能)
getCompetence () {
var _this = this
this.thisCancas = document.getElementById('canvasCamera')
this.thisContext = this.thisCancas.getContext('2d')
this.thisVideo = document.getElementById('videoCamera')
// 旧版本浏览器可能根本不支持mediaDevices,我们首先设置一个空对象
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {}
}
// 一些浏览器实现了部分mediaDevices,我们不能只分配一个对象
// 使用getUserMedia,因为它会覆盖现有的属性。
// 这里,如果缺少getUserMedia属性,就添加它。
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
// 首先获取现存的getUserMedia(如果存在)
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia
// 有些浏览器不支持,会返回错误信息
// 保持接口一致
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
}
// 否则,使用Promise将调用包装到旧的navigator.getUserMedia
return new Promise(function (resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject)
})
}
}
var constraints = { audio: false, video: { width: this.videoWidth, height: this.videoHeight, transform: 'scaleX(-1)' } }
navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
// 旧的浏览器可能没有srcObject
if ('srcObject' in _this.thisVideo) {
_this.thisVideo.srcObject = stream
} else {
// 避免在新的浏览器中使用它,因为它正在被弃用。
_this.thisVideo.src = window.URL.createObjectURL(stream)
}
_this.thisVideo.onloadedmetadata = function (e) {
_this.thisVideo.play()
}
}).catch(err => {
console.log(err)
})
},
// 绘制图片(拍照功能)
setImage () {
var _this = this
// 点击,canvas画图
_this.thisContext.drawImage(_this.thisVideo, 0, 0, _this.videoWidth, _this.videoHeight)
// 获取图片base64链接
var image = this.thisCancas.toDataURL('image/jpg')
_this.imgSrc = image
this.$emit('refreshDataList', this.imgSrc)
},
// base64转文件
dataURLtoFile (dataurl, filename) {
var arr = dataurl.split(',')
var mime = arr[0].match(/:(.*?);/)[1]
var bstr = atob(arr[1])
var n = bstr.length
var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], filename, { type: mime })
},
// 关闭摄像头
stopNavigator () {
this.thisVideo.srcObject.getTracks()[0].stop()
}
},
}
</script>
<style lang="less" scoped>
.camera_outer{
position: relative;
overflow: hidden;
background: url("../../assets/img/user_0608_04.jpg") no-repeat center;
background-size: 100%;
video,canvas,.tx_img{
-moz-transform:scaleX(-1);
-webkit-transform:scaleX(-1);
-o-transform:scaleX(-1);
transform:scaleX(-1);
}
.btn_camera{
position: absolute;
bottom: 4px;
left: 0;
right: 0;
height: 50px;
background-color: rgba(0,0,0,0.3);
line-height: 50px;
text-align: center;
color: #ffffff;
}
.bg_r_img{
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
}
.img_bg_camera{
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
img{
width: 100%;
height: 100%;
}
.img_btn_camera{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
line-height: 50px;
text-align: center;
background-color: rgba(0,0,0,0.3);
color: #ffffff;
.loding_img{
width: 50px;
height: 50px;
}
}
}
}
</style>
来源:https://blog.csdn.net/qq_41619796/article/details/107952904


猜你喜欢
- 对于大多数数据科学家而言,线性回归方法是他们进行统计学建模和预测分析任务的起点。这种方法已经存在了 200 多年,并得到了广泛研究,但仍然是
- 中间件介绍中间件顾名思义,是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与
- 本篇文章所编写的代码,已经放到了gitee上了:gitee.com/pdudo/golea…本文所依赖的环境为:在目前
- 训练深层神经网络是十分困难的,特别是在较短的实践内使他们收敛更加棘手。在本节中,我们将介绍批量归一化(batch normalization
- 本文实例讲述了JavaScript 扩展运算符用法。分享给大家供大家参考,具体如下:扩展运算符格式扩展运算符格式很简单,就是三个点(…)重点
- 1、首先需要在vue-cli项目中配置bootstrap,jquery2、 然后新建vue文件,如index.vue,index.vue内容
- 前言正则表达式的基础知识就不说了,有兴趣的可以点击这里,提取一般分两种情况,一种是提取在文本中提取单个位置的字符串,另一种是提取连续多个位置
- 说在前面nodejs 读取数据库是一个异步操作,所以在数据库还未读取到数据之前,就会继续往下执行代码。最近写东西时,需要对数据库进行批量数据
- 在开发高并发系统时,有三把利器用来保护系统:缓存、降级和限流。那么何为限流呢?顾名思义,限流就是限制流量,就像你宽带包了1个G的流量,用完了
- 前言selenium是浏览器自动化测试框架,是一个用于Web应用程序测试的工具,可以直接运行在浏览器当中,并可以驱动浏览器执行指定的动作,如
- 1.OUPUT参数返回值CREATE PROCEDURE [dbo].[nb_order_insert](@o_buyerid int ,@
- 1. 打开Anaconda Prompt(在命令行格式下,输入代码,建立pytorch环境、安装pytorch、测试pytorch过程)2.
- Models内容from django.db import modelsfrom django import forms# Create y
- 前序1、蓝图在一个Flask 应用项目中,如果业务视图过多,可否将以某种方式划分出的业务单元单独维护,将每个单元用到的视图、静态文件、模板文
- 这两天终于忍不住的去实验了一下,为什么网页的字体有时会显示成超级无敌难看的宋体呢?其实宋体不难看,难看的只是把它放在Leopard下,没有点
- 本文实例讲述了Python使用progressbar模块实现的显示进度条功能。分享给大家供大家参考,具体如下:progressbar安装:p
- 在PHP中,有两种包含外部文件的方式,分别是include和require。他们之间有什么不同呢?如果文件不存在或发生了错误,require
- 本文首先介绍了Python中的模块的概念,谈到了一个模块往往由多个模块组成,然后通过具体实例,分析了模块重载的相关内容,具体介绍如下。模块是
- 前文主要纠正title用法上的几点误区,其实除链接和表单的常规标签用法。在内容组织方面还有大潜力待发掘,比如写网志经常会有针对词、短语说明的
- 本文实例讲述了python使用 request 发送表单数据操作。分享给大家供大家参考,具体如下:# !/usr/bin/env pytho