vinceg / vue-web-cam Goto Github PK
View Code? Open in Web Editor NEWWebcam component for VueJs.
License: MIT License
Webcam component for VueJs.
License: MIT License
Hi!
Are there any plans for typescript support? I tried to use it with vue with ts and couldn't find the type declarations
<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'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?
Running atob
on capture
returns an error DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
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!
vagrant@homestead:~/code/foobar$ npm run dev
> @ dev /home/vagrant/code/foobar
> npm run development
> @ development /home/vagrant/code/foobar
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
95% emitting -
ERROR Failed to compile with 1 errors 12:51:55
error in ./node_modules/vue-web-cam/src/webcam.vue
Module build failed: Error: Couldn't find preset "es2015" relative to directory "/home/vagrant/code/foobar/node_modules/vue-web-cam"
at /home/vagrant/code/foobar/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
at Array.map (<anonymous>)
at OptionManager.resolvePresets (/home/vagrant/code/foobar/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
at OptionManager.mergePresets (/home/vagrant/code/foobar/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
at OptionManager.mergeOptions (/home/vagrant/code/foobar/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
at OptionManager.init (/home/vagrant/code/foobar/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at File.initOptions (/home/vagrant/code/foobar/node_modules/babel-core/lib/transformation/file/index.js:216:65)
at new File (/home/vagrant/code/foobar/node_modules/babel-core/lib/transformation/file/index.js:139:24)
at Pipeline.transform (/home/vagrant/code/foobar/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transpile (/home/vagrant/code/foobar/node_modules/babel-loader/lib/index.js:50:20)
at /home/vagrant/code/foobar/node_modules/babel-loader/lib/fs-cache.js:118:18
at ReadFileContext.callback (/home/vagrant/code/foobar/node_modules/babel-loader/lib/fs-cache.js:31:21)
at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:420:13)
@ ./node_modules/vue-web-cam/src/webcam.vue 4:21-343
@ ./resources/assets/js/scripts/scripts.js
@ multi ./resources/assets/js/scripts/scripts.js
Asset Size Chunks Chunk Names
/js/mbs.js 4.68 MB 0 [emitted] [big] /js/mbs
/js/scripts.js 3.25 MB 1 [emitted] [big] /js/scripts
ERROR in ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./node_modules/vue-web-cam/src/webcam.vue
Module build failed: Error: Couldn't find preset "es2015" relative to directory "/home/vagrant/code/foobar/node_modules/vue-web-cam"
at /home/vagrant/code/foobar/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
at Array.map (<anonymous>)
at OptionManager.resolvePresets (/home/vagrant/code/foobar/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
at OptionManager.mergePresets (/home/vagrant/code/foobar/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
at OptionManager.mergeOptions (/home/vagrant/code/foobar/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
at OptionManager.init (/home/vagrant/code/foobar/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at File.initOptions (/home/vagrant/code/foobar/node_modules/babel-core/lib/transformation/file/index.js:216:65)
at new File (/home/vagrant/code/foobar/node_modules/babel-core/lib/transformation/file/index.js:139:24)
at Pipeline.transform (/home/vagrant/code/foobar/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transpile (/home/vagrant/code/foobar/node_modules/babel-loader/lib/index.js:50:20)
at /home/vagrant/code/foobar/node_modules/babel-loader/lib/fs-cache.js:118:18
at ReadFileContext.callback (/home/vagrant/code/foobar/node_modules/babel-loader/lib/fs-cache.js:31:21)
at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:420:13)
@ ./node_modules/vue-web-cam/src/webcam.vue 4:21-343
@ ./resources/assets/js/scripts/scripts.js
@ multi ./resources/assets/js/scripts/scripts.js
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/vagrant/.npm/_logs/2018-06-15T10_51_55_526Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/vagrant/.npm/_logs/2018-06-15T10_51_55_539Z-debug.log
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.
/**
* 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
}
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
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)
Plugin is not working properly in internet explorer browser.
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.
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:
Would it be worth considering whether to use <input capture="camera"> in vue-web-cam when it's available?
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!
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?
Is this working on the latest VueJS version? I did a try and couldn't make it work. Could you please investigate it?
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!
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.
The stop()
method doesn't seem to turn off the camera. See this video https://drive.google.com/file/d/1ASBcPxJ1i1GrU0sCjNgrEloTi46TciCL/view?usp=sharing
is this possible ?
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 !
Please try to compile the working demo and add to the readme
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?
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.
The call to canvas.toDataURL()
omits the second parameter for controlling the image quality:
Line 267 in 42d9b6e
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.
Hello! Is there such an opportunity? How to do it?
The import code only works as follows:
import WebCam from 'vue-web-cam'
Vue.component('webcam', WebCam.WebCam)
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.
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!
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
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 :(
Will there be a stream from the network (not local webcam, but from the stream server) in the near future ?
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>
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?
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
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
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
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...
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.
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
If it's possible, could you provide an example please? Many thanks.
How would you catch the error when the user doesn't have a webcam?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.