Yii 1.1: yii-jpegcam

Yii extension to embed a webcam and take photos
18 followers

Yii-jpegcam is a widget that wraps jpegcam, a Flash + Javascript library which allows you to display a variable-sized Flash movie in your page that captures Webcam snapshots (still frames), and submits them to your server in JPEG format.

Try the live demo.

Check the forum thread.

Follow the widget page on Github.com.

The .zip downloadable file includes a full-working Yii demo application that shows how to configure the view and the controller.

Requirements

  • Yii 1.1 or above

Installation

  1. Copy the jpegcam directory into protected/extensions directory
  2. Modify each Controller where you want to use the widget adding the actions() function in this way:
public function actions()
{
    return array(
        'jpegcam.'=> array(
            'class'=>'application.extensions.jpegcam.EJpegcam',
            'saveJpg'=>array(
                // This could be whatever
                'filepath'=> Yii::app()->basePath . "/../uploads/user_photo.jpg" 
            )
        )
    );
}

Widget usage

You can then call the widget in this way:

<?php $onBeforeSnap = "document.getElementById('upload_results').innerHTML = '<h1>Uploading...</h1>';";
      $completionHandler = <<<BLOCK
        if (msg == 'OK') {
            document.getElementById('upload_results').innerHTML = '<h1>OK! ...redirecting in 3 seconds</h1>';
 
            // reset camera for another shot
            webcam.reset();
            setTimeout(function(){window.location = "index.php?r=user/index";},3000);
        }
        else alert("PHP Error: " + msg);
BLOCK;
      $this->widget('application.extensions.jpegcam.EJpegcam', array(
            'apiUrl' => 'index.php?r=user/jpegcam.saveJpg',
            'shutterSound' => false,
            'stealth' => true,
            'buttons' => array(
                'configure' => 'Configure',
                'takesnapshot' => 'Take Snapshot!'
            ),
            'onBeforeSnap' => $onBeforeSnap,
            'completionHandler' => $completionHandler
        )); ?>

Available parameters

apiUrl

The url to be called on taking the photo

jpegQuality

Integer between 1 and 100.

shutterSound

Boolean to enable/disable the shutter sound. Defaults to 'shutter.mp3' If you give a string it will use it as filename of file to use for the sound.

stealth

Boolean to enable/disable the "stealth" mode (defaults to disabled). When enabled, this causes the image to be captured and uploaded without interrupting the video preview. Meaning, the snapshot is not "frozen", but instead the webcam video continues to be played.

camWidth and camHeight

Integer, the size in pixels of the flash object.

serverWidth and serverHeight

Integer, the size in pixels of the jpeg picture to save. Defaults to false, it means will use the same size as camWidth and camHeight

buttons

Associative array of buttons to show having:

  • $key = one of 'configure, takesnapshot, freeze, upload, reset'

  • $val = the string to show on the button

You usually use a combination of 'configure, takesnapshot' or 'configure, freeze, upload, reset'.

The available buttons are:

  • configure shows possible Flash options.

  • takesnapshot takes a photo and uploads to server

  • freeze takes a photo, but doesn't upload to server

  • upload uploads the picture in the frozen webcam

  • reset quits the frozen status of webcam

onBeforeSnap

Piece of JavaScript code to be executed before taking snapshot. It is called when 'takesnapshot' button gets clicked. See the example.

onBeforeUpload

Piece of JavaScript code to be executed before uploading the frozen picture to server. It is called when 'upload' button gets clicked.

completionHandler

Piece of JavaScript code to be executed after getting the response message from the server. See the example.

Total 3 comments

#15582 report it
khajaamin at 2013/11/25 12:24pm
movie not loaded yet . error is there on my localhost

Hi, please help me soon if you can . I am getting same error every time.

thanks in advance

#12375 report it
Nur Rochim at 2013/03/17 08:25am
AIMAGU

I LIKE THIS! Thanks

#9060 report it
ShiblY KhaN at 2012/07/17 08:15am
wow

Thanks a Great thing!

Leave a comment

Please to leave your comment.

Create extension