如何解决我进入生产模式后,Electron-Vue上的网络摄像头js无法正常工作
如果在开发环境中使用Webcam js,则可以正常工作,但是在构建之后,出现错误。我是电子新手,需要您的帮助。
我使用nklayman elextron生成器https://github.com/nklayman/vue-cli-plugin-electron-builder
所以我在camera.vue中有此代码。
<template>
<div>
<div :hidden="cam_hidden">
<div class="cam-wrapper">
<div ref="camera" class="camera" @click="onPictureTaken"></div>
</div>
</div>
<div :hidden="pict_hidden">
<canvas
:width="height"
:height="height"
class="taken_picture"
ref="taken_picture"
></canvas>
<div class="button">
<v-btn color="red" x-large rounded dark @click="again"
>Again</v-btn
>
</div>
</div>
</div>
</template>
这是脚本。
<script>
import * as Webcam from "webcamjs";
export default {
name: "Camera",data: () => ({
cam_hidden: false,pict_hidden: true
}),props: {
width: Number,height: Number
},methods: {
toggleHidden() {
this.cam_hidden = !this.cam_hidden;
this.pict_hidden = !this.pict_hidden;
},onPictureTaken() {
Webcam.snap(() => {
this.toggleHidden();
},this.$refs.taken_picture);
},setWebcam() {
Webcam.set({
width: this.width,height: this.height,crop_width: 240,crop_height: 240,image_format: "jpeg",jpeg_quality: 90,flip_horiz: true,unfreeze_snap: false
});
},again() {
this.$refs.taken_picture.innerHTML = "";
this.toggleHidden();
this.setWebcam();
Webcam.attach(this.$refs.camera);
}
},mounted() {
this.setWebcam();
Webcam.attach(this.$refs.camera);
}
};
</script>
但是在构建应用程序后由于某种原因,我遇到了这样的错误。
chunk-vendors.4570df7c.js:36 TypeError: Cannot read property 'src' of undefined
at i (chunk-vendors.4570df7c.js:230)
at Object.snap (chunk-vendors.4570df7c.js:230)
at onPictureTaken (app.6bf210f8.js:1)
at at (chunk-vendors.4570df7c.js:36)
at HTMLDivElement.r (chunk-vendors.4570df7c.js:36)
at HTMLDivElement.Jn.i._wrapper (chunk-vendors.4570df7c.js:36)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。