Member Avatar for SimonIoa

Hello, i use a script that allows a user to take a photo. I use a Shockwave Flash Object (.swf) to open the camera and i don't want to do this.

How can i do it by callin' the browser prompt that ask you to open the camera?

This is how i call the .swf file

if(ID=='webcamButton')
        {
            $("#webcam").html("");
            $("#webcamContainer").fadeIn();
            $("#webcam").webcam({
            width: 320,
            height: 240,
            mode: "callback",
            swffile: baseUrl+"js/jscam_canvas_only.swf",
            onSave: saveCB,
            onCapture: function ()
            {
            webcam.save();
            },
            debug: function (type, string) {
            $("#webcam_status").html(type + ": " + string);
            }
            });
        }
 return false;
    });
  • 3 Contributors
  • 18 Replies
  • 1K Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by gentlemedia
Member Avatar for SimonIoa

Thanks @GentleMedia. The article on the last comment is marked as Deprecated though.

Member Avatar for gentlemedia

The article on the last comment is marked as Deprecated though.

Indeed! And that's why I posted that link to that article in that last comment to show that Navigator.getUserMedia() is deprecated and to use MediaDevices.getUserMedia() instead :)

Edited by gentlemedia
Member Avatar for 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>
Member Avatar for rproffitt

@Sim. I think this is an extension of another open thread you have going.

I'm guessing you want to do this to thwart fake registrations but as we can fake the camera (example at https://github.com/GhostFlying/image-to-camera ) then I can be anyone I want to be.

I'm not writing you should not follow your dreams, I'm writing that you need to think if it's all worth the trouble since it can be easily subverted.

Member Avatar for SimonIoa

I dont want to make a fake camera for an app. My project is a responsive website. I want a script that opens the camera and takes a photo. Not video.

Member Avatar for rproffitt

What you want may not be possible in all browsers and machines. That's one of our Holy Grail quests.

Somewhere you wrote this was to thwart fake registrations but I wanted to counter that it would be trivial for me to have a fake camera on my device to give you a false image. So you do all this work and folk can easily defeat it.

https://developers.google.com/web/fundamentals/native-hardware/capturing-images/ tells me you will not reach your goal of "Not video." I hope you'll read the link in this paragraph to see why you must open the camera and the user take the shot.

Member Avatar for SimonIoa

It works on Chrome, Mozilla, Opera but not on Safari and IE. I guess i was looking for the Holy Grail!

Member Avatar for rproffitt

I think you're getting it now. Be sure to see how the search for the Holy Grail ended in the movie by Monty Python.

Member Avatar for SimonIoa

I understand it, i just wanted to see it for my self. What happens in the end? i watched that movie 20 years ago. John Gleeze and the Monty Pythons were great. I mean is there a metaphore for cross browsing?

Edited by SimonIoa
Member Avatar for rproffitt

Cross browsing? I think you meant the old topic of Browser and Platform Compatibility. I've seen such quests and if you don't maintain a sense of humor and accept this as a silly quest you may be institionalized. Which is why I referenced the end of the Quest for the Holy Grail.

commented: +1 because somebody down-voted it probably because there is some humor in it +9
Member Avatar for SimonIoa

If i haven't had a sense of humor i could be offended by this. Anyway this goes off topic. I see nothing wrong about asking here and hoping to get something more. One may not knew that a script like this could play in all browsers.

Member Avatar for rproffitt

IE and Safari (why not test with Edge?) are problematic browsers. All we need to do is check caniuse.com and well, that's a deep well and Jimmy keeps getting stuck in the well.

-> At this point you have a solved for most browsers and have to see if this is, in the case of Safari something Apple just doesn't allow. One of the common complaints about Safari I've fielded is autoplay of videos. Apple relaxed that last year at https://webkit.org/blog/6784/new-video-policies-for-ios/

So be sure you are not beating your head against a Safari bulkhead.

Member Avatar for SimonIoa

It works on Edge too.

I want to ask one last thing. @gentleMedia said earlier that Navigator.getUserMedia() is deprecated and to use MediaDevices.getUserMedia() instead. navigator.mediaDevices.getUserMedia seems to be a global -if i am sayin this right- variable and when i replace navigator.mediaDevices.getUserMedia({video: true}) with MediaDevices.getUserMedia({video: true}) i am getting ReferenceError: Can't find variable: mediaDevices on Safari inspect element but when i use navigator.mediaDevices.getUserMedia({video: true}) i get TypeError: 'undefined' is not an object (evaluating 'navigator.mediaDevices.getUserMedia') on console

Same error i am getting when i am tryin to use a WebRTC script for capturing video

Edited by SimonIoa
Member Avatar for rproffitt

My advice is to close this topic as solved and start a new thread asking "How to capture image with Safari" and add the rest of your requirements.

Later in your script you use your browser detection to use the Chrome, IE, Edge and such code for those browsers and Safari code for Safari.

I would take bets you won't find one code to rule them all.

Member Avatar for gentlemedia

You can use this tiny library to detect WebRTC features such as getUserMedia so you can serve your fallback solution for those browsers which don't support it.
https://github.com/muaz-khan/DetectRTC

Edited by gentlemedia because: fixed English grammar or I made it even worse :)
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.