如何在Android和iOS上打开前置摄像头并使用Vue.Js拍照？

Question

我正在使用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>我应该怎么做才能使其在移动设备上运行？

Answer 1

为什么使用按钮，您会遵循html 5标签，它将起作用：

<input type="file" accept="image/*" capture="camera" />