Yii2 – Webcam

Capture and upload the image through system / Mobile web cam basic html5 native features. The current release only captures the image from webcam and shows the image in a div. If the desktop does not has webcam obviously can’t use this extension any more..


In the localhost chrome browser may not work due to https restrictions. When it goes to production the web app must be in https to work at all platforms. You may test the functionality at FireFox browser.


The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist johnson/yii2-webcam "*"

or add

"johnson/yii2-webcam": "*"

to the require section of your composer.json file.


Once the extension is installed, simply use it in your code by :

If you pass the ID of the input element then the base64 encoded image data will be stored in the “value” attribute of the element after taking the snapshot.

If you want to show the thumbnail to the users then you can give the “imgID” property i.e the tag id attribute value. Then the widget will assign the base64 encoded image into the element.

For Example: PHP Code


After clicking the snapshot the value attribute will be assigned to the given element based on ID.

Example image output :


Function to save base64 image to png with PHP



Prakash S

Prakash S

I would like to introduce myself as a Software professional opting for the career in software industry. I'm Prakash S, a MCA graduate and trained as industry level practice for Software technology. Basically I am a PHP Developer but now days exploring more in HTML5, CSS, AngularJS and jQuery libraries.