johnson/yii2-webcam

Capture and upload the image through system / Mobile web cam basic html5 native features.

Yii 2 - Web cam input

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.. LOL., _(*1)

Note:

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., _(*2)

Installation

The preferred way to install this extension is through composer., _(*3)

Either run, _(*4)

php composer.phar require --prefer-dist johnson/yii2-webcam "*", _(*5)

or add, _(*6)

"johnson/yii2-webcam": "*", _(*7)

to the require section of your composer.json file., _(*8)

Usage

Once the extension is installed, simply use it in your code by :, _(*9)

<?= \Johnson\JayWebcam::widget(); ?>

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., _(*10)

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., _(*11)

For Example: PHP Code, _(*12)

<?= \Johnson\JayWebcam::widget(['id' => $YourID,'imgID' => $imgID]); ?>

HTML Code, _(*13)

<input type="hidden" id="<?= $YourID ?>">

<img src="" id="<? $imgID ?>" class="thumbnail">

After clicking the snapshot the value attribute will be assigned to the given element based on ID., _(*14)

Example image output :, _(*15)

"data:image/png;base64,ASF9D8ASDF89ASDFHA8S9DFH98ADS....", _(*16)

The following link may help to save the file to web server, _(*17)

https://gist.github.com/fazlurr/9802071, _(*18)