When running in my local host it's working perfectly. But in the live server, it's not working. Showing the below error in the browser console log

On Error Event Error: getUserMedia is not implemented in this browser
    at Object.getUserMedia (index.js:1)
    at s.testMediaAccess (index.js:1)
    at setupMedia (index.js:1)
    at s.mounted (index.js:1)
    at ne (vue.runtime.esm.js:1854)
    at Vn (vue.runtime.esm.js:4213)
    at Object.insert (vue.runtime.esm.js:3139)
    at L (vue.runtime.esm.js:6340)
    at s.__patch__ (vue.runtime.esm.js:6559)
    at s.An.t._update (vue.runtime.esm.js:3942)

It's not worked with mi browser, and I not received any error from error event
Thanks for this package!

Is there a way to set Back Cam by default?
Also is there a way to set the camera to fullscreen height? It doesn't work for me :(

is this possible ?

I'm trying to use this dependency with my Vue 3 project, but I keep getting the error TypeError: Cannot read property '_c' of undefined. Upon searching online, this error comes when a dependency that only supports Vue 2 is used in a Vue 3 project. Is this the case here too?

The stop() method doesn't seem to turn off the camera. See this video https://drive.google.com/file/d/1ASBcPxJ1i1GrU0sCjNgrEloTi46TciCL/view?usp=sharing

I cloned the project
npm install
npm run dev

ERROR in ./demo/src/main.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./demo/src/main.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve 'vue-web-cam' in '/Users/travisklein/Dropbox/vueApps/vue-web-cam/demo/src'
@ ./demo/src/main.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./demo/src/main.vue?vue&type=script&lang=js&) 51:0-37 55:19-25
@ ./demo/src/main.vue?vue&type=script&lang=js&
@ ./demo/src/main.vue
@ ./demo/src/main.js

I am currently considering whether to use vue-web-cam or <input type="file" accept="image/*" capture="camera">. This is for a mobile camera application. What are the tradeoffs of both of these approaches?

I'll start:

vue-web-cam:

Pros

• Works on desktop and mobile
• Customizable camera interface

Cons

• Requires https on mobile

<input capture="camera">:

Pros

• Built-in zoom / flash / face detection
• Improved performance (shorter delay between pressing shutter button and seeing resulting image)

Cons

• Less control (e.g. iOS forces the user to "retake" or "use photo" after every shutter button)
• Mobile only

Would it be worth considering whether to use <input capture="camera"> in vue-web-cam when it's available?

Please try to compile the working demo and add to the readme

I'm using this version of the vue-webcam and I've got everything working which is great.

I've found that if you apply a width and height of 400 or anything square the image captured becomes squashed to fit the dimensions?

Is there away to set the ratio of the camera?

<web-cam 
    ref="webcam"
    width="100%"
 />

I'm using nuxt. it generates

<video width="100%" height="500" autoplay="autoplay" playsinline="true"></video>

And its blank

when I try capture it gives me this as a string

data:

I got some issue when i connect to my webcam
my webcam is use for the dentist to capture the teeth ,
but i dont know whan model is that camera
want to ask that how can i fix this issue?
thanks.

Hey,

I copy and paste the demo code and in my development everything works fine. Sometimes the available webcam are not listed but after refreshing the page the problem is gone.

Now I deployed my app with nginx on a raspberry pi in my local network. The problem is that when I load the page with the webcam content that the video stream is not shown. In the area where the webcam should appear is recognized as video (right click shows play etc.)

What can be the problem here?

Best regards!

Hi,

I'm receiving getUserMedia is not implemented in this browser from the error event when run on iOS chrome and firefox, but not on iOS safari, Android chrome and firefox.

I noticed that in /src/webcam.vue, line 114, you checked if (navigator.mediaDevices.getUserMedia === undefined). Is this correct because navigator.mediaDevices.getUserMedia is a function that requires a constraint param and it returns a promise. reference: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

Hi, good morning, I am getting the following error when running the component in the browser (chrome and firefox)

