ScriptCam not working in CodeIgniter

ScriptCam not working in CodeIgniter

I just copy the  ScriptCam plugin to my server and outside the codeigniter "application" folder it works fine. I copyed the contents of the "demo2.htm" into a .php file and place it in the views folder   folder in the CI application and it doesn't work.

Any help is welcome,
Mike

  2.  <?php require_once('inc.php');?>

  4. <!DOCTYPE HTML>
  5. <html>
  6. <head>
  7. <title>Test</title>
  8. <meta charset="UTF-8">
  9. <meta name="viewport" content="width=device-width, initial-scale=1">

  11. <meta name="description" content="" >
  12. <meta name="keywords" content="" >
  13. <meta name="robots" content="index, follow" >
  14. <link rel="stylesheet" type="text/css" href="<?php echo site_url();?>css/styles.css" media="screen" >
  15.     <script language="JavaScript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  16. <script language="JavaScript" src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
  17. <script language="JavaScript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  18. <!-- Please download the JW Player plugin from http://www.longtailvideo.com/jw-player/download -->
  19. <!--<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>-->
  20. <script language="JavaScript" src="<?php echo site_url();?>js/lib/ScriptCam-master/scriptcam.js"></script>
  21. <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  22.   
  23. <script>
  24. $(document).ready(function() {
  25. $("#webcam").scriptcam({ 
  26. fileReady:fileReady,
  27. cornerRadius:20,
  28. cornerColor:'e3e5e2',
  29. onError:onError,
  30. promptWillShow:promptWillShow,
  31. showMicrophoneErrors:false,
  32. onWebcamReady:onWebcamReady,
  33. setVolume:setVolume,
  34. timeLeft:timeLeft,
  35. fileName:'Stella',
  36. connected:showRecord
  37. });
  38. setVolume(0);
  39. $("#slider").slider({ animate: true, min: 0, max: 100 , value: 50, orientation: 'vertical', disabled:true});
  40. $("#slider").bind( "slidechange", function(event, ui) {
  41. $.scriptcam.changeVolume($( "#slider" ).slider( "option", "value" ));
  42. });
  43. });
  44. function showRecord() {
  45. $( "#recordStartButton" ).attr( "disabled", false );
  46. }
  47. function startRecording() {
  48. $( "#recordStartButton" ).attr( "disabled", true );
  49. $( "#recordStopButton" ).attr( "disabled", false );
  50. $( "#recordPauseResumeButton" ).attr( "disabled", false );
  51. $.scriptcam.startRecording();
  52. }
  53. function closeCamera() {
  54. $("#slider").slider( "option", "disabled", true );
  55. $("#recordPauseResumeButton" ).attr( "disabled", true );
  56. $("#recordStopButton" ).attr( "disabled", true );
  57. $.scriptcam.closeCamera();
  58. $('#message').html('Please wait for the file conversion to finish...');
  59. }
  60. function pauseResumeCamera() {
  61. if ($( "#recordPauseResumeButton" ).html() == 'Pause Recording') {
  62. $( "#recordPauseResumeButton" ).html( "Resume Recording" );
  63. $.scriptcam.pauseRecording();
  64. }
  65. else {
  66. $( "#recordPauseResumeButton" ).html( "Pause Recording" );
  67. $.scriptcam.resumeRecording();
  68. }
  69. }
  70. function fileReady(fileName) {
  71. $('#recorder').hide();
  72. $('#message').html('This file is now dowloadable for five minutes over <a href='+fileName+'">here</a>.');
  73. var fileNameNoExtension=fileName.replace(".mp4", "");
  74. jwplayer("mediaplayer").setup({
  75. width:320,
  76. height:240,
  77. file: fileName,
  78. image: fileNameNoExtension+"_0000.jpg"
  79. });
  80. $('#mediaplayer').show();
  81. }
  82. function onError(errorId,errorMsg) {
  83. alert(errorMsg);
  84. }
  85. function onWebcamReady(cameraNames,camera,microphoneNames,microphone,volume) {
  86. $( "#slider" ).slider( "option", "disabled", false );
  87. $( "#slider" ).slider( "option", "value", volume );
  88. $.each(cameraNames, function(index, text) {
  89. $('#cameraNames').append( $('<option></option>').val(index).html(text) )
  90. }); 
  91. $('#cameraNames').val(camera);
  92. $.each(microphoneNames, function(index, text) {
  93. $('#microphoneNames').append( $('<option></option>').val(index).html(text) )
  94. }); 
  95. $('#microphoneNames').val(microphone);
  96. }
  97. function promptWillShow() {
  98. alert('A security dialog will be shown. Please click on ALLOW.');
  99. }
  100. function setVolume(value) {
  101. value=parseInt(32 * value / 100) + 1;
  102. for (var i=1; i < value; i++) {
  103. $('#LedBar' + i).css('visibility','visible');
  104. }
  105. for (i=value; i < 33; i++) {
  106. $('#LedBar' + i).css('visibility','hidden');
  107. }
  108. }
  109. function timeLeft(value) {
  110. $('#timeLeft').val(value);
  111. }
  112. function changeCamera() {
  113. $.scriptcam.changeCamera($('#cameraNames').val());
  114. }
  115. function changeMicrophone() {
  116. $.scriptcam.changeMicrophone($('#microphoneNames').val());
  117. }
  118. </script>


  121. </head>

  123. <body>
  124.  <?php PublicHeader();?>
  125. <section id="wrapper">


  128. <section>
  129.                  <h1>Main Menu</h1>    
  130.                   <div id="message"></div>
  131. <div id="recorder">
  132. <div id="webcam">
  133. </div>
  134. <div id="volumePanel" style="float:left;position:relative;top:10px;">
  135. <div id="volumeMeter" style="position:absolute;top:10px;left:7px;float:left;">
  136. <img id="LedBar32" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledred.png">
  137. <img id="LedBar31" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledred.png">
  138. <img id="LedBar30" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledred.png">
  139. <img id="LedBar29" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledred.png">
  140. <img id="LedBar28" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledred.png">
  141. <img id="LedBar27" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledred.png">
  142. <img id="LedBar26" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledred.png">
  143. <img id="LedBar25" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledred.png">
  144. <img id="LedBar24" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledred.png">
  145. <img id="LedBar23" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledred.png">
  146. <img id="LedBar22" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledred.png">
  147. <img id="LedBar21" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledred.png">
  148. <img id="LedBar20" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledgreen.png">
  149. <img id="LedBar19" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledgreen.png">
  150. <img id="LedBar18" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledgreen.png">
  151. <img id="LedBar17" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledgreen.png">
  152. <img id="LedBar16" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledgreen.png">
  153. <img id="LedBar15" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledgreen.png">
  154. <img id="LedBar14" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledgreen.png">
  155. <img id="LedBar13" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledgreen.png">
  156. <img id="LedBar12" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledgreen.png">
  157. <img id="LedBar11" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledgreen.png">
  158. <img id="LedBar10" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledgreen.png">
  159. <img id="LedBar9" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledgreen.png">
  160. <img id="LedBar8" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledgreen.png">
  161. <img id="LedBar7" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledgreen.png">
  162. <img id="LedBar6" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledgreen.png">
  163. <img id="LedBar5" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledgreen.png">
  164. <img id="LedBar4" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledgreen.png">
  165. <img id="LedBar3" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledgreen.png">
  166. <img id="LedBar2" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledgreen.png">
  167. <img id="LedBar1" src="<?php echo site_url();?>js/lib/ScriptCam-master/ledgreen.png">
  168. </div>
  169. <div id="slider" style="position:absolute;top:10px;left:30px;">
  170. </div>
  171. </div>
  172. <br clear="both"/>
  173. <div id="setupPanel">
  174. <img src="<?php echo site_url();?>js/lib/ScriptCam-master/webcamlogo.png" style="vertical-align:text-top"/>
  175. <select id="cameraNames" size="1" onChange="changeCamera()" style="width:145px;font-size:10px;height:25px;">
  176. </select>
  177. <img src="<?php echo site_url();?>js/lib/ScriptCam-master/miclogo.png" style="vertical-align:text-top;padding-left:45px;"/>
  178. <select id="microphoneNames" size="1" onChange="changeMicrophone()" style="width:128px;font-size:10px;height:25px;">
  179. </select>
  180. </div>
  181. <br/>
  182. <button id="recordStartButton" class="btn btn-small" onclick="startRecording()" disabled>Start Recording</button>&nbsp;
  183. <span style="padding-left:5px;padding-right:5px;">
  184. Time left:
  185. <input type="text" id="timeLeft" style="width:50px;font-size:10px;">&nbsp;
  186. </span>
  187. <button id="recordPauseResumeButton" class="btn btn-small" onclick="pauseResumeCamera()" disabled>Pause Recording</button>
  188. <button id="recordStopButton" class="btn btn-small" onclick="closeCamera()" disabled>Stop Recording</button>
  189. </div>
  190. <div id="mediaplayer" style="display:none;"></div>





  196. <!-- //////////////////////////////////////////// -->         
  197.            </section>
  198.            </section>

  200. </section>
  201. <?php PublicFooter();?>
  202. </body>

  204. </html>