search

jhuckaby / webcamjs

HTML5 Webcam Image Capture Library with Flash Fallback
MIT License
2.5k stars 1.11k forks source link

How can i take snapshots for every second? #199

Open sudha53633 opened 8 years ago

sudha53633 commented 8 years ago

Great work. Really love to use webcam.js. I wanted to take snapshot for every second. I've tried with javascript timers. But getting script blocking issues. could you give me heads up to get that.

positlabs commented 8 years ago

canvas.toDataURL is a fairly expensive operation, and it is used in the .snap method.

Try passing a new canvas to .snap for every frame. Stash those canvases in an array, and encode them at an appropriate time (like when the user stops recording)

// pass in a canvas as the second argument
snap: function(user_callback, user_canvas)

However, it looks like this will only work where getUserMedia is supported. The flash fallback uses base64 data regardless. Probably because it has to pass it from flash to js.

Just curious... what is your use-case for snapping an image every second?

If you are mainly supporting mobile devices, then you might want to look into HTML media input. It gives the user a lot of flexibility in how they want to input the video. They can choose to use a pre-recorded video file, or they can record a new video to use. And it's super simple to implement. It's just an input tag with an accept="video/*" attribute.

jhuckaby commented 8 years ago

Not sure what you mean by "script blocking issues". Remember that you need to host your page over HTTPS for most browsers to allow webcam access. Here is a demo page showing continuous capture:

https://pixlcore.com/demos/webcamjs/demos/continuous.html

Hope this helps.

sudha53633 commented 8 years ago

@positlabs Thanks for your inputs & quick response. Actually i'm sending a snap to server for every second and based on the response i'm displaying face co-ordinates with box(left,top,width,height with object) on the snap. For these process i wanted send a snap to the server for each second and based on the server response time callback should trigger for the next snap.

But as said that, canvas.toDataURL is expensive operation. I've gone thru the webcam.js, it's reading video based on the length. In the same i'm trying to display the snap. Can you help me here?

sudha53633 commented 8 years ago

@jhuckaby Really appreciate your efforts on the demo. Basically timers are not preferable in my use case. because I've trigger callback based on the server response(please look into the above comment). Would it be possible to give me inputs to implement the same logic with callback or promises? That helps me a lot.

jhuckaby commented 8 years ago

Sorry, I don't know what you're asking. If you don't want to use timers, but you want to snap a pic every second, then I don't know how to help you. Apologies.

birla commented 8 years ago

As Joseph said, your problem statement isn't clear. From what I can gather, you could try a leading or training debounce to control the rate of the snaps between the timer and your response callback.

On 28 Oct 2016 11:04 p.m., "Joseph Huckaby" notifications@github.com wrote:

Sorry, I don't know what you're asking. If you don't want to use timers, but you want to snap a pic every second, then I don't know how to help you. Apologies.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/jhuckaby/webcamjs/issues/199#issuecomment-256960407, or mute the thread https://github.com/notifications/unsubscribe-auth/AARUHQLYsNlIkZI7Vir_7LeIKNMXluqwks5q4h0DgaJpZM4Kisqr .