feat: implement WebcamFileSource
This commit is contained in:
busti
parent
04e8cbf5f8
commit
fe2b6e9f68
3 changed files with 174 additions and 228 deletions
|
|
@ -37,11 +37,6 @@
|
|||
<b-icon-camera-video></b-icon-camera-video>
|
||||
</div>
|
||||
</webcam-file-source>
|
||||
<webcam-file-source-legacy @input="addFiles">
|
||||
<div class="img-thumbnail btn btn-outline-primary">
|
||||
<b-icon-camera-video></b-icon-camera-video>
|
||||
</div>
|
||||
</webcam-file-source-legacy>
|
||||
<label class="img-thumbnail btn btn-outline-primary" for="file-dropdown">
|
||||
<b-icon-plus></b-icon-plus>
|
||||
</label>
|
||||
|
|
@ -111,13 +106,11 @@ import CameraFileSource from "@/components/CameraFileSource.vue";
|
|||
import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
|
||||
import DeletableWrapper from "@/components/DeletableWrapper.vue";
|
||||
import WebcamFileSource from "@/components/WebcamFileSource.vue";
|
||||
import WebcamFileSourceLegacy from "@/components/WebcamFileSourceLegacy.vue";
|
||||
|
||||
export default {
|
||||
name: "CombinedFileField",
|
||||
components: {
|
||||
WebcamFileSource,
|
||||
WebcamFileSourceLegacy,
|
||||
...BIcons,
|
||||
AuthenticatedImage,
|
||||
DeletableWrapper,
|
||||
|
|
|
|||
|
|
@ -1,29 +1,71 @@
|
|||
<template>
|
||||
<div class="d-inline-block">
|
||||
<label @click="show_modal = true">
|
||||
<slot></slot>
|
||||
</label>
|
||||
<div class="modal">
|
||||
<div class="modal-dialog modal-fullscreen">
|
||||
<div class="modal-content">
|
||||
<select v-model="selectedCamera" v-on:change="openStream" class="form-select position-relative w-75 mx-auto mt-4" aria-label="Select Camera Source">
|
||||
<option disabled value="">Select Camera Source</option>
|
||||
<option v-for="camera in availableCameras" :key="camera.deviceId" :value="camera">
|
||||
{{ camera.label }}
|
||||
</option>
|
||||
</select>
|
||||
<video
|
||||
v-if="capturing"
|
||||
ref="video"
|
||||
class="img-fluid rounded mx-auto d-block mb-3 img-preview w-100"
|
||||
>
|
||||
Video stream not available.
|
||||
</video>
|
||||
<canvas ref="canvas" class="img-fluid d-none img-preview"/>
|
||||
</div>
|
||||
<div class="d-inline-block">
|
||||
<label @click="open">
|
||||
<slot></slot>
|
||||
</label>
|
||||
<div class="modal" :class="{'d-block': show_modal}" tabindex="-1">
|
||||
<div class="modal-dialog modal-fullscreen">
|
||||
<div class="modal-content p-2">
|
||||
<button type="button" class="btn-close position-absolute fixed-top m-2" style="right: 1rem; left: auto;"
|
||||
@click="close"></button>
|
||||
<div v-if="error" class="alert alert-danger" role="alert">
|
||||
{{ lastError }}
|
||||
</div>
|
||||
<div class="row" v-if="capturing && !streaming">
|
||||
<div class="spinner-grow text-danger mx-auto" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
v-if="!capturing && dataImage"
|
||||
class="img-fluid rounded mx-auto d-block w-75"
|
||||
:src="dataImage"
|
||||
alt="Image not available."
|
||||
/>
|
||||
<video
|
||||
ref="video"
|
||||
class="img-fluid rounded d-block img-preview w-75 mx-auto"
|
||||
:class="{'d-none': !capturing}"
|
||||
>
|
||||
Video stream not available.
|
||||
</video>
|
||||
<canvas ref="canvas" class="img-fluid d-none img-preview"/>
|
||||
<div class="position-absolute fixed-bottom text-center">
|
||||
<div class="btn-group shadow">
|
||||
<button
|
||||
class="btn btn-success"
|
||||
:class="{'disabled': dataImage}"
|
||||
@click="(!dataImage) && captureVideoImage()">
|
||||
<b-icon-camera></b-icon-camera> Capture
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-danger"
|
||||
:class="{'disabled': !dataImage}"
|
||||
@click="(dataImage) && retake()"
|
||||
>
|
||||
<b-icon-trash></b-icon-trash> Retake
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
:class="{'disabled': !dataImage}"
|
||||
@click="(dataImage) && save()"
|
||||
>
|
||||
<b-icon-save></b-icon-save> Save
|
||||
</button>
|
||||
</div>
|
||||
<select v-model="selectedCamera" v-on:change="onUserSelect"
|
||||
class="form-select position-relative w-50 mx-auto mb-5 mt-2 shadow"
|
||||
aria-label="Select Camera Source">
|
||||
<option disabled value="">Select Camera Source</option>
|
||||
<option v-for="camera in availableCameras" :key="camera.deviceId" :value="camera">
|
||||
{{ camera.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -32,43 +74,117 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name: "WebcamFileSource",
|
||||
data: () => ({
|
||||
show_modal: false,
|
||||
availableCameras: [],
|
||||
selectedCamera: undefined,
|
||||
capturing: false,
|
||||
streaming: false,
|
||||
stream: undefined,
|
||||
dataImage: undefined
|
||||
}),
|
||||
methods: {
|
||||
async openStream() {
|
||||
if (!this.capturing) {
|
||||
this.capturing = true;
|
||||
this.streaming = false;
|
||||
this.stream = await navigator.mediaDevices.getUserMedia({video: {deviceId: this.selectedCamera.deviceId}, audio: false});
|
||||
const {video} = this.$refs;
|
||||
video.srcObject = this.stream;
|
||||
video.play();
|
||||
video.addEventListener('canplay', () => {
|
||||
this.streaming = true;
|
||||
}, false);
|
||||
}
|
||||
},
|
||||
async open() {
|
||||
await navigator.mediaDevices.getUserMedia({video: true});
|
||||
const devices = await navigator.mediaDevices.enumerateDevices();
|
||||
this.availableCameras = devices.filter(device => device.kind === "videoinput");
|
||||
if (this.availableCameras.length === 0) return;
|
||||
if (this.availableCameras.length === 1) {
|
||||
this.selectedCamera = this.availableCameras[0];
|
||||
await this.openStream();
|
||||
}
|
||||
}
|
||||
name: "WebcamFileSource",
|
||||
data: () => ({
|
||||
lastError: undefined,
|
||||
error: false,
|
||||
show_modal: false,
|
||||
availableCameras: [],
|
||||
selectedCamera: undefined,
|
||||
capturing: false,
|
||||
streaming: false,
|
||||
stream: undefined,
|
||||
dataImage: undefined
|
||||
}),
|
||||
methods: {
|
||||
async attemptGetUserMedia(constraints) {
|
||||
this.stream = await navigator.mediaDevices.getUserMedia({
|
||||
audio: false,
|
||||
video: constraints
|
||||
}).catch((error) => {
|
||||
console.error(error);
|
||||
if (error.name === "NotAllowedError") this.lastError = "Camera Permission Not Granted";
|
||||
if (error.name === "NotReadableError") this.lastError = "Camera Hardware Error";
|
||||
this.lastError = "Unknown Error"
|
||||
});
|
||||
if (this.stream) this.allowed = true;
|
||||
},
|
||||
mounted() {
|
||||
this.open();
|
||||
async assignStream() {
|
||||
this.capturing = true;
|
||||
this.streaming = false;
|
||||
const {video} = this.$refs;
|
||||
video.srcObject = this.stream;
|
||||
video.addEventListener('canplay', () => {
|
||||
this.streaming = true;
|
||||
localStorage.setItem("WebcamFileSource#previousDevice", this.selectedCamera.deviceId);
|
||||
}, false);
|
||||
await video.play();
|
||||
},
|
||||
closeStream() {
|
||||
if (this.capturing) {
|
||||
this.stream.getTracks().forEach(s => s.stop());
|
||||
this.streaming = false;
|
||||
this.stream = undefined;
|
||||
}
|
||||
},
|
||||
async enumerateCameras() {
|
||||
const devices = await navigator.mediaDevices.enumerateDevices();
|
||||
this.availableCameras = devices.filter(device => device.kind === "videoinput");
|
||||
},
|
||||
async open() {
|
||||
this.show_modal = true;
|
||||
const previousDevice = localStorage.getItem("WebcamFileSource#previousDevice");
|
||||
if (previousDevice) await this.attemptGetUserMedia({deviceId: previousDevice});
|
||||
if (!this.stream) await this.attemptGetUserMedia({facingMode: "environment"});
|
||||
if (!this.stream) await this.attemptGetUserMedia(true);
|
||||
if (!this.stream) this.error = true;
|
||||
await this.enumerateCameras();
|
||||
this.selectedCamera = this.availableCameras.find(({deviceId}) => deviceId === this.stream.getTracks()[0].getSettings().deviceId);
|
||||
await this.assignStream();
|
||||
},
|
||||
async onUserSelect() {
|
||||
this.closeStream();
|
||||
if (!this.dataImage) {
|
||||
await this.attemptGetUserMedia({deviceId: this.selectedCamera.deviceId})
|
||||
await this.assignStream();
|
||||
}
|
||||
},
|
||||
async close() {
|
||||
this.closeStream();
|
||||
this.capturing = false;
|
||||
this.show_modal = false;
|
||||
this.dataImage = undefined;
|
||||
},
|
||||
captureVideoImage() {
|
||||
const {video, canvas} = this.$refs;
|
||||
const context = canvas.getContext('2d');
|
||||
const {videoWidth, videoHeight} = video;
|
||||
canvas.width = videoWidth;
|
||||
canvas.height = videoHeight;
|
||||
context.drawImage(video, 0, 0, videoWidth, videoHeight);
|
||||
this.dataImage = canvas.toDataURL('image/jpeg', 0.5);
|
||||
this.closeStream();
|
||||
this.capturing = false;
|
||||
},
|
||||
retake() {
|
||||
this.dataImage = undefined;
|
||||
this.open();
|
||||
},
|
||||
save() {
|
||||
const mimeType = this.dataImage.split(';')[0].split(':')[1];
|
||||
const data = this.dataImage.split(',')[1];
|
||||
const raw_data = atob(data);
|
||||
const hash = nacl.crypto_hash(raw_data).reduce((a, b) => a + b.toString(16).padStart(2, "0"), "");
|
||||
const image = {
|
||||
name: hash.slice(0, 12) + ".jpg",
|
||||
size: raw_data.length,
|
||||
mime_type: mimeType,
|
||||
data: data,
|
||||
hash: hash,
|
||||
};
|
||||
this.$emit('input', [image]);
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
navigator.mediaDevices.addEventListener("devicechange", (event) => {
|
||||
console.log("devicechange");
|
||||
this.enumerateCameras();
|
||||
if (this.availableCameras.findIndex(({deviceId}) => deviceId === this.selectedCamera.deviceId) === -1) {
|
||||
this.closeStream();
|
||||
this.open();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,163 +0,0 @@
|
|||
<template>
|
||||
<div class="d-inline-block">
|
||||
<label @click="show_modal = true">
|
||||
<slot></slot>
|
||||
</label>
|
||||
<div class="modal" :class="{'d-block': show_modal}" tabindex="-1">
|
||||
<div class="modal-dialog modal-fullscreen">
|
||||
<div class="modal-content">
|
||||
<img
|
||||
v-if="!capturing"
|
||||
class="img-fluid rounded mx-auto d-block mb-3"
|
||||
:src="dataImage"
|
||||
alt="Image not available."
|
||||
/>
|
||||
<video
|
||||
v-if="capturing"
|
||||
ref="video"
|
||||
class="img-fluid rounded mx-auto d-block mb-3"
|
||||
>
|
||||
Video stream not available.
|
||||
</video>
|
||||
<canvas ref="canvas" class="img-fluid d-none img-preview"/>
|
||||
<div class="row" v-if="capturing && !streaming">
|
||||
<div class="spinner-grow text-danger mx-auto" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-auto">
|
||||
<button v-if="!capturing" class="btn my-2 ml-auto btn-secondary" @click="openStream()">
|
||||
<b-icon-camera></b-icon-camera>
|
||||
</button>
|
||||
<div v-if="capturing" class="btn-group my-2 ml-auto">
|
||||
<button class="btn btn-success" @click="captureVideoImage()">
|
||||
<b-icon-camera></b-icon-camera> Capture
|
||||
</button>
|
||||
<button
|
||||
class="btn"
|
||||
:class="(dataImage) ? 'btn-danger' : 'btn-secondary disabled'"
|
||||
@click="(dataImage) && closeStream()"
|
||||
>
|
||||
<b-icon-stop-fill></b-icon-stop-fill> Abort
|
||||
</button>
|
||||
</div>
|
||||
<select v-model="selectedCamera" class="form-select" aria-label="Select Camera Source"
|
||||
@change="chooseDevice(selectedCamera)">
|
||||
<option disabled value="">Select Camera Source</option>
|
||||
<option v-for="camera in availableCameras" :key="camera.deviceId" :value="camera">
|
||||
{{ camera.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div> </div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapMutations} from 'vuex';
|
||||
import * as BIcons from "bootstrap-icons-vue";
|
||||
|
||||
export default {
|
||||
name: 'WebcamFileSourceLegacy',
|
||||
components: {
|
||||
...BIcons
|
||||
},
|
||||
emits: ["input"],
|
||||
data: () => ({
|
||||
capturing: false,
|
||||
streaming: false,
|
||||
stream: undefined,
|
||||
dataImage: undefined,
|
||||
show_modal: false,
|
||||
availableCameras: [],
|
||||
selectedCamera: undefined,
|
||||
}),
|
||||
methods: {
|
||||
async openStream() {
|
||||
if (!this.capturing) {
|
||||
//await navigator.mediaDevices.getUserMedia({video: true});
|
||||
this.capturing = true;
|
||||
this.streaming = false;
|
||||
if (this.selectedCamera)
|
||||
this.stream = await navigator.mediaDevices.getUserMedia({
|
||||
video: {deviceId: this.selectedCamera.deviceId},
|
||||
audio: false
|
||||
});
|
||||
else
|
||||
this.stream = await navigator.mediaDevices.getUserMedia({
|
||||
video: {facingMode: "environment"},
|
||||
audio: false
|
||||
})
|
||||
const {video} = this.$refs;
|
||||
video.srcObject = this.stream;
|
||||
video.addEventListener('canplay', () => {
|
||||
this.streaming = true;
|
||||
}, false);
|
||||
await video.play();
|
||||
const devices = await navigator.mediaDevices.enumerateDevices();
|
||||
this.availableCameras = devices.filter(device => device.kind === "videoinput");
|
||||
}
|
||||
},
|
||||
captureVideoImage() {
|
||||
const {video, canvas} = this.$refs;
|
||||
const context = canvas.getContext('2d');
|
||||
const {videoWidth, videoHeight} = video;
|
||||
canvas.width = videoWidth;
|
||||
canvas.height = videoHeight;
|
||||
context.drawImage(video, 0, 0, videoWidth, videoHeight);
|
||||
this.dataImage = canvas.toDataURL('image/jpeg', 0.5);
|
||||
const mimeType = this.dataImage.split(';')[0].split(':')[1];
|
||||
const data = this.dataImage.split(',')[1];
|
||||
const raw_data = atob(data);
|
||||
const hash = nacl.crypto_hash(raw_data).reduce((a, b) => a + b.toString(16).padStart(2, "0"), "");
|
||||
const image = {
|
||||
name: hash.slice(0, 12) + ".jpg",
|
||||
size: raw_data.length,
|
||||
mime_type: mimeType,
|
||||
data: data,
|
||||
hash: hash,
|
||||
};
|
||||
this.show_modal = false;
|
||||
this.$emit('input', [image]);
|
||||
this.closeStream();
|
||||
},
|
||||
chooseDevice(device) {
|
||||
this.closeStream();
|
||||
this.selectedCamera = device;
|
||||
this.openStream();
|
||||
},
|
||||
closeStream() {
|
||||
if (this.capturing) {
|
||||
this.stream.getTracks().forEach(s => s.stop());
|
||||
this.capturing = false;
|
||||
this.streaming = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.openStream();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.closeStream();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.camera-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue