一.该案例情况
框架：vue；
运行环境：PC;
二.准备
在pc端中需要使用https地址才可以访问到摄像头流信息，
所以在生产环境中，我们可以通过vue.config.js来配置localhost的https地址
在正式环境中，可以给域名配置https证书达到要求，所以影响不大
vue.config.js主要代码
/* webpack配置 */ var path = require('path') function resolve (pathUrl){ return path.resolve(__dirname,pathUrl) } module.exports = { devServer: { // 前端端口 port: 8080, // 代理地址 // proxy: 'http://g5rdyr.ngrok.io' proxy: 'http://localhost:8081', https: true }, }
三.写代码（app.vue）
<template> <div id="app"> <video ref="video" id="video" width="320" height="240" controls></video> <canvas id="canvas" ref="canvas" width="320px" height="240px"></canvas> <button type="button" class="btn btn-info" @click="camera('environment')">Back Camera</button> <button type="button" class="btn btn-info" @click="camera('user')">front Camera</button> </div> </template>
<script> export default { name: 'app', data() { return { video: {}, localstream: undefined } }, mounted() { this.$nextTick(()=>{ this.camera('environment'); }) }, methods: { camera (face) { this.stop(); this.gum(face); }, stop () { return this.video.srcObject && this.video.srcObject.getTracks().map(t => t.stop()); }, gum (face) { const fa = face === 'user' ? { facingMode: 'user' } : { facingMode: { exact: 'environment' } }; return navigator.mediaDevices.getUserMedia({ audio: false, video: fa }) .then(stream => { console.log(stream) let video = document.getElementById("video"), canvas = document.getElementById("canvas"), context = canvas.getContext("2d"), vHeight = video.offsetHeight, vWidth = video.offsetWidth; canvas.width = vWidth; // 改变画布的宽高 canvas.height = vHeight; context.drawImage(video, 0, 0, vWidth, vHeight); // 获取图片src base64格式 photoSrc = document.getElementById("canvas").toDataURL("image/jpeg", 0.8); console.log(photoSrc) this.$refs.video.srcObject = stream; this.$refs.video.play(); }).catch(() => { navigator.mediaDevices.getUserMedia({ audio: false, video: true }) .then(stream => { this.$refs.video.srcObject = stream; this.$refs.video.play(); }); }); } } } </script>
四.效果
1.进入页面
2.点击camera按钮拍照
