背景：
电脑端需要调取用户摄像头进行拍照文章来源地址https://www.toymoban.com/news/detail-692656.html
1.封装工具函数------获取用户摄像头设备
/** @desc 获取计算机外设列表 储存摄像头数据 */
getDevices() {
return new Promise((resolve, reject) => {
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
window.alert("不支持 mediaDevices.enumerateDevices()");
}
navigator.mediaDevices
.enumerateDevices()
.then(devices => {
let cameraList = [];
devices.forEach((device, index) => {
// 获取摄像头外设 videoinput
if (device.kind && device.kind === "videoinput") {
if (device.deviceId) {
cameraList.push({
id: device.deviceId,
label: device.label
});
}
}
});
resolve(cameraList);
})
.catch(err => {
console.log(err.name + ": " + err.message);
reject();
});
});
}
2.封装工具函数------获取用户摄像头设备
/**
* @desc 获取摄像头权限 getUserMedia
* deviceId getDevices()函数获取的设备id
* success 调用成功的回调函数
* error 调用失败的回调函数
*/
getUserMedia(deviceId, success, error) {
const constraints= {
audio: false,
video: {
width: 300,
height: 200,
transform: "scaleX(-1)",
deviceId: deviceId
}
};
if (navigator.mediaDevices.getUserMedia) {
//最新的标准API
navigator.mediaDevices
.getUserMedia(constraints)
.then(success)
.catch(error);
} else if (navigator.webkitGetUserMedia) {
//webkit核心浏览器
navigator.webkitGetUserMedia(constraints, success, error);
} else if (navigator.mozGetUserMedia) {
//firfox浏览器
navigator.mozGetUserMedia(constraints, success, error);
} else if (navigator.getUserMedia) {
//旧版API
navigator.getUserMedia(constraints, success, error);
}
}
3.调用摄像头
/** @desc 摄像头使能封装 */
enableCamera(deviceId) {
this.getUserMedia(
deviceId,
stream => {
if ("srcObject" in this.thisVideo) {
this.thisVideo.srcObject = stream;
} else {
// 避免在新的浏览器中使用它，新浏览器正在被弃用。没有开启摄像头权限或浏览器版本不兼容
this.thisVideo.src = window.URL.createObjectURL(stream);
}
this.thisVideo.onloadedmetadata = e => {
this.thisVideo.play();
};
},
error => {
console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
alert("摄像头打开失败，请检查摄像头并点击浏览器地址栏右侧的摄像头标志进行开启设置");
}
);
},
// 拍照
handlePhotograph() {
this.thisContext.drawImage(this.thisVideo, 0, 0, 300, 200);
// 获取图片base64链接;
this.imgSrc = this.thisCanvas.toDataURL("image/png", 0.7);
},
完整代码：
<template>
<div>
<video id="videoCamera" autoplay></video>
<img id="save_img" :src="imgSrc" alt="" />
<canvas
style="display: none"
id="canvasCamera"
:width="videoWidth"
:height="videoHeight"
></canvas>
<!--确认-->
<button @click="handlePhotograph">拍照</button>
</div>
</template>
<script>
export default {
data() {
return {
videoWidth: 300,
videoHeight: 200,
cameraList: [{ id: "", label: "摄像头1" }],
currentCamera: "",
imgSrc: ""
};
},
components: {},
computed: {},
mounted() {
this.getDevices().then(res => {
if (res.length) {
this.cameraList = res;
}
this.currentCamera = this.cameraList[0].id;
this.main();
});
},
methods: {
main() {
this.thisCanvas = document.getElementById("canvasCamera");
this.thisContext = this.thisCanvas.getContext("2d");
this.thisVideo = document.getElementById("videoCamera");
this.enableCamera(this.currentCamera);
},
getDevices() {
return new Promise((resolve, reject) => {
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
window.alert("不支持 mediaDevices.enumerateDevices()");
}
navigator.mediaDevices
.enumerateDevices()
.then(devices => {
let cameraList = [];
devices.forEach((device, index) => {
// 获取摄像头外设 videoinput
if (device.kind && device.kind === "videoinput") {
if (device.deviceId) {
cameraList.push({
id: device.deviceId,
label: device.label
});
}
}
});
resolve(cameraList);
})
.catch(err => {
console.log(err.name + ": " + err.message);
reject();
});
});
},
/**
* @desc 获取摄像头权限 getUserMedia
* deviceId getDevices()函数获取的设备id
* success 调用成功的回调函数
* error 调用失败的回调函数
*/
getUserMedia(deviceId, success, error) {
const constraints = {
audio: false,
video: {
width: this.videoWidth,
height: this.videoHeight,
transform: "scaleX(-1)",
deviceId: deviceId
}
};
if (navigator.mediaDevices.getUserMedia) {
//最新的标准API
navigator.mediaDevices
.getUserMedia(constraints)
.then(success)
.catch(error);
} else if (navigator.webkitGetUserMedia) {
//webkit核心浏览器
navigator.webkitGetUserMedia(constraints, success, error);
} else if (navigator.mozGetUserMedia) {
//firfox浏览器
navigator.mozGetUserMedia(constraints, success, error);
} else if (navigator.getUserMedia) {
//旧版API
navigator.getUserMedia(constraints, success, error);
}
} /** @desc 摄像头使能封装 */,
enableCamera(deviceId) {
this.getUserMedia(
deviceId,
stream => {
if ("srcObject" in this.thisVideo) {
this.thisVideo.srcObject = stream;
} else {
// 避免在新的浏览器中使用它，新浏览器正在被弃用。没有开启摄像头权限或浏览器版本不兼容
this.thisVideo.src = window.URL.createObjectURL(stream);
}
this.thisVideo.onloadedmetadata = e => {
this.thisVideo.play();
};
},
error => {
console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
alert("摄像头打开失败，请检查摄像头并点击浏览器地址栏右侧的摄像头标志进行开启设置");
}
);
},
// 拍照
handlePhotograph() {
this.thisContext.drawImage(this.thisVideo, 0, 0, 300, 200);
// 获取图片base64链接;
this.imgSrc = this.thisCanvas.toDataURL("image/png", 0.7);
}
}
};
</script>
<style lang="scss" scoped></style>
文章来源：https://www.toymoban.com/news/detail-692656.html
到了这里，关于Vue2调用电脑摄像头权限，并拍照的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
