Skip to content
This repository was archived by the owner on Feb 19, 2024. It is now read-only.

Commit 424f249

Browse files
VinceGVinceG
committed
v1.7.0
1 parent 1169751 commit 424f249

File tree

4 files changed

+102
-102
lines changed

4 files changed

+102
-102
lines changed

Diff for: ‎README.md

+4-2
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,10 @@ npm run dev
8686
| -------------- | -------- | ----------------------------------------------------------------------- |
8787
| capture | void | Capture the current image through the webcam as base64 encoded string |
8888
| changeCamera | deviceId | change the currently selected camera. Must pass in the device ID |
89-
| start | void | Programatically Start the camera after stopping it (relies on deviceId prop passed to the component) |
90-
| stop | void | Programatically stop the camera |
89+
| start | void | Programmatically Start the camera after stopping it (relies on deviceId prop passed to the component) |
90+
| stop | void | Programmatically stop the camera |
91+
| pause | void | Programmatically pause the camera |
92+
| resume | void | Programmatically resume the camera after it was paused |
9193

9294
## Contributing
9395

Diff for: ‎demo/src/main.vue

+96-98
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,112 @@
11
<template>
2-
<div class="container">
3-
<div class="row">
4-
<div class="col-md-6">
5-
<h2>Current Camera</h2>
6-
<code v-if="device">{{ device.label }}</code>
7-
<div class="border">
8-
<vue-web-cam ref="webcam"
9-
:device-id="deviceId"
10-
width="100%"
11-
@started="onStarted"
12-
@stopped="onStopped"
13-
@error="onError"
14-
@cameras="onCameras"
15-
@camera-change="onCameraChange" />
16-
</div>
17-
2+
<div class="container">
183
<div class="row">
19-
<div class="col-md-12">
20-
<select v-model="camera">
21-
<option>-- Select Device --</option>
22-
<option v-for="device in devices"
23-
:key="device.deviceId"
24-
:value="device.deviceId">{{ device.label }}</option>
25-
</select>
26-
</div>
27-
<div class="col-md-12">
28-
<button type="button"
29-
class="btn btn-primary"
30-
@click="onCapture">Capture Photo</button>
31-
<button type="button"
32-
class="btn btn-danger"
33-
@click="onStop">Stop Camera</button>
34-
<button type="button"
35-
class="btn btn-success"
36-
@click="onStart">Start Camera</button>
37-
</div>
4+
<div class="col-md-6">
5+
<h2>Current Camera</h2>
6+
<code v-if="device">{{ device.label }}</code>
7+
<div class="border">
8+
<vue-web-cam
9+
ref="webcam"
10+
:device-id="deviceId"
11+
width="100%"
12+
@started="onStarted"
13+
@stopped="onStopped"
14+
@error="onError"
15+
@cameras="onCameras"
16+
@camera-change="onCameraChange"
17+
/>
18+
</div>
19+
20+
<div class="row">
21+
<div class="col-md-12">
22+
<select v-model="camera">
23+
<option>-- Select Device --</option>
24+
<option
25+
v-for="device in devices"
26+
:key="device.deviceId"
27+
:value="device.deviceId"
28+
>{{ device.label }}</option>
29+
</select>
30+
</div>
31+
<div class="col-md-12">
32+
<button type="button" class="btn btn-primary" @click="onCapture">Capture Photo</button>
33+
<button type="button" class="btn btn-danger" @click="onStop">Stop Camera</button>
34+
<button type="button" class="btn btn-success" @click="onStart">Start Camera</button>
35+
</div>
36+
</div>
37+
</div>
38+
<div class="col-md-6">
39+
<h2>Captured Image</h2>
40+
<figure class="figure">
41+
<img :src="img" class="img-responsive" />
42+
</figure>
43+
</div>
3844
</div>
39-
</div>
40-
<div class="col-md-6">
41-
<h2>Captured Image</h2>
42-
<figure class="figure">
43-
<img :src="img" class="img-responsive" >
44-
</figure>
45-
</div>
4645
</div>
47-
</div>
4846
</template>
4947

5048
<script>
51-
import { WebCam } from "vue-web-cam";
49+
import { WebCam } from "../../src";
5250
5351
export default {
54-
name: "App",
55-
components: {
56-
"vue-web-cam": WebCam
57-
},
58-
data() {
59-
return {
60-
img: null,
61-
camera: null,
62-
deviceId: null,
63-
devices: []
64-
};
65-
},
66-
computed: {
67-
device: function() {
68-
return this.devices.find(n => n.deviceId === this.deviceId);
69-
}
70-
},
71-
watch: {
72-
camera: function(id) {
73-
this.deviceId = id;
74-
},
75-
devices: function() {
76-
// Once we have a list select the first one
77-
const [first, ...tail] = this.devices;
78-
if (first) {
79-
this.camera = first.deviceId;
80-
this.deviceId = first.deviceId;
81-
}
82-
}
83-
},
84-
methods: {
85-
onCapture() {
86-
this.img = this.$refs.webcam.capture();
87-
},
88-
onStarted(stream) {
89-
console.log("On Started Event", stream);
90-
},
91-
onStopped(stream) {
92-
console.log("On Stopped Event", stream);
93-
},
94-
onStop() {
95-
this.$refs.webcam.stop();
52+
name: "App",
53+
components: {
54+
"vue-web-cam": WebCam
9655
},
97-
onStart() {
98-
this.$refs.webcam.start();
56+
data() {
57+
return {
58+
img: null,
59+
camera: null,
60+
deviceId: null,
61+
devices: []
62+
};
9963
},
100-
onError(error) {
101-
console.log("On Error Event", error);
64+
computed: {
65+
device: function() {
66+
return this.devices.find(n => n.deviceId === this.deviceId);
67+
}
10268
},
103-
onCameras(cameras) {
104-
this.devices = cameras;
105-
console.log("On Cameras Event", cameras);
69+
watch: {
70+
camera: function(id) {
71+
this.deviceId = id;
72+
},
73+
devices: function() {
74+
// Once we have a list select the first one
75+
const [first, ...tail] = this.devices;
76+
if (first) {
77+
this.camera = first.deviceId;
78+
this.deviceId = first.deviceId;
79+
}
80+
}
10681
},
107-
onCameraChange(deviceId) {
108-
this.deviceId = deviceId;
109-
this.camera = deviceId;
110-
console.log("On Camera Change Event", deviceId);
82+
methods: {
83+
onCapture() {
84+
this.img = this.$refs.webcam.capture();
85+
},
86+
onStarted(stream) {
87+
console.log("On Started Event", stream);
88+
},
89+
onStopped(stream) {
90+
console.log("On Stopped Event", stream);
91+
},
92+
onStop() {
93+
this.$refs.webcam.stop();
94+
},
95+
onStart() {
96+
this.$refs.webcam.start();
97+
},
98+
onError(error) {
99+
console.log("On Error Event", error);
100+
},
101+
onCameras(cameras) {
102+
this.devices = cameras;
103+
console.log("On Cameras Event", cameras);
104+
},
105+
onCameraChange(deviceId) {
106+
this.deviceId = deviceId;
107+
this.camera = deviceId;
108+
console.log("On Camera Change Event", deviceId);
109+
}
111110
}
112-
}
113111
};
114112
</script>

Diff for: ‎dist/index.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-web-cam",
3-
"version": "1.6.0",
3+
"version": "1.7.0",
44
"description": "Webcam component for Vuejs applications",
55
"main": "dist/index.js",
66
"author": {

0 commit comments

Comments
 (0)