leemeichin / say-cheese Goto Github PK

https://github.com/leemachin/say-cheese.git

var sayCheese = new SayCheese('#container-element', { snapshots: true });

sayCheese.on('start', function() {
// do something when started
this.takeSnapshot();
});

sayCheese.on('error', function(error) {
// handle errors, such as when a user denies the request to use the webcam,
// or when the getUserMedia API isn't supported
});

sayCheese.on('snapshot', function(snapshot) {
// do something with a snapshot canvas element, when taken
});

sayCheese.start();

how do i implement this to a bootstrapped website?

memo

[17:32:51.419] NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMMozURLProperty.createObjectURL] @ https://raw.github.com/leemachin/say-cheese/master/say-cheese.js:67

This happens. Investigate why (or if it's due to beta/pre-beta implementation)

Seems a bit of a waste to provide this functionality right off the bat, when you might just want the API abstraction.

Dear support,

since I updated to the newest version of Chrome 47.0.2526.80, saycheese does not recognize my builtin webcam anymore (worked fine a few days ago). I am using Windows 10

I tested in Microsoft Edge and in Mozilla and works fine there.

What could I do to make it work in the new version of Chrome.

I hope to hear from you soon.

Thanks already in advance,

Michael

i want to use webcam to take snapshots of the person signing up for my website .

Hi,

maybe I am reading the compatibility list wrong, but tried the demo on your home page on a couple android devices (chrome 33.x), and the camera freezes immediately after the first frame, so that all snapshots have the same image content. Also, it uses preminently the front camera instead of the main one.

No problems whatsoever on Chrome on my laptop, though. I guess this is more a question about correct usage than a bug - can you advise?

Thanks

Hello there,

I wondering: is also possibile to take the audio recorded data?

I mean, I'd want to take the audio streaming and then upload it as soundmanager does with flash.

thanks

The script calls method 'getStreamUrl()' on line 159

It displays the following error message on console:
'say-cheese.js:86 Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
at SayCheese.getStreamUrl (say-cheese.js:86)
at SayCheese.success (say-cheese.js:159)'

The method 'getStreamUrl' calls deprecated method createObjectURL on line 86.

I am not able to test this using Chrome 49.0.

Console shows the following message:
getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.

Thank you,
Marco

Meemoo's cam module (source, demo) uses a CameraAPI alternative for choosing an image file from the file system or taking an image with the mobile camera (works in the latest iOS).

I could help integrate this if you like.

Hello! I'm developing an angular wrapper to use say-cheese as a component. Not only for this reason but I felt the need to find this script published in the npm for ease of use.

Could you publish?

Find a way to remove the dependency on jQuery, while still keeping the basic event handling and object cloning that relies on it, and without introducing any replacement dependencies.

Suggestions:

1. Don't need full on deep object cloning for options. Get rid of it.
2. Look at how other event libs (or jQuery) handle events on things that aren't DOM elements

Not a 'bug' per se, but it would be great to have simple documentation on how to end up with a .jpg file on the server/at least posted to the server – I suspect that is the question that most people will want to know.

Great project by the way – I'm sure many people still aren't aware that this sort of things is possible!

It would be nice if we could have on('data'), function(data) { ... to use data on streaming

I only need a little 100x100 snapshot from the webcam but I end up with a 640x480 screen every time and it's sometimes 500k in size. Is there any way to define a smaller canvas to get the dataURL from?

It seems like tweaking the video size in the .createVideo() method only changes the size of the video as displayed in the browser, but the snapshot is still the same 640x480. I'm guessing it's going to require some canvas magic?

Thanks,
Rob

Hi @leemachin , I'm using firefox's release channel, and my cur version is 17.0.1

I can find navigator.mozGetUserMedia in dom. and i find these docs/pages below:

• https://developer.mozilla.org/en-US/docs/WebRTC/navigator.getUserMedia
• https://hacks.mozilla.org/2012/07/getusermedia-is-ready-to-roll/

it will be very good if you can make a polyfill arround the prefix.

Hi LeeMachin, How do I get when I click to take the picture I save that image to disk?

In the say-cheese.js set video width code for video element is:
this.video.style.width = width
this.video.style.height = height
this is not work!
must be:
this.video.width = width
this.video.height = height

Fallback capture using a hidden flash object for browsers not supporting the webcam API such as IE.

How to destroy instance or empty snapshot data?

You have to use HTTPS/SSL to be able to use getUserMedia() from Chrome 47+. I get this in the console when running the demo.

getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.

Tengo un problema con saycheese ya que no me da ningún link para enviar a la victima

Hello Sir,
I am using this pluging into my app, I need snap-shots captured by WebCam, process via using jquery $Ajax and display those images on another page.
Please let me know how i can implement it into Ajax? any example?

Hi Leemachin, first thanks a lot, I loved it.

Second, when I record... the data in the DB is coming as a .bin file... Any thoughts on that?
I'm using it on a codeigniter system.

Here is my View

    <style type="text/css">

        #content{
            margin: 0 auto;
            width: 1000px;
            position: relative;

        }

        .fotografia{
            width: 320px;
            height: 240px;
            border: 20px solid #333;
            background: #eee;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            border-radius: 20px;
            position: relative;
            margin-top: 50px;
            margin-bottom: 50px;

        }

        .marca {
            z-index: 2;
            position: absolute;
            color: #eee;
            font-size: 10px;
            bottom: -16px;
            left: 152px;

        }

        #obturador,#guardarFoto{
            padding: 10px;
            border: 1px solid;
            background-color: #444;
            color: #fff;
            cursor: pointer;
            margin-left: 50px;

        }


    </style>
