vue的webcamjs集成方式

<template>
 <div>
  <div id="results">Your captured image will appear here...</div>
  <h1>WebcamJS Test Page</h1>
  <h3>Demonstrates simple 320x240 capture &amp; display</h3>
  <div id="my_camera"></div>
  <form>
   <input type=button value="拍照" @click="take_snapshot()">
  </form>
 </div>
</template>

<script>
import '../assets/webcamjs/webcam.js'
 export default {
 name: 'TakePhoto',
 data() {
  return{
 
  }
 },
 methods: {
   take_snapshot: function () {
    // take snapshot and get image data
    Webcam.snap( function(data_uri) {
     // display results in pages
     document.getElementById('results').innerHTML = 
      '<h2>Here is your image:</h2>' + 
      '<img src="'+data_uri+'"/>';
    } );
   }
   },
   mounted() {
    Webcam.set({
     width: 320,
     height: 240,
     image_format: 'jpeg',
     jpeg_quality: 90
    });
    Webcam.attach( '#my_camera' );
   }
 }
</script>

<template>
 <div id="app">
  <Photo></Photo>
 </div>
</template>

<script>
import Photo from './ponents/Photo'
export default {
 name: 'app',
 ponents: {
  Photo
 }
}
</script>