VinceG/vue-web-cam

Can't able to register the component with Vue Instance

pradsdev opened this issue · 5 comments

pradsdev commented

Reproduction link

Edit Vue Template

Expected

should console log the list of cameras available with the device

Actual

Error: [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

pradsdev commented

A small workaround would be downgrading the version to 1.3.0. In this version vue-web-cam works as expected

rizkiheryandi commented

i have same issue with you @pradsdev

and i try to downgrade the version to 1.3.0 on your sandbox https://codesandbox.io/s/64rykwwnrk?fontsize=14

yeah, the error is gone

but, there's no camera appear in the screen

VinceG commented

@rizkiheryandi Can you assist in trying to troubleshoot this, it seems that the demo does work when imported the way it does. Maybe there is some other dependencies that are missing or out of date?

jefrydco commented

@VinceG According the demo I can import the component using this way

import { WebCam } from "vue-web-cam"

export default {
  components: {
    WebCam
  }
}

But it will rise an error like this:

Unknown custom element: <WebCam> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

So I try to change that way into this way:

import VueWebCam from "vue-web-cam;

Vue.use(VueWebCam);

By using the second way, I should use <VueWebCam /> instead of <WebCam />. And the error will be gone.

@pradsdev @rizkiheryandi Checkout this reproduction
https://codesandbox.io/s/6n5wqy87n

as I explain above, I change the way of importing VueWebCam component from App.vue into main.js and the error is gone. But if you open my reproduction link above, you won't see the video appear. The reason is, CodeSandbox load the result from iframe. So, to see the reproduction working, you should open up the result link.
image

Or just click this link below
https://6n5wqy87n.codesandbox.io/

and don't forget to allow the page to use your camera.

VinceG commented

@pradsdev @jefrydco

For some reason if the OP code sandbox the following doesn't work

import  { WebCam } from "vue-web-cam";
console.log(WebCam); // undefined

But this does:

const { WebCam } = require("vue-web-cam");
console.log(WebCam);

https://codesandbox.io/s/oxry6qy3q

In any case i just released 1.5.0 to get some of those imports fixed and i updated the usage
https://github.com/VinceG/vue-web-cam#usage

those methods were tested and they work, including in the demo.

Going to close this since you do have the option to import this in more than one way.

  • 🎉1