How to open the webcam on a local machine for a php page on the server?

Question

People I’m trying to create a page in Chrome that opens the webcam I’m using the webcam.js library in IE11 the code works but in Chrome and firefox does not appear the message Movie is not Loaded yet in both browsers and does not open the webcam you have already had this problem.

follows the code I’m using:

index php.

<style type="text/css">
    /* jQuery lightBox plugin - Gallery style */
    #cuadro_camara {
        background-color: #444;
        padding-left: 30px;
        padding-top:20px;
    }
    #titulo_camara {
    background-color: #666;
    color:#FFF;
    padding-left: 30px;
    font-size: 14px;
    text-align:center;
    }
    .botones_cam {
        background-color:#FFF;
        color:#333;
        font-family: "Comic Sans MS", cursive;
        font-size:14px;
        margin-top:10px;
        width:100px;
        height:40px;
    }
    .formulario {
        color: #FFF;
    }

    </style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="webcam.js"></script>
    <script language="JavaScript">
        webcam.set_api_url( 'test.php' );//PHP adonde va a recibir la imagen y la va a guardar en el servidor
        webcam.set_quality( 90 ); // calidad de la imagen
        webcam.set_shutter_sound( true ); // Sonido de flash
    </script>
        <script language="JavaScript">
        webcam.set_hook( 'onComplete', 'my_completion_handler' );

        function do_upload() {
            // subir al servidor
            document.getElementById('upload_results').innerHTML = '<h1>Cargando al servidor...</h1>';
            webcam.upload();
        }

        function my_completion_handler(msg) {

            if (msg.match(/(http\:\/\/\S+)/)) {
                var image_url = RegExp.$1;//respuesta de text.php que contiene la direccion url de la imagen

                // Muestra la imagen en la pantalla
                document.getElementById('upload_results').innerHTML = 
                    '<img src="' + image_url + '">'+
                    '<form action="gestion_foto.php" method="post">'+
                    '<input type="hidden" name="id_foto" id="id_foto" value="' + image_url + '"  /><br>'+
                    '<label>Nombre </label><input type="text" name="nombre_foto" id="nombre_foto"/>'+
                    '<label>Descripcion </label><input type="text" name="des" id="des"/>'+
                    '<input type="submit" name="button" id="button" value="Enviar" /></form>'
                    ;
                // reset camera for another shot
                webcam.reset();
            }
            else alert("PHP Error: " + msg);
        }
    </script>
<div align="left" id="cuadro_camara">    

<table width="100%" height="144"><tr><td width="100" valign=top>
        <form>
        <input type=button value="Configurar" onClick="webcam.configure()" class="botones_cam">
        &nbsp;&nbsp;
        <input type=button value="Tomar foto" onClick="webcam.freeze()" class="botones_cam">
        &nbsp;&nbsp;
        <input type=button value="subir" onClick="do_upload()" class="botones_cam">
        &nbsp;&nbsp;
        <input type=button value="Reset" onClick="webcam.reset()" class="botones_cam">
    </form>

    </td>
    <td width="263" valign=top>
    <script language="JavaScript">
    document.write( webcam.get_html(320, 240) );//dimensiones de la camara
    </script>
    </td>
    <td width=411>
        <div id="upload_results" class="formulario" > </div>
  </td></tr></table><br /><br />
</div>



<br />
<br />
<script type="text/javascript">
    $(function() {
        $('#gallery a').lightBox();//Galeria jquery
    });
    </script>
    <style type="text/css">
    /* jQuery lightBox plugin - Gallery style */
    #gallery {
        background-color: #444;
        width: 100%;
    }
    #gallery ul { list-style: none; }
    #gallery ul li { display: inline; }
    #gallery ul img {
        border: 5px solid #3e3e3e;
        border-width: 5px 5px 5px;
    }
    #gallery ul a:hover img {
        border: 5px solid #fff;
        border-width: 5px 5px 5px;
        color: #fff;
    }
    #gallery ul a:hover { color: #fff; }
    </style>

    <div id="gallery">
    <ul>
  <?php  

  include("clase_conexion.php");
  $consulta="select * from fotos order by id_foto desc";
  $busca_fotos=mysql_query($consulta,$c);
  while($ro=mysql_fetch_array($busca_fotos)){
   $url=$ro['id_foto'];  
   $nombre=$ro['nombre']; 
     $des=$ro['des'];
     echo "<li>

            <a href=\"fotos/".$url.".jpg\" title=\"$nombre - $des\">

                <img src=\"fotos/".$url.".jpg\" width=\"150\" height=\"120\" alt=\"\" />

            </a>
        </li>";
  }
?>    
    </ul>
</div>


test.php

<?php

include("clase_conexion.php");
$id_foto=date('YmdHis');//extraemos la fecha del servidor
$consulta="insert into fotos values ('$id_foto','','')";
$inserta_foto=mysql_query($consulta,$c);
$filename = "fotos/".$id_foto.'.jpg';//nombre del archivo
$result = file_put_contents( $filename, file_get_contents('php://input') );//renombramos la fotografia y la subimos
if (!$result) {
    print "No se pudo subir al servidor\n";
    exit();
}

$url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/' . $filename;//generamos la respuesta como la ruta completa
print "$url\n";//20120214060943.jpg

?>