VUE项目调用pc端摄像头功能
(摄像头只可以用localhost启用项目访问,或者修改浏览器配置,底部有方法)
代码如下:
<template>
<!-- 原生摄像头-->
<div>
<div class="box">
<video id="videoCamera" class="canvas" :width="videoWidth" :height="videoHeight" autoPlay></video>
<canvas id="canvasCamera" class="canvas" :width="videoWidth" :height="videoHeight"></canvas>
</div>
<div>
<el-button @click="photographBtn" icon="el-icon-camera" size="small">拍照</el-button>
<el-button v-if="os" @click="openCamera" icon="el-icon-video-camera" size="small">打开摄像头</el-button>
<el-button v-else @click="stopCamera" icon="el-icon-switch-button" size="small">关闭摄像头</el-button>
<el-button @click="resetBtn" icon="el-icon-refresh" size="small">重置</el-button>
<el-button @click="submitBtn" icon