I am currently developing a PWA Vue.Js application and I am trying to implement a feature that allows users to take a picture with the front camera on their mobile devices.
Although I have managed to write code that works on my desktop browser, I have been unsuccessful in getting it to work properly on mobile devices.
Here is what I have tried so far:
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code><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>