下面這段代碼是在html文件中執(zhí)行調(diào)用攝像頭，然后進(jìn)行拍照的功能，一切都是按照里面的步驟去走的，功能也確實(shí)可以實(shí)現(xiàn)，后面的代碼就是 vue 實(shí)現(xiàn)這個(gè)功能的邏輯代碼（如果你還直接使用，你就會(huì)發(fā)現(xiàn)一個(gè)坑爹的問(wèn)題，請(qǐng)繼續(xù)看下去）
html文件內(nèi)容
<!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 () {
// 老的瀏覽器可能根本沒(méi)有實(shí)現(xiàn) mediaDevices，所以我們可以先設(shè)置一個(gè)空的對(duì)象
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
// 首先，如果有g(shù)etUserMedia的話，就獲得它
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
// 一些瀏覽器根本沒(méi)實(shí)現(xiàn)它 - 那么就返回一個(gè)error到promise的reject來(lái)保持一個(gè)統(tǒng)一的接口
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}
// 否則，為老的navigator.getUserMedia方法包裹一個(gè)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 => {
// 舊的瀏覽器可能沒(méi)有srcObject
if ("srcObject" in v) {
v.srcObject = stream;
} else {
// 防止再新的瀏覽器里使用它，應(yīng)為它已經(jīng)不再支持了
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項(xiàng)目中使用(組件)，你會(huì)發(fā)現(xiàn)無(wú)法調(diào)起攝像頭，提示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()">打開(kāi)攝像頭</el-button>
<el-button type="success" @click="closeCarama()">關(guān)閉攝像頭</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: {
// 打開(kāi)攝像頭
getCompetence() {
this.canvasCamera = document.getElementById('canvasCamera')
this.contextCamera = this.canvasCamera.getContext('2d')
this.videoCamera = document.getElementById('videoCamera')
var _this = this
// 舊版本瀏覽器可能根本不支持mediaDevices，我們首先設(shè)置一個(gè)空對(duì)象
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {}
}
// 一些瀏覽器實(shí)現(xiàn)了部分mediaDevices，我們不能只分配一個(gè)對(duì)象
// 使用getUserMedia，因?yàn)樗鼤?huì)覆蓋現(xiàn)有的屬性。
// 這里，如果缺少getUserMedia屬性，就添加它。
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
// 首先獲取現(xiàn)存的getUserMedia(如果存在)
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia
// 有些瀏覽器不支持，會(huì)返回錯(cuò)誤信息
// 保持接口一致
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
}
// 否則，使用Promise將調(diào)用包裝到舊的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。舊的瀏覽器可能沒(méi)有srcObject
if ('srcObject' in _this.videoCamera) {
_this.videoCamera.srcObject = stream
} else {
// 避免在新的瀏覽器中使用它，因?yàn)樗诒粭売谩? _this.videoCamera.src = window.URL.createObjectURL(stream)
}
_this.videoCamera.onloadedmetadata = function (e) {
_this.videoCamera.play()
}
}).catch(err => {
console.log(err)
Message({ message: '沒(méi)有開(kāi)啟攝像頭權(quán)限或?yàn)g覽器版本不兼容', type: 'warning' })
})
},
closeCarama() {
this.videoCamera.srcObject.getTracks()[0].stop()
},
// 繪制圖片（拍照功能）
setImage() {
this.imgif = true
// 點(diǎn)擊，canvas畫(huà)圖
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: '還未進(jìn)行拍攝', type: 'error' })
},
//上傳數(shù)據(jù)
uploadImage() {
var file = this.imgSrc
console.log(file);
//base64數(shù)據(jù)放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 協(xié)議
- 客戶端瀏覽器手動(dòng)指定域名安全
在谷歌輸入網(wǎng)址的地方輸入
chrome://flags/#unsafely-treat-insecure-origin-as-secure文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-544680.html
在里面配置指定域名，然后選擇 select 為 enabled 然后重啟，就解決問(wèn)題啦文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-544680.html
到了這里，關(guān)于PC端調(diào)用攝像頭拍照（vue）以及解決getUserMedia is not implemented in this browser的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
