Open mobile camera through web browser

[Stefce]

Hello, is there any way of accessing mobile camera through my website? I want to open mobile camera through my website and take a picture and upload to server. Something similar to viber, when you install the app in your desktop they ask you to scan the QR code to access it, and imediately the camera opens on your phone. Any help will be appreciated.

[gentlemedia]

You'll need a wrapper with something like PhoneGap or Cordova. You can't do this yet at the moment with HTML5. They're still workiong on a HTML5 device API. https://www.w3.org/2009/dap/
https://www.w3.org/TR/image-capture/

[Stefce]

Are they making authorising system ? Because i though to make the same damn thing.. :P
So for example user want to register on my site, he fill up the form and pressing the register button, the phone camera opens automaticly and im asking to take a selfie to make sure its she/he..

[gentlemedia]

Are they making authorising system ?

No, I mean the W3C is working on a standard/recommendation for this. The HTML5 Device and Sensors API.

So for example user want to register on my site, he fill up the form and pressing the register button, the phone camera opens automaticly

You can't control the camera of your users phones yet unless you create something with PhoneGap or the likes, so that your website becomes a hybrid app.

[rproffitt]

That's a lot of things you need to code up. However I just tried https://codepen.io/justinklemm/pen/cDrFo on Chrome on my LG G4 Android phone and after I let it use the camera, I had a video feed onscreen from the camera.

So, my advice is to divide up what you need to do and to tackle this step by step.

[Stefce]

Can this be made into plugin or something to be used globaly? Because i think it will be game changer on user registrating and it will reduce fake user registration on websites. Even for better security you will ask the user to blink twice to make sure its real human :P

[Stefce]

@JamesCherrill thank you actualy i have a few more, also for daniweb community :D

@rproffitt This code is great and works when i visit the link on my phone too, but i copy and paste it on my server and doesn't work?

[gentlemedia]

This code is great and works when i visit the link on my phone too, but i copy and paste it on my server and doesn't work?

Did you include the jQuery library on your page?

Also be cautious when using Navigator.getUserMedia(). It could be deprecated in the furure and it's recommended to use MediaDevices.getUserMedia() instead.
https://developer.mozilla.org/en/docs/Web/API/Navigator/getUserMedia

[SimonIoa]

I want to ask another thing. Why the .swf file doesn't play online ? Locally plays as wanted. Its a Flash thing, right?

I am trying to implement it to my existing code. Ι want to take the id of the photo taken so that i can pass it to my php code to save it. but i am getting errors

$("body").on("click",'.updateControl2',function()
    {
    var video = document.getElementById('webcamButton');

    if(video)
    {
            $("#webcam").html("");
            $("#webcamContainer").fadeIn();
            $("#webcam").webcam({
            width: 320,
            height: 240,

            // Get access to the camera!
                // Not adding `{ audio: true }` since we only want video now
                navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                }),
            onSave: saveCB,
            onCapture: function ()
            {
            webcam.save();
            },
            debug: function (type, string) {
            $("#webcam_status").html(type + ": " + string);
            }
            });
        }
 return false;
    });

<div id="webcam_preview"></div>
            <a href="javascript:void(0);" class="updateControl2" id="webcamButton" title="Open Camera"><span class="boxWebcam wallbutton">Open Camera</span></a><br /><br /><br />
                <div class="padding10 blockControl displaynone" id="webcamContainer">
                    <div>
                        <div id="webcam">
                        </div>
                    </div>
                    <div id='webcam_status' style="clear:both" ></div>
                    <div id='webcam_takesnap'>
                        <input type="button" value=" Take a Photo " id="takeSnap" class="camclick  wallbutton"/>
                        <input type="hidden" id="webcam_count" />
                    </div>
                </div>
            </div>

[rproffitt]

@Sim. I was careful to write which browser I used on my LG G4. There are browsers that come with the phones and most are limited. So you have to test what does and does not work on each browser and each phone.

[SimonIoa]

i used it on Desktop mode. Mozilla browser

[rproffitt]

@Sim, then you found an use case where it doesn't work. Either recode or try other use cases.