I'm working on a PWA Vue.Js application and I need to take a user picture with the front camera on mobile.

I already did some code work on my desktop browser but I got no success making it working on mobile.

Here is the I tried so far:

<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>

                
I'm working on a PWA Vue.Js application and I need to take a user picture with the front camera on mobile. 

I already did some code work on my desktop browser but I got no success making it working on mobile.

Here is the I tried so far:




<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>






What I should do to make it work on mobile?
    

        
            
                
                    
                    
javascript
html
css
vue.js
                
            
        

    
        
            
                




    

        
            Share
        


                    
                        Improve this question
                    

                
                    
                        Follow
                        
                    
                






    
    

            

                

    
        
            edited May 2, 2019 at 15:41
        
        
    
    
        
    
    
        Tamir Klein
        
            3,63211 gold badge2525 silver badges4343 bronze badges
        
    

                
            
                
    
        
            asked May 2, 2019 at 15:00
        
        
    
    
        
    
    
        Paulo LimaPaulo Lima
        
            17811 gold badge22 silver badges1212 bronze badges
        
    



            
        
    
    





             
    
        
            


            
	    

        
                        Add a comment
                 | 
            
                 
    
            
                
                
            
    





    
		


                
                
                    
                    
                        
                            
                                

                                        1 Answer
                                    1
                                
                            
                            
                                


    
        
            Sorted by:
        
        
            Reset to default
        
    
    
        
    



                            
                        
                            
                    


                                        


        
            
                

        
        
        
17        
        
            
        
        


        








            
                
                    
                
            

    
    



            

            


    
    
why you use button you follow html 5 tags it will work:

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