</head>

<body>
    <div id="content">
        <div style="float:left;width:50%">
            <div id="webcam" class="fotografia">
                <span class="marca">tutoriales.com</span>
            </div>
        </div>
        <div style="float:left;width:50%">
            <div id="say-cheese-snapshots" class="fotografia">
                <span class="marca">Snapshots</span>

            </div>
        </div>
        <div style="clear:both"></div>

        <div style="float:left;width:50%">
            <span id="obturador">Tomar foto</span>
        </div>

        <div style="float:left;width:50%">
            <span id="guardarFoto">Guardar Foto</span>
        </div>

        <div class="fotografia">
            <img id="fotoGuardada" src="" style="display:none" />
            <span class="marca">Foto Armazenada</span>

        </div>

    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script src="<?php echo base_url() ?>assets/js/say-cheese.js"></script>
    <script type="text/javascript">
       var img=null;
       var sayCheese = new SayCheese('#webcam',{snapshots: true});

       sayCheese.start();

       $('#obturador').bind('click', function(e){
           sayCheese.takeSnapshot(320,240);
           return false;
       });

       sayCheese.on('snapshot', function(snapshot){
           img = document.createElement('img');

           $(img).on('load', function(){
               $('#say-cheese-snapshots').html(img);
           });
           img.src = snapshot.toDataURL('image/png');
       });

        $('#guardarFoto').on('click', function(canvas){
         var src = img.src;
         alert("#guardarFoto clicked!");
         data = {
             src: src
         };
         $.ajax({
             url: '<?php echo base_url() ?>webcam/ajax',
             data: data,
             type: 'post',
             sucess: function(respuesta) {
                 $('#fotoGuardada').attr('src', respuesta).show(500);
             }
         });
        });


    </script>
</body>

Here is my controller

Is there any way to rotate the image before it has been shown for users, and before save?
I mean: the camera is up side down, and i'd like to flip the image before and after shoot, too. Is it possible?

In chrome version 53, this error apear when I try to take a picture.

Hello and thank you for Say-cheese,

I had an issue on android with both my SIII and nexus 9, the video stream wasn't playing and i got a single "freeze" with the first captured image. I've simply added this.video.autoplay=true; on line 92 and it solved the problem.

KR,

Vincent

On mobile screen the image is captured automatically without a button click, as soon as the camera is initialized. how to fix this, want user to click a button to take picture

No longer works in http without ssl.

getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.