kraeki/vue-web-cam

Webcam component for VueJs.

vue-web-cam

Webcam component for VueJs. See this for browser compatibility.

Installation

npm install vue-web-cam --save
// or
yarn add vue-web-cam

Usage

import Vue from 'vue'
import WebCam from "../../src";
Vue.use(WebCam);


<vue-web-cam ... />

// or
import { WebCam } from "vue-web-cam";

components: {
    WebCam
}

<web-cam ... />

components: {
    'vue-web-cam': WebCam
}

<vue-web-cam ... />

Nuxt.js

Add vue-web-cam/nuxt to modules section of nuxt.config.js

{
  modules: ['vue-web-cam/nuxt']
}

Testing & Dev

npm run dev

Props

prop	type	default	notes
height	number	500	height of video element
width	number	500	width of video element
autoplay	boolean	true	autoplay attribute
screenshotFormat	string	'image/jpeg'	format of screenshot
selectFirstDevice	boolean	false	select first device when avaialble
deviceId	string	null	currently selected camera
playsinline	boolean	true	playsinline of video element
resolution	object	null	object with width and height for camera resolution

Events

name	param	notes
started	stream	emitted once the stream has started
stopped	stream	emitted once the stream has stopped
error	error	emitted if the stream failed to start with the error returned
notsupported	error	emitted when the browser does not support this feature
cameras	cameras	emitted when a list of all cameras available is loaded
camera-change	deviceId	emitted when camera change occurs
video-live	stream	emitted when video is started

Methods

name	param	notes
capture	void	Capture the current image through the webcam as a base64 encoded dataUri
changeCamera	deviceId	change the currently selected camera. Must pass in the device ID
start	void	Programmatically Start the camera after stopping it (relies on deviceId prop passed to the component)
stop	void	Programmatically stop the camera
pause	void	Programmatically pause the camera
resume	void	Programmatically resume the camera after it was paused

Contributing

If you'd like to help make this project better you can help with the following tasks:

• Tests - This project needs a way to test the functionality using a javascript testing solution (Jest as an example)
• Examples - Additional Examples of usage might be helpful to others.
• Project Website - Perhaps launch a project website (on Github Pages) that'll showcase the plugin, Demo, Usage instructions, configuration etc..

License

MIT

Credits

This is based off @smronju vue-webcam and react-webcam