Интеграция веб-камеры и JS на Codeigniter
Я попытался исследовать и прочитать много статей по этой проблеме.
У меня есть красный, но обсуждение, кажется, заканчивается без решения
Так что проблема в том, что я не могу показать камеру в своем приложении 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">
<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>
Я использовал этот демонстрационный пакет, и он хорошо работает, если я просто распаковываю его на localhost. https://app.box.com/s/nkhgrj73fvutaj6dfspf
Но когда я пытался интегрировать его в CI, окна камеры показывались пустыми. И когда я попытался использовать функцию веб-камеры js, такую как webcam.configure () .. Он говорит, что фильм еще не загружен
Jhunnie
Решение
Просто скопировав вставку, вы не сможете реализовать это на 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">
<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, сделать 2 небольших изменения в 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’
Другие решения
От г-на Тинту Ответ Добавлено несколько изменений
Просто скопировав вставку, вы не сможете реализовать это на codeigniter. Причина ошибки Это говорит о том, что фильм не загружен, но webcam.swf не загружен. на самом деле этот флэш-файл — важная составляющая функциональности веб-камеры.
создать новое приложение контроллера \ 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') );
}
}
?>
создать новое представление приложения \ 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">
<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. сделать 2 небольших изменения в webcam.js
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-адрес важен и будет отличаться. По моему опыту лучше проверять URL-адрес .swf через Google Chrome, чем Firefox. Добавил «../», чтобы перейти на одну папку вверх, чтобы вы оказались в корневой папке приложения. получить доступ к папке активов
ура
Кредиты мистеру Тинту Раджу