我正在开发PWA Vue.Js应用程序,我需要使用手机上的前置摄像头拍摄用户照片。
我已经在台式机浏览器上完成了一些代码工作,但是在移动设备上运行却没有成功。
这是我到目前为止尝试过的:
<template>
<div id="camera">
<div>
<video ref="video" id="video" width="100%" height="100%" autoplay/>
</div>
<div>
<button id="snap" v-on:click="capture()">Snap Photo</button>
</div>
<canvas ref="canvas" id="canvas" width="100%" height="100%"/>>
</div>
</template>
<script>
export default {
name: 'Camera',
data() {
return {
video: {},
canvas: {},
captures: []
}
},
mounted() {
this.video = this.$refs.video;
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
video.srcObject = stream;
video.play();
video.onplay = function () {
};
this.video.play();
});
}
},
methods: {
capture() {
this.canvas = this.$refs.canvas;
var context = this.canvas.getContext("2d").drawImage(this.video, 0, 0, 640, 480);
this.captures.push(canvas.toDataURL("image/webp"));
}
}
}
</script>
<style>
#camera {
text-align: center;
color: #2c3e50;
}
#video {
background-color: #000000;
}
#canvas {
display: none;
}
li {
display: inline;
padding: 5px;
}
</style>
我应该怎么做才能使其在手机上工作?
为什么使用按钮,您会遵循html 5标签,它将起作用:
<input type="file" accept="image/*" capture="camera" />
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句