Webcam js integration on Codeigniter

I tried to research and read a lot of articles regarding this problem

I have red some but the discussion seems to end without the solution yet

So the problem is I cannot get to show the camera on my CI app, but when I just copy the exact codes and paste it in my localhost without using any frame work it works.

Here is my CI code

    <script type="text/javascript" src="<?=base_url('assets/js/cam/webcam.js')?>"></script>
        <script language="JavaScript">
                document.write( webcam.get_html(440, 240) );
        </script>
        <form>
        <br />

            <input type=button value="Configure settings" onClick="webcam.configure()" class="shiva">
            &nbsp;&nbsp;
            <input type=button value="snap" onClick="take_snapshot()" class="shiva">
        </form>


<script  type="text/javascript">
    webcam.set_api_url( "<?=base_url('assets/js/cam/handleimage.php')?>");
        webcam.set_quality( 90 ); // JPEG quality (1 - 100)
        webcam.set_shutter_sound( true, "<?=base_url('assets/js/cam/shutter.mp3')?>" ); // play shutter click sound
        webcam.set_hook( 'onComplete', 'my_completion_handler' );
        function take_snapshot(){
            // take snapshot and upload to server
            document.getElementById('img').innerHTML = '<h1>Uploading...</h1>';

            webcam.snap();
        }

        function my_completion_handler(msg) {
            // extract URL out of PHP output
            if (msg.match(/(http\:\/\/\S+)/)) {
                // show JPEG image in page

                document.getElementById('img').innerHTML ='<h3>Upload Successfuly done</h3>'+msg;

                document.getElementById('img').innerHTML ="<img src="+msg+" class=\"img\">";


                // reset camera for another shot
                webcam.reset();
            }
            else {alert("Error occured we are trying to fix now: " + msg); }
        }
    </script>

I used this demo package and its working well if I just extract it to localhost. https://app.box.com/s/nkhgrj73fvutaj6dfspf

But when I tried to integrate it to CI the camera windows show blank . And when I tried to use webcam js function such as webcam.configure() .. It says the Movie is not loaded yet

Jhunnie

Solution

From Mr Tintu Answer Added some revisions

By simply copy paste you cannot implement it on codeigniter. Reason behind the error It says the Movie is not loaded yet is webcam.swf is not loaded. actually that flash file is the important thing behind the webcam functionality.

create new controller application\controllers\camera.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

    class Camera extends CI_Controller {

        public function index(){
            $this->load->helper('url');
            $this->load->view("camera");

        }


        public function saveImage(){

            /*write your own code to save to your database*/        
            $newname = "some_name.png"; 
            file_put_contents( $newname, file_get_contents('php://input') );

        }
    }

?>

create new view application\views\camera.php

<style type="text/css">
    body {
        margin: 0;
        padding: 0;
    }

    .img {
        background: #ffffff;
        padding: 12px;
        border: 1px solid #999999;
    }

    .shiva {
        -moz-user-select: none;
        background: #2A49A5;
        border: 1px solid #082783;
        box-shadow: 0 1px #4C6BC7 inset;
        color: white;
        padding: 3px 5px;
        text-decoration: none;
        text-shadow: 0 -1px 0 #082783;
        font: 12px Verdana, sans-serif;
    }
</style>
<html>

<body style="background-color:#dfe3ee;">
    <div id="outer" style="margin:0px; width:100%; height:90px;background-color:#3B5998;">
    </div>
    <div id="main" style="height:800px; width:100%">
        <div id="content" style="float:left; width:500px; margin-left:50px; margin-top:20px;" align="center">

            <script type="text/javascript" src="<?php echo base_url();?>assets/js/cam/webcam.js"></script>
            <script language="JavaScript">
                document.write(webcam.get_html(440, 240));
            </script>
            <form>
                <br />
                <input type=button value="Configure settings" onClick="webcam.configure()" class="shiva"> &nbsp;&nbsp;
                <input type=button value="snap" onClick="take_snapshot()" class="shiva">
            </form>
        </div>

        <script type="text/javascript">
            webcam.set_api_url('<?php echo base_url();?>camera/saveImage');
            webcam.set_quality(90);
            webcam.set_shutter_sound(true);
            webcam.set_hook('onComplete', 'my_completion_handler');

            function take_snapshot() {
                document.getElementById('img').innerHTML = '<h1>Uploading...</h1>';
                webcam.snap();
            }

            function my_completion_handler(msg) {
                if (msg.match(/(http\:\/\/\S+)/)) {
                    document.getElementById('img').innerHTML = '<h3>Upload Successfuly done</h3>' + msg;

                    document.getElementById('img').innerHTML = "<img src=" + msg + " class=\"img\">";
                    webcam.reset();
                } else {
                    alert("Error occured we are trying to fix now: " + msg);
                }
            }
        </script>

        <div id="img" style=" height:800px; width:500px; float:left; margin-left:40px; margin-top:20px;">
        </div>
    </div>
</body>

</html>

Now copy webcam.js,shutter.mp3,webcam.swf to assets/js/cam. make 2 small changes in webcam.js

line number 27 : swf_url: 'webcam.swf'

line number 28 : shutter_url: 'shutter.mp3'

change to

line number 27 : swf_url: '../assets/js/cam/webcam.swf'

line number 28 : shutter_url: '../assets/js/cam/shutter.mp3'

note: that this Url is important and will differ.. Its better checking the .swf url exstince via google chrome than firefox from my experience.. added '../' to go up one folder for you to be in the root app folder to access assets folder

Cheers

Credits to Mr. Tintu Raju