Closed connorpwilliams closed 3 years ago
Same issue for me when using Vue. I've tried a couple of different versions with no luck.
Use it this way:
const importHtml5Qrcode = async () => {
const backup = window._
// @ts-ignore
window._ = {}
const m = await import('html5-qrcode')
window._ = backup
return m
}
importHtml5Qrcode().then((x) => console.log('x', x))
@sep2 Are you talking about using your example in React? That snippet didn't compile for me using Vue and Typescript.
The problem is the last three lines in the minified file, I ended up loading the js file from url using dynamically created script tag.
is this issue can be closed?
Use it this way:
const importHtml5Qrcode = async () => { const backup = window._ // @ts-ignore window._ = {} const m = await import('html5-qrcode') window._ = backup return m } importHtml5Qrcode().then((x) => console.log('x', x))
I will try this later today. Haven't had time to work on personal projects. If it is resolved, I'll close this issue.
It didn't worked for me. I have been implementing it in rails.
It didn't work for me also. Please provide a better react example. The one specified doesn't even have a constructor. Or try an example with functional component.
I can confirm the issue persists on Firefox running on Ubuntu 20.04
Same problem with rails here
I solved it in my Vue webpack project.
In the html5-qrcode.min.js
bottom, I modified the ref part.
And then import it in the vue file,I successfully used object orientation to call the Html5QrcodeScanner object.
Sorry, I'm not good at English.
Hope you can understand.
And hope this can help you.
The npm package contains a minified version only as it should also contains source.
您好,您这个怎么调用后置摄像头
只能使用 Javascript 操纵节点调用后置摄像头,除了 render(callback),官方没有提供其他接口
I solved it in my Vue webpack project. In the
html5-qrcode.min.js
bottom, I modified the ref part. And then import it in the vue file,I successfully used object orientation to call the Html5QrcodeScanner object. Sorry, I'm not good at English. Hope you can understand. And hope this can help you.您好,您这个怎么调用后置摄像头
只能使用 Javascript 操纵节点调用后置摄像头,除了 render(callback),官方没有提供其他接口
再请问一下,我本地调试没问题,但发布线上后调不了摄像头怎么回事呢?你有没有遇到过
I solved it in my Vue webpack project. In the
html5-qrcode.min.js
bottom, I modified the ref part. And then import it in the vue file,I successfully used object orientation to call the Html5QrcodeScanner object. Sorry, I'm not good at English. Hope you can understand. And hope this can help you.
我这样把代码引到src下面怎么用不了了呢?求解答
再请问一下,我本地调试没问题,但发布线上后调不了摄像头怎么回事呢?你有没有遇到过
镜头调用属于 WebRTC 协议,仅限于 localhost 以及 https 环境,请检查您的环境是否符合,以及浏览器是否支持该协议。
I solved it in my Vue webpack project. In the
html5-qrcode.min.js
bottom, I modified the ref part. And then import it in the vue file,I successfully used object orientation to call the Html5QrcodeScanner object. Sorry, I'm not good at English. Hope you can understand. And hope this can help you.您好,您这个怎么调用后置摄像头
只能使用 Javascript 操纵节点调用后置摄像头,除了 render(callback),官方没有提供其他接口
再请问一下,我本地调试没问题,但发布线上后调不了摄像头怎么回事呢?你有没有遇到过
镜头调用属于 WebRTC 协议,仅限于 localhost 以及 https 环境,请检查您的环境是否符合,以及浏览器是否支持该协议。 zxing is not defined是怎么回事儿呢
@Dengyu-1129 please send comments in plain English, use google or other translator to help you thanks
I solved it in my Vue webpack project. In the
html5-qrcode.min.js
bottom, I modified the ref part. And then import it in the vue file,I successfully used object orientation to call the Html5QrcodeScanner object. Sorry, I'm not good at English. Hope you can understand. And hope this can help you.
I understand just fine :)
Modifying the npm package source code should not be the solution to this problem if several others are experiencing this.
@mebjas Seems this has been going on since July. Do you have any updates? I'm happy to go through and try to fix things but don't fully know the project and don't want to duplicate effort if you have already started on this.
Thank you
@thecpdubguy Yes, this is a temporary solution before the author fixes it.
Can you verify with latest version of code with npm update
?
(I'll add more documentation later)
With latest update of the library (2.1.0
)
I tested following template code and it worked fine
import './App.css';
import {Html5QrcodeScanner} from "html5-qrcode"
import React from 'react';
class QrcodeDiv extends React.Component {
render() {
return (<div id="qrcode">qr code container</div>);
}
componentDidMount() {
let scanner = new Html5QrcodeScanner("qrcode", {qrbox: {width: 250, height: 250}});
scanner.render();
}
}
function App() {
return (
<div className="App">
<section>
<QrcodeDiv />
</section>
</div>
);
}
export default App;
I updated the plugin (2.1.0
) in my vue webpack project and it worked fine.
codesandbox
<template>
<div id="app">
<div id="qr-code-full-region"></div>
<div>
<button type="button" @click="message = []">clear</button>
</div>
<div
v-for="(msg, index) in message"
:key="index"
style="white-space: pre-line"
>
<pre>decodedResult => {{ msg.decodedResult }}</pre>
</div>
</div>
</template>
<script>
import { Html5QrcodeScanner } from "html5-qrcode";
export default {
data() {
return {
message: [],
};
},
methods: {
creatScan() {
const config = { fps: 10, qrbox: 250 };
const html5QrcodeScanner = new Html5QrcodeScanner(
"qr-code-full-region",
config
);
html5QrcodeScanner.render(this.onScanSuccess);
},
onScanSuccess(decodedText, decodedResult) {
const obj = { decodedResult: decodedResult };
this.message.push(obj);
},
},
async mounted() {
this.creatScan();
},
};
</script>
Thanks for confirming, closing this!
@Nighthree thanks for the example, if you are interested please send a PR with updated example (or a modified example) at https://github.com/mebjas/html5-qrcode/tree/master/examples/vuejs on how to use VueJs + webpack with this library.
Describe the bug Following the example here #113 I was unable to get this to work as a stand alone react component.
I am getting an error saying
TypeError: window._ is undefined
in the browser. I have fiddled around with different attempts but have not been able to find a solution. I have also tried importing this library into my top level index.html file but to no avail. I'd be happy to contribute with a React component but have not been able to find something standalone that works.Does anyone have any suggestions or solutions for a React Component?
Thank you in advance