基于vue的webcamjs集成

记一次在vue中使用webcamjs调取pc端摄像头拍照

说明

本例调用摄像头基于webcamjs

第一步： Photo.vue 组件

<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 './components/Photo'
export default {
  name: 'app',
  components: {
    Photo
  }
}
</script>

结果演示