vue调用本地摄像头实现拍照功能
版权申诉
5星 · 超过95%的资源 102 浏览量
2020-10-14
22:22:34
上传
评论 1
收藏 119KB PDF 举报 
vue调用本地摄像头实现拍照功能调用本地摄像头实现拍照功能
主要介绍了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="vue调用本地摄像头实现拍照功能" 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,
}
},
资源评论
心太懒6522022-11-18超级好的资源，很值得参考学习，对我启发很大，支持！