On Error Event Error: getUserMedia is not implemented in this browser
at Object.getUserMedia (app.js:50773)
at VueComponent.testMediaAccess (app.js:50773)
at VueComponent.setupMedia (app.js:50773)
at VueComponent.mounted (app.js:50773)
at invokeWithErrorHandling (app.js:52643)
at callHook (app.js:54994)
at Object.insert (app.js:53926)
at invokeInsertHook (app.js:57115)
at Vue.patch [as patch] (app.js:57332)
at Vue._update (app.js:54720)

Hi.
I tested the component on a Moto G4 phone with the Chrome browser and the result was: "getUserMedia is not implemented in this browser".

Is there any way to make it work?
I appreciate if you can help.

Hello! Is there such an opportunity? How to do it?

Hello everybody,

i'm facing a problem, i think it's due to version of chrome :

i have two versions of chrome on my laptop

Version 84.0.4147.105 (Build officiel) (64 bits) => WORKING
Version 86.0.4221.3 (Build officiel) dev (64 bits) => NOT WORKING

Error:
On Error Event DOMException: Could not start video source

I have been working with your component in my project and I'd like to help you add some functions.

I have created a function to change camera so each time the user trigger the changeCamera( ) it's automatically changed the video stream, especially useful with mobile phones or tablets.

Here's the code, https://pastebin.com/rjULe7Ms

It's a little bit messy because I was trying to use the new browsers API that you just added in the past few days.

If you like my work with changeCamera(..) I'll do my best in the next few weeks to make a PR with a proposal or if you want you can already look at my code to start seeing how to implement different cameras on your own.

Is this working on the latest VueJS version? I did a try and couldn't make it work. Could you please investigate it?

Will there be a stream from the network (not local webcam, but from the stream server) in the near future ?

Hi, this is no doubt nothing to do with your plugin as I've tested in the browser and everything works ok.

I have this plugin in my electron application which previously worked fine however after updating my macbook to the latest macOS Mojave it seems the application quits unexpectedly when getting to the component that uses the the vue-web-cam component. I've omitted this component and the page works as expected.

Have you come across this before? It seems like it's a permission issue with Mojave as they've bumped up the security.

On iOS 11.4.1 the webcam request permissions but then show a black screen without image, any idea?

Mozilla/5.0 (iPhone; CPU iPhone OS 11_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15A356 Safari/604.1

Hi,

Thanks for this awesome plugin :)

Front Camera works fine, but I'm having an issue when select the back camera from a device with the example code. Returns undefined most of the time, although it sometimes shows the correct camera, any idea?

I'm testing with Android 6 and 8.1 and Chrome 69.0.3497.100 with the latest version of plugin ^1.3.0

PD: On Android 6 facing back camera never works, only return undefined...

Thanks!

Here is my code,

  <div class="hello">
    <div class="row">
      <div class="col-md-6">
          <vue-baberrage
            :isShow="barrageIsShow"
            :barrageList="barrageList"
            :loop="barrageLoop"
            :boxHeight="boxHeight"
            :boxWidth="boxWidth"
          >
          </vue-baberrage>
        <div class="border">
          <vue-web-cam
            ref="webcam"
            :device-id="deviceId"
            width="100%"
            @started="onStarted"
            @stopped="onStopped"
            @error="onError"
            @cameras="onCameras"
            @camera-change="onCameraChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>
...
 data() {
    return {
     ...
      barrageList: [],
      boxHeight: 500,
      boxWidth: 980,
    };
  },

And I got

<div data-v-469af010="" class="baberrage-stage" style="width: 980px;"><div class="baberrage-top"></div> <div class="baberrage-lane"></div><div class="baberrage-lane"></div><div class="baberrage-lane"></div><div class="baberrage-lane"></div><div class="baberrage-lane"></div><div class="baberrage-lane"></div><div class="baberrage-lane"></div><div class="baberrage-lane"></div><div class="baberrage-lane"></div><div class="baberrage-lane"></div> <div class="baberrage-bottom"></div></div>

If it's possible, could you provide an example please? Many thanks.

Hi!

I am photographing a business card.
When I set the resolution to 1600x900, I have to move the phone 8-10 cm from the object than when setting the default resolution. And the higher the resolution, the farther from the object.

