如何在 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>






我应该怎么做才能使其在移动设备上运行？

    
  



  
  
  

    

      

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

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

        
      
    
  
  
  





  

    

      
 
       

        
 
         
 
归档时间：
 
 
         
 
  6 年，10 月 前  
 
 
        
 
        
 
         
 
查看次数：
 
 
         
 
 5582 次  
 
 
        
 
        
 
         
 
最近记录：
 
 
         
 
6 年，10 月 前
 
 
        
 
       
      
 
    
    
    
    

      
相关归档
 
      
      
试图在脚本标记上触发onload事件 89

      
      
重叠div"不可点击",以便可以访问下面的内容？ 35

      
      
自动填充用户名/密码时，如何防止Chrome更改字体？ 25

      
      
colspan messes与固定宽度表 22

      
      
Vue3：未捕获类型错误：代理上的“设置”：陷阱为属性“NewTodo”返回虚假 15

      
      
使用Blade/Moustache模板混合Laravel和Vue.Js 7

      
      
Vuetify v-btn路由活动类问题 7

      
      
从Vue中的自定义事件获取事件源？ 5

      
      
访问 Vue 中子组件的计算属性 5

      
      
Vue动态地图 3

      
    
    
    

      
难疑归档
 
      
      
如何在PHP中阻止SQL注入？ 2776

      
      
Java中的"实现Runnable"与"扩展线程" 2023

      
      
如何在Java中声明和初始化数组？ 1946

      
      
接口和抽象类之间有什么区别？ 1705

      
      
用PHP将HTML + CSS转换为PDF？ 1585

      
      
静态只读与const 1349

      
      
Subversion存储库中"分支","标记"和"主干"的含义是什么？ 1181

      
      
在Python中检查类型的规范方法是什么？ 1171

      
      
基于容器宽度的字体缩放 1083

      
      
致命错误:Python.h:没有这样的文件或目录 1042

      
    
  

Answer 1

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

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