Blog

How to store image directly from webcam to database in codeigniter ?

HOW TO CAPTURE IMAGE FROM WEBCAM AND THEN STORE IN DATABASE IN CODEIGNITER ?

Created by Bhagyashri Vibhandik on Date: 30/10/2018

STEPS TO STORE IMAGE DIRECTLY FROM WEBCAM TO DATABASE IN CODEIGNITER
  1. Create Database with image_master table for our Example.
  2. CREATE TABLE `image_master` (
    `ID` int(11) NOT NULL,
    `image` varchar(255) NOT NULL,
    ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
    ALTER TABLE `image_master` ADD PRIMARY KEY (`ID`);
    ALTER TABLE `image_master` MODIFY `ID` int(11) NOT NULL AUTO_INCREMENT;

  3. Now create View Page name take_picture.php and put below code in it.
  4. <div class="col-sm-3 col-md-offset-3 no-print">
    <div class="clearfix" id="my_camera"></div><br/>
    <button type="button" class="btn btn-info" onClick="take_snapshot()">
    <i class="fa fa-camera fa-fw"></i>Capture
    </button>
    <div class="col-md-3 col-md-offset-1 imager" id="results">
    <h3>Visitors Photo</h3>
    </div>
    </div>

    <script type="text/javascript" src=”https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.min.js ”></script>

    <script language="JavaScript">
    Webcam.set({
    width: 500,
    height: 300,
    dest_width: 200,
    dest_height: 180,
    image_format: 'jpeg',
    jpeg_quality: 90
    });
    Webcam.attach('#my_camera');
    </script>

    <script language="JavaScript">
    function take_snapshot() {
    Webcam.snap(function (data_uri) {
    document.getElementById('results').innerHTML = '<h2>Here is your image:</h2>' + '<img src="' + data_uri + '"/>';
    Webcam.upload( data_uri, '<?php echo base_url('Image/controlerfunctiontoupload'); ?>', function(code, text) {
    if (code == '200') { alert ('ok'); }
    else { alert('error'); }
    });
    });
    }
    </script>

  5. Create Controller Name Image and Then create following methods in it.
  6. class Image extends CI_Controller {
    public function __construct ( ) {
    parent::__construct ( );
    $this->load->model('Image_m');
    }
    public function index() {
    $this->load->view('take_picture');
    }
    public function controlerfunctiontoupload() {
    $filename=date('Ymdhis');
    $filepath=FCPATH.'userfiles/'.$filename;
    $result=move_uploaded_file($_FILES['webcam']['tmp_name'], $filepath);
    $this->Image_m->saveImage($filename);
    }
    }

  7. Create Model Image_m.php in application/model with following function.
  8. function saveImage($filename) {
    $this->db->from('files');
    $this->db->set('image', $filename);
    $this->db->insert('image_master');
    }