1

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

ckkaqa
  • 171
  • 1
  • 8

2 Answers2

1

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'

Community
  • 1
  • 1
Tintu C Raju
  • 2,700
  • 2
  • 21
  • 25
  • Hi Mr Tintu, this codes were very helpful . .I get to implement this plugin properly with codeigniter.. But the camera window has white screen .. No Image was loaded or lets say the camera of my laptop was not initiated by it. And I still get the same error when I click the button .. "The movie is not loaded".. Please help Thanks – ckkaqa Nov 18 '15 at 08:26
  • have you made the changes to webcam.js `swf_url: 'assets/js/cam/webcam.swf'` and copy `webcam.swf` into `assets/js/cam` – Tintu C Raju Nov 18 '15 at 08:35
  • yes. I remade a controller .. controller/camera.php, created view page, views/camera.php, and copied the resources to assets/js/cam directory and made changes to line 27 and 28 in webcam.js – ckkaqa Nov 18 '15 at 08:48
  • inspect the page you can see an error of `The movie is not loaded` with that you can see a url in red color. Copy that url and make sure that the file `webcam.swf` is available at that url. – Tintu C Raju Nov 18 '15 at 09:28
  • I found the error.. from 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' It is because of url to be used is by default is localhost/controller/method/ Thanks for the Help Mr Tintu – ckkaqa Nov 19 '15 at 01:33
1

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

ckkaqa
  • 171
  • 1
  • 8