下面这段代码是在html文件中执行调用摄像头，然后进行拍照的功能，一切都是按照里面的步骤去走的，功能也确实可以实现，后面的代码就是 vue 实现这个功能的逻辑代码（如果你还直接使用，你就会发现一个坑爹的问题，请继续看下去）
html文件内容
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拍照2</title>
</head>
<body>
<button id="button_take">拍照</button><br />
<div style="float: left;width:50%"><video id="v"></video></div>
<canvas id="canvas" style="display:none;"></canvas><br />
<img src="http://placehold.it/640&text=Your%20image%20here%20..." id="photo" alt="photo" style="float: left;">
</body>
<script>
!(function () {
// 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
// 首先，如果有getUserMedia的话，就获得它
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}
// 否则，为老的navigator.getUserMedia方法包裹一个Promise
return new Promise(function (resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}
const constraints = {
video: true,
audio: false
};
let videoPlaying = false;
let v = document.getElementById('v');
let promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(stream => {
// 旧的浏览器可能没有srcObject
if ("srcObject" in v) {
v.srcObject = stream;
} else {
// 防止再新的浏览器里使用它，应为它已经不再支持了
v.src = window.URL.createObjectURL(stream);
}
v.onloadedmetadata = function (e) {
v.play();
videoPlaying = true;
};
}).catch(err => {
console.error(err.name + ": " + err.message);
});
document.getElementById('button_take').addEventListener('click', function () {
if (videoPlaying) {
let canvas = document.getElementById('canvas');
canvas.width = v.videoWidth;
canvas.height = v.videoHeight;
canvas.getContext('2d').drawImage(v, 0, 0);
let data = canvas.toDataURL('image/webp');
document.getElementById('photo').setAttribute('src', data);
// canvas.getContext("2d").drawImage(Img,0,0,width,height); //将图片绘制到canvas中
}
}, false);
})();
</script>
</html>
vue项目中使用(组件)，你会发现无法调起摄像头，提示getUserMedia is not implemented in this browser，那是谷歌的安全策略，下面附带解决办法
<template>
<div class="flc">
<div class="video-Box">
<div>
<video id="videoCamera" width="250" height="250" autoplay style="border-radius:180px;box-shadow: darkgrey 0 0 30px 5px ;"></video>
</div>
<canvas style="display:none; " id="canvasCamera" width="250" height="250"></canvas>
</div>
<div class="img_bg_camera" v-if="imgSrc">
<p style="color: #000000;">图片显示</p>
<img :src="imgSrc" alt="" class="tx_img" style="border-radius:360px;box-shadow: darkgrey 0 0 30px 5px ;" v-if="imgif">
</div>
<div class="bommen" style="margin-top: 50px;">
<el-button type="success" @click="getCompetence()">打开摄像头</el-button>
<el-button type="success" @click="closeCarama()">关闭摄像头</el-button>
<el-button type="success" @click="setImage()">拍照</el-button>
<el-button type="primary" @click="uploadImage()">提交</el-button>
<el-button type="primary" @click="save">保存</el-button>
</div>
</div>
</template>
<script>
import { Message } from 'element-ui'
export default {
data() {
return {
imgif: false,
videoWidth: 250,
videoHeight: 250,
imgSrc: '', //图片src
canvasCamera: null,
contextCamera: null,
videoCamera: null,
}
},
mounted() {
},
methods: {
// 打开摄像头
getCompetence() {
this.canvasCamera = document.getElementById('canvasCamera')
this.contextCamera = this.canvasCamera.getContext('2d')
this.videoCamera = document.getElementById('videoCamera')
var _this = this
// 旧版本浏览器可能根本不支持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。旧的浏览器可能没有srcObject
if ('srcObject' in _this.videoCamera) {
_this.videoCamera.srcObject = stream
} else {
// 避免在新的浏览器中使用它，因为它正在被弃用。
_this.videoCamera.src = window.URL.createObjectURL(stream)
}
_this.videoCamera.onloadedmetadata = function (e) {
_this.videoCamera.play()
}
}).catch(err => {
console.log(err)
Message({ message: '没有开启摄像头权限或浏览器版本不兼容', type: 'warning' })
})
},
closeCarama() {
this.videoCamera.srcObject.getTracks()[0].stop()
},
// 绘制图片（拍照功能）
setImage() {
this.imgif = true
// 点击，canvas画图
this.contextCamera.drawImage(this.videoCamera, 0, 0, 250, 250)
// 获取图片base64链接
var image = this.canvasCamera.toDataURL('image/png')
this.imgSrc = image
console.log(this.imgSrc);
},
save () {
if (this.imgSrc) return this.$emit('creamOver',this.imgSrc)
Message({ message: '还未进行拍摄', type: 'error' })
},
//上传数据
uploadImage() {
var file = this.imgSrc
console.log(file);
//base64数据放formData里面
var formData = new FormData(); //*
formData.append("multipartFile", file); //*
formData.append("password", this.ruleForm.password); //*
formData.append("username", this.ruleForm.name); //*
//自己配置axios。上传
},
}
}
</script>
<style scoped lang="scss">
.flc {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.face {
width: 400px;
height: 450px;
position: relative;
}
.face .face-img {
width: 400px;
height: 450px;
position: absolute;
left: 0px;
top: 0px;
}
.face .face-content {
width: 310px;
height: 322px;
position: absolute;
top: 64px;
left: 45px;
}
.face .face-content #video {
object-fit: fill;
}
.step {
text-align: center;
margin-top: 30px;
}
.step .step-ul .step-li .step-title {
font-size: 16px;
color: #65dffe;
padding-bottom: 10px;
}
.step .step-ul .step-li .step-title .step-titleimg {
height: 26px;
width: 26px;
margin-left: 20px;
cursor: pointer;
}
.step .step-ul .step-li .step-img {
height: 150px;
width: 150px;
border: 3px solid #eecfa1;
border-radius: 50%;
}
.step .step-ul .step-li .step-img img {
height: 100%;
width: auto;
}
</style>
getUserMedia is not implemented in this browser解决办法
- 使用 https 协议
- 客户端浏览器手动指定域名安全
在谷歌输入网址的地方输入
chrome://flags/#unsafely-treat-insecure-origin-as-secure文章来源：https://www.toymoban.com/news/detail-544680.html
在里面配置指定域名，然后选择 select 为 enabled 然后重启，就解决问题啦文章来源地址https://www.toymoban.com/news/detail-544680.html
到了这里，关于PC端调用摄像头拍照（vue）以及解决getUserMedia is not implemented in this browser的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
