【问题标题】:Webcam js integration on CodeigniterCodeigniter 上的网络摄像头 js 集成
【发布时间】:2016-02-19 16:39:05
【问题描述】:

我尝试研究并阅读了很多关于这个问题的文章

我有一些红色,但讨论似乎没有解决方案就结束了

所以问题是我无法在我的 CI 应用程序上显示相机,但是当我只是复制确切的代码并将其粘贴到我的本地主机而不使用任何框架时它可以工作。

这是我的 CI 代码

    <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>

我使用了这个演示包,如果我将它解压到本地主机,它运行良好。 https://app.box.com/s/nkhgrj73fvutaj6dfspf

但是当我尝试将它集成到 CI 时,相机窗口显示空白。当我尝试使用 webcam.configure() 等网络摄像头 js 功能时,它说电影尚未加载

俊妮

【问题讨论】:

  • 检查您的控制台。您将收到错误消息。
  • 错误信息是:TypeError: this.get_movie(...) is undefined

标签: php codeigniter webcam.js


【解决方案1】:

通过简单的复制粘贴,您无法在 codeigniter 上实现它。错误It says the Movie is not loaded yet 背后的原因是webcam.swf 未加载。实际上,flash 文件是网络摄像头功能背后的重要内容。

创建新控制器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') );

        }
    }

?>

创建新视图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>

现在将webcam.js,shutter.mp3,webcam.swf 复制到assets/js/cam。对webcam.js进行2个小改动

第 27 行:swf_url: 'webcam.swf'

第 28 行:shutter_url: 'shutter.mp3'

改成

第 27 行:swf_url: 'assets/js/cam/webcam.swf'

第 28 行:shutter_url: 'assets/js/cam/shutter.mp3'

【讨论】:

  • 您好 Tintu 先生,这些代码非常有用。 .我可以用codeigniter正确实现这个插件..但是相机窗口有白屏..没有加载图像或者说我的笔记本电脑的相机不是由它启动的。当我点击按钮时我仍然得到同样的错误..“电影未加载”..请帮助谢谢
  • 您是否对 webcam.js swf_url: 'assets/js/cam/webcam.swf' 进行了更改并将webcam.swf 复制到assets/js/cam
  • 是的。我重新制作了一个控制器 ..controller/camera.php,创建了视图页面,views/camera.php,并将资源复制到 assets/js/cam 目录,并对 webcam.js 中的第 27 行和第 28 行进行了更改
  • 检查页面你可以看到The movie is not loaded的错误,你可以看到一个红色的url。复制该 url 并确保文件 webcam.swf 在该 url 可用。
  • 我从 webcam.js 第 27 行发现错误:swf_url:'webcam.swf' 第 28 行:shutter_url:'shutter.mp3' 更改为第 27 行:swf_url:'。 ./assets/js/cam/webcam.swf' line number 28 : shutter_url: '../assets/js/cam/shutter.mp3' 这是因为要使用的url默认是localhost/controller/method/感谢廷图先生的帮助
【解决方案2】:

来自廷图先生的回答添加了一些修订

通过简单的复制粘贴,您无法在 codeigniter 上实现它。错误背后的原因 它说电影尚未加载是 webcam.swf 未加载。实际上,Flash 文件是网络摄像头功能背后的重要内容。

新建控制器应用\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') );

        }
    }

?>

创建新视图 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>

现在将 webcam.js,shutter.mp3,webcam.swf 复制到 assets/js/cam。在 webcam.js 中做 2 个小改动

line number 27 : swf_url: 'webcam.swf'

line number 28 : shutter_url: 'shutter.mp3'

改成

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

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

注意:这个 Url 很重要,并且会有所不同。根据我的经验,通过 google chrome 检查 .swf url exstince 比通过 firefox 更好。添加“../”以向上一个文件夹供您进入根应用文件夹访问资产文件夹

干杯

感谢 Tintu Raju 先生

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-01-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-10-02
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多