How to make the distance smaller with higher resolution?

Hi!
Are there any plans for typescript support? I tried to use it with vue with ts and couldn't find the type declarations

Reproduction link

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.

Thinking about creating an app that I would use for live streaming and would be interested to know if it's possible to show the video in a 16:9 aspect ratio and use the video as the background canvas for the app (consuming the entire browser window) with toolbars, widgets, and gizmos overlaying it.

1. is that possible to add a property something like 'autosetup' to control Whether call this.setupMedia() on mounted or not?

autosetup: {
      type: Boolean,
      default: true
    },

so that we can give user to show some guide ui before the browser pop up the permission request on page load.

2. i want to integration something like opencv or face detect api that required to setup a canvas element .

    /**
     * get canvas
     */
    getCanvas() {
      let video = this.$refs.video;
      if (!this.ctx) {
        let canvas = document.createElement("canvas");
        canvas.height = video.videoHeight;
        canvas.width = video.videoWidth;
        this.canvas = canvas;
        this.ctx = canvas.getContext("2d");
      }
      const { ctx, canvas } = this;
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      return canvas;
    }

so is that possible to add a property something like 'canvasEl'

canvasEl: {
      type: Object,
      default: null
    },

so change code into something like this:

if(this.$refs.canvasEl !==null){
	let canvas = this.$refs.canvasEl
}

Is there the ability or do you know how I could look at zooming in by a fraction? The height and width defined don't seem to change the ration only the bounding box.

The call to canvas.toDataURL() omits the second parameter for controlling the image quality:

From https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

canvas.toDataURL(type, encoderOptions);
...
encoderOptions Optional
A Number between 0 and 1 indicating the image quality to use for image formats that use lossy compression such as image/jpeg and image/webp.
If this argument is anything else, the default value for image quality is used. The default value is 0.92. Other arguments are ignored.

It would be useful to be able to specify a value of 1.0 for maximum image quality.

Hi @VinceG.
I've been trying to make some good changes in the demo application. But no success once I don't have access rights. So I would like to ask you a permission to make these changes in the demo project.
If you want to, I can create a demo application on my handle GH account and then send you the project for you see it. What do you think about it?

Kind regards,

Glaucia Lemos

Is there a way to control output resolution of the snapshot image?

My snapshots are now 640x480px, even though my webcam supports resolution up to 2560px...

How would you catch the error when the user doesn't have a webcam?

Hello,

I've an issue to make the webcam component works on Chrome Android.
It seems no cameras are detected, on Firefox it works great.

Otherwise, I used the example of the demo:
https://github.com/VinceG/vue-web-cam/blob/master/demo/src/main.vue

Hello,

I'm using Vuejs v2.6.10 and vue-web-cam v1.5.1, I cannot see anything :

Here is the code of my component :

I'm using chrome with SSL certificate (To allow the camera) but nothing :

And no errors in console :

Any help ?

Plugin is not working properly in internet explorer browser.

Hello, I installed vue-webcam and had no problem making it work in my project. But now, a few months later, it is not working anymore. The webcam picture does not come up and when I try to capture picture, it is just a black box. The browser enables the camera but nothing happens. No error message comes up. Tested on Chrome, Firefox and Edge. I don't know when it stopped working or is this related to the vue version.

My current vue version: 6.4.1

Usage:

import Webcam from 'vue-web-cam/src/webcam.vue'

...

components: {
Webcam
}

...

<webcam ref="webcam" v-if="!webcam_image" :height="350" @error="webCamError($event)">

Can you please help me troubleshoot this?

The import code only works as follows:

import WebCam from 'vue-web-cam'

Vue.component('webcam', WebCam.WebCam)

Hello!

I was wondering if you have any tips on how this component can be used in apps where it needs to be mounted / destroyed. What kind of methods would need to be implemented?

Thanks !

I have set the autoplay prop and nothing happened. I have took a look in the code and that prop is just declared but not using it in the code.

I need that the camera does not start as default so that i can start it when something happen in my app.

Thanks!

Running atob on capture returns an error DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.