kopia lustrzana https://github.com/msurguy/SquiggleCam
Fixed camera resolution
rodzic
e4f11eac19
commit
ce1db7d16c
|
@ -36,8 +36,8 @@
|
|||
|
||||
<webcam ref="webcam"
|
||||
:device-id="webcam.deviceId"
|
||||
width="500"
|
||||
height="500"
|
||||
width="550"
|
||||
height="550"
|
||||
@started="onStarted"
|
||||
@stopped="onStopped"
|
||||
@error="onError"
|
||||
|
@ -99,7 +99,7 @@
|
|||
</div>
|
||||
</aside>
|
||||
<main>
|
||||
|
||||
<img :src="webcam.img">
|
||||
<editor v-if="data.loaded" ref="editor" :data="data"></editor>
|
||||
</main>
|
||||
</div>
|
||||
|
@ -168,6 +168,7 @@ export default {
|
|||
methods: {
|
||||
onCapture() {
|
||||
this.webcam.img = this.$refs.webcam.capture();
|
||||
//console.log(this.webcam.img);
|
||||
},
|
||||
onStarted(stream) {
|
||||
this.webcam.streaming = true;
|
||||
|
|
|
@ -164,8 +164,14 @@
|
|||
* test access
|
||||
*/
|
||||
testMediaAccess() {
|
||||
|
||||
navigator.mediaDevices
|
||||
.getUserMedia({ video: true, audio: false})
|
||||
.getUserMedia({ video: {
|
||||
width: this.$props.width,
|
||||
aspectRatio: {
|
||||
exact: this.$props.width / this.$props.height
|
||||
}
|
||||
}, audio: false})
|
||||
.then(stream => this.loadCameras())
|
||||
.catch(error => this.$emit("error", error));
|
||||
},
|
||||
|
@ -175,7 +181,14 @@
|
|||
loadCamera(device) {
|
||||
navigator.mediaDevices
|
||||
.getUserMedia({
|
||||
video: { deviceId: { exact: device } }
|
||||
video: {
|
||||
deviceId: { exact: device },
|
||||
width: this.width,
|
||||
aspectRatio: {
|
||||
exact: this.width / this.height
|
||||
}
|
||||
},
|
||||
audio: false
|
||||
})
|
||||
.then(stream => this.loadSrcStream(stream))
|
||||
.catch(error => this.$emit("error", error));
|
||||
|
@ -190,13 +203,16 @@
|
|||
canvas.height = video.videoHeight;
|
||||
canvas.width = video.videoWidth;
|
||||
this.canvas = canvas;
|
||||
|
||||
this.ctx = canvas.getContext("2d");
|
||||
this.ctx.translate(canvas.width, 0);
|
||||
this.ctx.scale(-1, 1);
|
||||
}
|
||||
|
||||
const { ctx, canvas } = this;
|
||||
|
||||
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
|
||||
|
||||
|
||||
return canvas;
|
||||
}
|
||||
}
|
||||
|
|
Ładowanie…
Reference in New Issue