Capturing an image from a camera in a browser using getUserMedia (mirrored)

Friends! The days are approaching when almost everything that needed a flash in a browser can be done without it. I don’t know about you, but for me it causes a lot of positive emotions. One of the steps towards displacing flash is the implementation of the getUserMedia (Stream) javascript API in browsers. At the moment, the Stream API for video streaming is implemented in the latest desktop versions of Chrome and Opera. Firefox is on its way. Audio stream “coming soon”. I don’t even know if I should expect something from IE. in theory, he would rather die (and he will die) than start catching up with everyone else.

details about browser support can be found here. /caniuse.com/stream

Let’s take a look at an example and then see how it works:

First, we need elements such as:

• video. in which we will play the streaming video from the user’s camera
• canvas. in which we will put frames to save
• button to capture image
• a hint for a user who does not understand what they want from him at all.

Next, we need to ask the user for permission to use his video stream.

As you can see, if successful, the callback object will return a stream object, based on which you can get the url of the video stream. You can do this with window.URL.createObjectURL (stream). which may be familiar to you if you’ve ever used the js file API.

• pass this url to the video object
• when the button is clicked, grab the current video frame into the canvas
• take the data: url of the resulting image from the canvas
• and that’s it! You can do whatever you want with it: send it to the server, filter it, transfer it to a friend via a socket, etc. You can read more about base64 and data: url format here.

Let’s look at the example code at the beginning of the article for clarity.

Of course, it is better and more beautiful to create all the elements (canvas, video.) Dynamically, but for clarity and understanding, let’s initially arrange them statically on the page:

Mirroring when shooting

In the example above, we did a horizontal flip image capture. Why, you ask. Sometimes you can find such tasks. This is especially true when you need to accurately position your image in relation to the frame or surrounding objects. For example, put your face in a specified area for scanning, align with a preset mask, etc. In this case, it will be more convenient for the user if the image received from the camera is displayed on the monitor mirrored (horizontally).

First, we made a css transform for video

Secondly, we rotated the image on the canvas in the same way

If you don’t need mirroring, just remove that js and css part

Good luck! I am waiting for questions and corrections in the comments.

28 comments on “Capturing an image from a camera in a browser using getUserMedia (mirrored)”

just yesterday a client asked for such a feature and I thought that I would have to wrap the application in phonegap to provide it with more freedom :(. And here your post is very helpful! Super!

Be careful with browser support, this thing is still very crude 🙁
http://caniuse.com/stream

Good afternoon, tell me how to send base64dataUrl to the server?

We are now on the project discussing alternatives to the native iOS application, which we
has not yet been made stable enough. Because there are developers who
make a web application, then consider alternatives like phonegap or appcelerator.

But no one has any experience with them. There is an understanding that simple things can be there
to do, but recording video / photo / audio, sending it to the server so that it
worked stably. we don’t know.

Maybe you have experience and knowledge of these platforms and can tell if this is possible there
to realize?

It so happened that recently we have been making mini applications for http://urturn.com which has a phonegap based ios app. We use the native objective C part for capturing from the camera, and in the webview (web part) only for interfaces and all post processing (canvas, svg, various stickers, effects, etc.). I want to say right away that working in ios uiwebview with phonegap is a nightmare. There are a lot of restrictions, you need to monitor memory, it is very difficult to debug hundreds of incomprehensible bugs similar in magic level to ie6. If you want to make an application with a good fast user interface, video or audio processing or even just a photo, all this for IOS. it’s better to make it native ((I think that Apple will artificially slow down the development of web-based applications for a long time to come, and this is mainly due to the company’s policy. As for Android, firefoxOS, blackberryOS, TizenOS. in a few years, everyone will switch (if already did not go) to web-based applications.But that’s a completely different story 🙂

poking around with the program.
everything works on a laptop, on a smartphone. no.
How do I enable my smartphone to use the camera? I have a Samsung GT-S6810 with android 4.1.2
how browsers are chrome and moss 5.0
this page opens, but there is no dialogue (or rather I cannot find it) that there is a request to use the camera.
tell me where to read
thanks in advance

Unfortunately, nothing will work out yet. At the moment (08.2013) no mobile browser really supports the getUserMedia API.
details here http://caniuse.com/#search=getusermedia

chrome for Android now supports getUserMedia (03.2014)

A bit not, but close. We need to capture “video” from the browser window. The user works with the corporate website and it would be very helpful for the support to see what the user sees. Maybe tell me which way to dig and is it possible at all?

check out the screenshot using webRTC (but it’s still very early on, only in chrome with the flag enabled) http://stackoverflow.com/questions/17542384/accomplish-screen-sharing-using-webrtc

Another solution is to write a browser extension. There you can definitely take screenshots and send them wherever you need;)

I try to copy the code, everything works out, but when I send it to the server and base64_decode, I get a black picture. What could be wrong?

before sending to server, try to embed base64 url ​​in img.

and see how it looks, if you are really sending a non-black image. If everything is ok, look for problems along the transmission or decoding path. specifically, unfortunately, I will not advise anything.

var base64dataUrl = canvas.toDataURL (‘image / png’);

if you substitute parameters, you get an error https://pp.vk.me/c623927/v623927444/1eae4/Dvb4PN_cGlc.jpg just fix it to

var base64dataUrl = canvas.toDataURL;

How to Find Vulnerable Webcam Feeds

Please tell me! When you save a transferred BASE64 image to the server, the wrong format is saved and is not displayed. Client:

Thank you for the article. I tested your program on firefox and chrome for Android. everything works. Please tell me how to get control of focus and other camera settings?

Thank you for the article. everything worked out with the video and works in mobile browsers.
but how can you make the audio recorded. well there, for example 5s after pressing the button. How can I then push this stream into an audio file. can you tell me?
well, or so that not just a screenshot was taken, but also say 5c video was saved to a file.

How to Allow or Block Camera Access in Google Chrome

Great stuff. It remains to decide how best to “kill” the video capture when it is no longer needed on the page.

And this is very simple:
Hang the handler on a button or somewhere else, and write:

Tell me how to access the main camera of a mobile phone? the front camera is enabled by default

And the second question, is it possible to allow the use of the default camera, and not ask the user about it every time?

Since the beginning of 2016 your demo stopped working in Chrome, it works in Mozille, what could be the problem?

As of Chrome 47, the getUserMedia API cannot be called from insecure origins.
Open link via https in Chrome.

Thanks for the detailed description. I hope you are engaged in this topic and have become an assistant over the years. To watch yourself in the browser, a lot of where is now written. But I can’t find how I can arrange a video show between two or more people. Type one shows, and several are watching. I did it on a flash with RED5, but soon they promise that it will not be. I would like to use the new HTML5, but not at all. Can you help or direct you to a useful place? Found only those who do it through their server. And I want to do it independently.