yii-jpegcam Follow @yiiframework

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.