This repository has been archived by the owner on Feb 19, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 110
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
102 additions
and
102 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,114 +1,112 @@ | ||
| <template> | ||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col-md-6"> | ||
| <h2>Current Camera</h2> | ||
| <code v-if="device">{{ device.label }}</code> | ||
| <div class="border"> | ||
| <vue-web-cam ref="webcam" | ||
| :device-id="deviceId" | ||
| width="100%" | ||
| @started="onStarted" | ||
| @stopped="onStopped" | ||
| @error="onError" | ||
| @cameras="onCameras" | ||
| @camera-change="onCameraChange" /> | ||
| </div> | ||
|
|
||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col-md-12"> | ||
| <select v-model="camera"> | ||
| <option>-- Select Device --</option> | ||
| <option v-for="device in devices" | ||
| :key="device.deviceId" | ||
| :value="device.deviceId">{{ device.label }}</option> | ||
| </select> | ||
| </div> | ||
| <div class="col-md-12"> | ||
| <button type="button" | ||
| class="btn btn-primary" | ||
| @click="onCapture">Capture Photo</button> | ||
| <button type="button" | ||
| class="btn btn-danger" | ||
| @click="onStop">Stop Camera</button> | ||
| <button type="button" | ||
| class="btn btn-success" | ||
| @click="onStart">Start Camera</button> | ||
| </div> | ||
| <div class="col-md-6"> | ||
| <h2>Current Camera</h2> | ||
| <code v-if="device">{{ device.label }}</code> | ||
| <div class="border"> | ||
| <vue-web-cam | ||
| ref="webcam" | ||
| :device-id="deviceId" | ||
| width="100%" | ||
| @started="onStarted" | ||
| @stopped="onStopped" | ||
| @error="onError" | ||
| @cameras="onCameras" | ||
| @camera-change="onCameraChange" | ||
| /> | ||
| </div> | ||
|
|
||
| <div class="row"> | ||
| <div class="col-md-12"> | ||
| <select v-model="camera"> | ||
| <option>-- Select Device --</option> | ||
| <option | ||
| v-for="device in devices" | ||
| :key="device.deviceId" | ||
| :value="device.deviceId" | ||
| >{{ device.label }}</option> | ||
| </select> | ||
| </div> | ||
| <div class="col-md-12"> | ||
| <button type="button" class="btn btn-primary" @click="onCapture">Capture Photo</button> | ||
| <button type="button" class="btn btn-danger" @click="onStop">Stop Camera</button> | ||
| <button type="button" class="btn btn-success" @click="onStart">Start Camera</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="col-md-6"> | ||
| <h2>Captured Image</h2> | ||
| <figure class="figure"> | ||
| <img :src="img" class="img-responsive" /> | ||
| </figure> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="col-md-6"> | ||
| <h2>Captured Image</h2> | ||
| <figure class="figure"> | ||
| <img :src="img" class="img-responsive" > | ||
| </figure> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { WebCam } from "vue-web-cam"; | ||
| import { WebCam } from "../../src"; | ||
| export default { | ||
| name: "App", | ||
| components: { | ||
| "vue-web-cam": WebCam | ||
| }, | ||
| data() { | ||
| return { | ||
| img: null, | ||
| camera: null, | ||
| deviceId: null, | ||
| devices: [] | ||
| }; | ||
| }, | ||
| computed: { | ||
| device: function() { | ||
| return this.devices.find(n => n.deviceId === this.deviceId); | ||
| } | ||
| }, | ||
| watch: { | ||
| camera: function(id) { | ||
| this.deviceId = id; | ||
| }, | ||
| devices: function() { | ||
| // Once we have a list select the first one | ||
| const [first, ...tail] = this.devices; | ||
| if (first) { | ||
| this.camera = first.deviceId; | ||
| this.deviceId = first.deviceId; | ||
| } | ||
| } | ||
| }, | ||
| methods: { | ||
| onCapture() { | ||
| this.img = this.$refs.webcam.capture(); | ||
| }, | ||
| onStarted(stream) { | ||
| console.log("On Started Event", stream); | ||
| }, | ||
| onStopped(stream) { | ||
| console.log("On Stopped Event", stream); | ||
| }, | ||
| onStop() { | ||
| this.$refs.webcam.stop(); | ||
| name: "App", | ||
| components: { | ||
| "vue-web-cam": WebCam | ||
| }, | ||
| onStart() { | ||
| this.$refs.webcam.start(); | ||
| data() { | ||
| return { | ||
| img: null, | ||
| camera: null, | ||
| deviceId: null, | ||
| devices: [] | ||
| }; | ||
| }, | ||
| onError(error) { | ||
| console.log("On Error Event", error); | ||
| computed: { | ||
| device: function() { | ||
| return this.devices.find(n => n.deviceId === this.deviceId); | ||
| } | ||
| }, | ||
| onCameras(cameras) { | ||
| this.devices = cameras; | ||
| console.log("On Cameras Event", cameras); | ||
| watch: { | ||
| camera: function(id) { | ||
| this.deviceId = id; | ||
| }, | ||
| devices: function() { | ||
| // Once we have a list select the first one | ||
| const [first, ...tail] = this.devices; | ||
| if (first) { | ||
| this.camera = first.deviceId; | ||
| this.deviceId = first.deviceId; | ||
| } | ||
| } | ||
| }, | ||
| onCameraChange(deviceId) { | ||
| this.deviceId = deviceId; | ||
| this.camera = deviceId; | ||
| console.log("On Camera Change Event", deviceId); | ||
| methods: { | ||
| onCapture() { | ||
| this.img = this.$refs.webcam.capture(); | ||
| }, | ||
| onStarted(stream) { | ||
| console.log("On Started Event", stream); | ||
| }, | ||
| onStopped(stream) { | ||
| console.log("On Stopped Event", stream); | ||
| }, | ||
| onStop() { | ||
| this.$refs.webcam.stop(); | ||
| }, | ||
| onStart() { | ||
| this.$refs.webcam.start(); | ||
| }, | ||
| onError(error) { | ||
| console.log("On Error Event", error); | ||
| }, | ||
| onCameras(cameras) { | ||
| this.devices = cameras; | ||
| console.log("On Cameras Event", cameras); | ||
| }, | ||
| onCameraChange(deviceId) { | ||
| this.deviceId = deviceId; | ||
| this.camera = deviceId; | ||
| console.log("On Camera Change Event", deviceId); | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| </script> |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters