h5调用摄像头拍摄

78 阅读 0 评论 52 点赞

我是靠谱客的博主英勇帆布鞋，最近开发中收集的这篇文章主要介绍h5调用摄像头拍摄，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<template>
<!-- <div class="demo_main">
<div @click="moveToCameraAVG()" v-cloak>
<img v-if="imginfo!==''" :src="imginfo" />
<div class="warm_title2">点击自拍一张头像</div>
</div>
<video
id="video"
class="pic_video"
playsinline
autoplay
x5-video-player-type="h5"
style="object-fit:fill"
></video>
<canvas id="canvas" class="canvas_pic" style="margin: 0;padding: 0;"></canvas>
<div class="bottom_div">
<div>拍照</div>
<img src="images/pic_btn.png" class="capture-btn" @click="captureAvg" />
</div>
</div>-->
<div class="demo_main">
<img v-if="imginfo!==''" :src="imginfo" />
<div class="booth" v-if="showStatus">
<div class="top_header">
<span @click="hideDom">取消</span>
<span>相册</span>
</div>
<div class="box_center">
<div class="img_box"></div>
<video
id="video"
class="pic_video"
playsinline
autoplay
x5-video-player-type="h5"
style="object-fit:fill"
></video>
</div>
<button id="tack" @click="captureAvg"></button>
<canvas id="canvas" width="400" height="300" style="display:none"></canvas>
<!-- <img id="img" src style="max-width:100%" /> -->
</div>
<div v-else>
<button type="file" @click="showDom">上传图片</button>
<img id="img" src style="max-width:100%" />
</div>
</div>
</template>
<script>
import "@/utils/flexible.js";
export default {
data() {
return {
showStatus: false,
imgUrl: "",
vendorUrl: "",
video: "",
canvas: "",
img: "",
snap: "",
imginfo: ""
};
},
created() {},
mounted() {},
methods: {
showDom() {
this.showStatus = true;
this.moveToCameraAVG();
},
hideDom() {
this.showStatus = false;
},
moveToCameraAVG() {
var self = this;
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function(constraints) {
var getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia ||
navigator.oGetUserMedia;
if (!getUserMedia) {
return Promise.reject(
new Error("getUserMedia is not implemented in this browser")
);
}
return new Promise(function(resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
};
}
if (window.stream) {
window.stream.getTracks().forEach(track => {
track.stop();
});
}
var constraints = (window.constraints = {
audio: false,
video: {
sourceId: "default",
facingMode: { exact: "environment" }
}
});
navigator.mediaDevices
.getUserMedia(constraints)
.then(function(stream) {
var video = document.getElementById("video");
try {
window.stream = stream;
video.srcObject = stream;
} catch (error) {
video.src = window.URL.createObjectURL(stream);
}
self.localMediaStream = stream;
video.play();
})
.catch(function(err) {
alert(err.name + ": " + err.message);
});
},
//停止摄像机
stopCapture: function() {
var video = document.getElementById("video");
if (!video.srcObject) return;
let stream = video.srcObject;
let tracks = stream.getTracks();
tracks.forEach(track => {
track.stop();
});
},
// 头像照片
captureAvg() {
var vm = this;
var video = document.getElementById("video");
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
CHeight = video.clientHeight, //获取屏幕大小让canvas自适应
CWidth = video.clientWidth;
canvas.width = CWidth;
canvas.height = CHeight;
if (vm.localMediaStream) {
ctx.drawImage(video, 0, 0, CWidth, CHeight);
var dataURL = canvas.toDataURL("image/jpeg"); //dataURL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA'
vm.imginfo = dataURL;
// 停止摄像机
video.pause();
this.stopCapture();
}
}
}
};
</script>
<style lang="less" scoped>
.top_header {
position: fixed;
left: 0;
right: 0;
top: 0;
height: 1.31rem;
display: flex;
justify-content: space-around;
align-items: center;
}
* {
padding: 0;
margin: 0;
}
.demo_main {
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.31);
padding: 0;
margin: 0;
}
.booth {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
width: 100%;
position: relative;
}
.box_center {
height: 13.55rem;
width: 10rem;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
video {
height: 11.31rem;
width: 7.55rem;
}
.img_box {
height: 11.31rem;
width: 7.55rem;
background-image: url("https://file.baojunev.com/group1/default/20200602/09/39/3/positive.png");
position: absolute;
background-size: 100% 100%;
top: 1.12rem;
}
#tack {
position: fixed;
z-index: 2;
height: 1.65rem;
width: 1.65rem;
border-radius: 50%;
background: #fff;
bottom: 0.45rem;
background-image: url("https://file.baojunev.com/group1/default/20200602/10/10/3/btn.png");
background-size: contain;
border: none;
outline: none;
}
</style>

2.遇到的问题
在浏览器上直接打开该页面时可生效，但是在app的内嵌h5内不生效

权限未打开(APP拍摄权限打开)

config.xml
<platform name="ios">
<custom-config-file parent="NSCameraUsageDescription" platform="ios" target="*-Info.plist">
<string>Access to camera to make video calls.</string>
</custom-config-file>
<custom-config-file parent="NSMicrophoneUsageDescription" platform="ios" target="*-Info.plist">
<string>Access to microphone to make calls.</string>
</custom-config-file>
</platform>
以及适用于Android的以下内容：AndroidManifest.xml
<platform name="android">
...
<custom-preference name="android-minSdkVersion" value="21" />
<custom-preference name="android-targetSdkVersion" value="28" />
<custom-config-file parent="/*" target="AndroidManifest.xml">
<uses-permission android:name="android.webkit.PermissionRequest" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
</custom-config-file>
</platform>

APP找那个需要加入代码

参考的文档：参考文档

"permissions": {
"audio-capture": {
"description": "Required to capture audio using getUserMedia()"
},
"video-capture": {
"description": "Required to capture video using getUserMedia()"
}
}