Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Having trouble with Classic Import rendering
See original GitHub issueDescribe the bug Using the classic import to include the <qrcode-stream @decode=“onDecode”>, <qrcode-stream> is embedded in mounts, but I don’t see the video box with a feed, no ask for permission, and I’m not getting a signal that it’s rendering within the component. See below!
To Reproduce This is a legacy project I inherited, and it’s been built in the HTML file with Vue templates, then new Vue component as a script, the component is embedded in the HTML. Weird and wonky, but it does work.
Steps to reproduce the behavior:
- Go to ‘…’
- Click on ‘…’
- Scroll down to ‘…’
- See error
Vue is already imported in the file the same way qr-code-reader is: I downloaded the JS dist for qr-code-reader and import it like so at the top:
<script src="../js/vue-qrcode-reader.browser.js"></script>
Which makes <qrcode-stream> available, which I grab and put in a template.
Here’s the abbreviated template code:
<script type="text/x-template" id="decode">
<div style="overflow-y: scroll">
<div class="flexRow" >
<div class="exercisePanel flexColumn" style="width:50%">
<h2>DECODE</h2>
<qrcode-stream @decode="onDecode" @beforeCreate="onInit"/>
</div>
<div>
</script>
That template is then rendered by a Vue instance which will render the component <decode> I’m abbreviating here, but including all the functions I have to listen for errors:
Vue.component('decode', {
template: '#decode',
methods: {
onDecode (decodedString) {
console.log(decodedString);
},
logErrors (promise) {
promise.catch(console.error)
},
async onInit (promise) {
console.log("Reached Init")
try {
await promise
console.log(promise)
} catch (error) {
console.log("Error is:", error);
if (error.name === 'NotAllowedError') {
this.error = "ERROR: you need to grant camera access permisson"
} else if (error.name === 'NotFoundError') {
this.error = "ERROR: no camera on this device"
} else if (error.name === 'NotSupportedError') {
this.error = "ERROR: secure context required (HTTPS, localhost)"
} else if (error.name === 'NotReadableError') {
this.error = "ERROR: is the camera already in use?"
} else if (error.name === 'OverconstrainedError') {
this.error = "ERROR: installed cameras are not suitable"
} else if (error.name === 'StreamApiNotSupportedError') {
this.error = "ERROR: Stream API is not supported in this browser"
}
}
}
}
Then that whole component is embedded in the HTML similar to this:
<html>
[blah blah, CSS imports, JS imports]
<div id="slides">
<div class="dapp exercise ui">
<decode></decode>
</div>
</div>
[vue component stuff here for rendering purposes]
</html>
**Expected behavior**
I expect the video box to open up or at least get a ping from the `beforeCreate` hook, but not seeing that. No errors in the Chrome console. Serving this from a localhost.
**Screenshots**
**Desktop (please complete the following information):**
- OS: macOS Mojave
- Chrome
- Version 76
**Smartphone (please complete the following information):**
Not tried yet,
**Additional context**
Your Debugger page did allow me to access my video camera on this computer.
Any help is greatly appreciated!!Issue Analytics
- State:
- Created 4 years ago
- Comments:8 (4 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
Just replace
beforeCreatefrom your example withinit. Like so:I bet there is only a small problem in your code but I can’t tell without being able to tinker with it. If you setup the fiddle I’m pretty sure I’ll find it.
I see…
Well, the name
inithere has nothing to do with lifecycle hooks.initis a custom event just likedecode. Also, as far as I know, lifecycle hooks in general are not automatically emitted as events. So you can’t register events like this:Unless the child component explicitly emits them.