yii-jpegcam Yii extension to embed a webcam and take photos

  1. Requirements
  2. Installation
  3. Widget usage
  4. Available parameters

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.


  • Yii 1.1 or above


  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(
                // 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
            setTimeout(function(){window.location = "index.php?r=user/index";},3000);
        else alert("PHP Error: " + msg);
      $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


The url to be called on taking the photo


Integer between 1 and 100.


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.


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


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


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


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


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

5 0
1 704 downloads
Yii Version: 1.1
License: BSD-2-Clause
Category: User Interface
Developed by: Attilio
Created on: Jun 9, 2011
Last updated: 13 years ago


show all

Related Extensions