0

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.

4
Contributors
11
Replies
73
Views
6 Months
Discussion Span
Last Post by rproffitt
Featured Replies
  • 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 … Read More

  • > 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 … Read More

0

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..

0

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.

Edited by gentlemedia

1

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.

Votes + Comments
Nice one! Wasn't aware of Navigator.getUserMedia()
1

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

Votes + Comments
That's a good idea
0

@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?

Edited by Stefan_1

0

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>

Edited by SimonIoa

0

@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.

Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.