Php Codeigniter上的网络摄像头js集成
我试图研究和阅读很多关于这个问题的文章 我有一些红色，但讨论似乎还没有解决方案就结束了 所以问题是，我无法在我的CI应用程序上显示摄像头，但当我只是复制准确的代码并将其粘贴到本地主机上而不使用任何框架时，它就可以工作了 这是我的CI代码Php Codeigniter上的网络摄像头js集成,php,codeigniter,webcam.js,Php,Codeigniter,Webcam.js,我试图研究和阅读很多关于这个问题的文章 我有一些红色，但讨论似乎还没有解决方案就结束了 所以问题是，我无法在我的CI应用程序上显示摄像头，但当我只是复制准确的代码并将其粘贴到本地主机上而不使用任何框架时，它就可以工作了 这是我的CI代码 <script type="text/javascript" src="<?=base_url('assets/js/cam/webcam.js')?>"></script> <script la
<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">
<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>
通过简单的复制粘贴，您无法在codeigniter上实现它。错误原因
表示电影尚未加载是网络摄像头。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') );
}
}
?>
<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">
<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\u url:'shutter.mp3'
改为
line number 27 : swf_url: '../assets/js/cam/webcam.swf'
line number 28 : shutter_url: '../assets/js/cam/shutter.mp3'
第27行：swf_url:'assets/js/cam/webcam.swf'
第28行：shutter_url:'assets/js/cam/shutter.mp3'
Tintu先生的回答补充了一些修改
通过简单地复制粘贴，您无法在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') );
}
}
?>
改为
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比通过firefox更好。。添加了“../”以进入一个文件夹，使您可以在根应用程序文件夹中访问资产文件夹
干杯
Tintu Raju先生的功劳检查您的控制台。您将收到错误消息。错误消息是：TypeError:this.get_movie（…）未定义Hi Tintu先生，这些代码非常有用。我用codeigniter正确地实现了这个插件。。但是摄像机的窗口是白色的。。没有加载图像，或者说我的笔记本电脑的摄像头不是由它启动的。当我点击按钮时仍然会出现同样的错误。。“电影未加载”。。请帮助感谢您对webcam.jsswf\u url:'assets/js/cam/webcam.swf'
所做的更改，并将webcam.swf
复制到assets/js/cam
是。我重新制作了一个控制器。。controller/camera.php，创建了view页面，views/camera.php，并将资源复制到assets/js/cam目录，并对webcam.js中的第27行和第28行进行了更改。检查页面时，您会看到未加载电影的错误
，您可以看到红色的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”第28行：shutter_url:“../assets/js/cam/shutter.mp3”这是因为默认情况下使用的url是localhost/controller/method/感谢Mr先生的帮助廷图
line number 27 : swf_url: '../assets/js/cam/webcam.swf'
line number 28 : shutter_url: '../assets/js/cam/shutter.mp3'