小编Pau*_*ima的帖子

我正在开发 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>
Run Code Online (Sandbox Code Playgroud)






<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() …
Run Code Online (Sandbox Code Playgroud)
Run Code Online (Sandbox Code Playgroud)