<!DOCTYPE html>
<html lang="en">
	<head>
		<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
		<meta charset="utf-8">
		<title>Menu!!</title>
		<link href="css/style_menu.css" rel="stylesheet" type="text/css" />
		<link href="icon.css" media="screen" rel="stylesheet" type="text/css" />
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script src="http://localhost:3000/socket.io/lib/socket.io.js"></script>
         <script>
             if (location.href.indexOf('  file:') == 0) {
                 document.write(' <h1 style="color:red;">Please load this HTML file on HTTP or HTTPS.</h1>');
            }
        </script>
         <script src="/libs/RecordRTC.js"> </script>
        
    </head>
    <body>
    <div class="wrap">
	<nav>
		<ul class="menu">
			
			<li><a href="/usuario"><span class="icon-github"> </span>Perfil</a>
		</li>
			<li><a href="/Anuncios"><span class="icon-users"></span>Donaciones</a>
			<li><a href="#"><span class="icon-users"></span>Mercadillo</a>
			<li><a href="#"><span class="icon-film"> </span>Adopciones</a>
				<ul>
					<li><a href="/video">Hacer video o foto</a></li>
					<li><a href="/upload">Subir archivo</a></li>
					<li><a href="/mos_foto">Animales en adopcion</a></li>
					<li><a href="/mos_video">Animales felices</a></li>
					
				</ul>
			</li>
			<li><a href="#"><span class="icon-home"></span>Â¿Quienes somos?</a>
				<ul>
					<li><a href="/Adopcion">Como adoptar</a></li>
				    <li><a href="/Busqueda">Busqueda</a></li>
					<li><a href="#">Â¿Quieres ayudar?</a></li>
						<ul>
							<li><a href="/Socio">Socio</a></li>
							<li><a href="/Simpatizante">Simpatizante</a></li>
							<li><a href="/Voluntario">Voluntario</a></li>
						</ul>
				</ul>
			</li>
			<li><a href="#"><span class="icon-location"> </span>Animales perdidos</a>
				<ul>
					<li><a href="/Foto_loc">Foto con localizaciÃ³n</a></li>
					<li><a href="/Galeria_Loc">Â¡Al rescate!</a></li>
				
				</ul>
			</li>
			<li><a href="#"><span class="icon-users"> </span>CÃ³digos QR</a>
				<ul>
					<li><a href="/Lec_qr">Lector qr</a></li>
					<li><a href="/Cod_qr">Generar qr</a></li>
				</ul>
			</li>
			
			
			<li><a href="/logout">Salir</a></li>
			
		</ul>
		<div class="clearfix"> </div>	
	</nav>
	</div>	
		
<div class="center">
	<p id="status" style= 'font-style:oblique;font-family:cursive;font-size:25px;font-weight:bold;text-shadow: 3px 3px 3px #aaa; rgba(256,256,256,8.0);'>Antes de hacer la foto rellenar los campos de informacion</p></br>
	<form>
	<p style= "font: oblique 120%;font-family:monospace;font-weight:bold;">Nombre del animal:<input id="nombre" name="nombre" type="text" required/></p>
	<br><p style= "font-family:monospace;font-weight:bold;text-shadow: 3px 3px 3px #aaa;">Historia de nuestro amiguito<br><input id="historia" type="text"  size="150" name="historia" style="height:100px;width:400px"/>
	<br><input type="button" value="Guardar datos" onclick="datos();"align="center"/>
	
       <p>
            <video id="camera-preview" controls style="border: 1px solid rgb(15, 158, 238); width: 40%;"></video> 
         </p><hr />
        </p>
        
        <div style="display:none;">
            <label id="percentage">Ffmpeg Progress 0%</label>
            <progress id="progress-bar" value=0 max=100></progress><br />
        </div>
		
        <div>
            <button id="start-recording" disabled>Start Recording</button>
            <button id="stop-recording" disabled>Stop Recording</button>
        </div>
		
        <script>
        	// you can set it equal to "false" to record only audio
            var recordVideoSeparately = !!navigator.webkitGetUserMedia;
            
            if(!!navigator.webkitGetUserMedia && !recordVideoSeparately) {
                 var cameraPreview  = document.getElementById('camera-preview');
                 cameraPreview.parentNode.innerHTML = '<audio id="camera-preview" controls style="border: 1px solid rgb(15, 158, 238); width: 94%;"></audio> ';
            }
            
            var socketio = io.connect('http://localhost:3000/');
            
            socketio.on('connect', function() {
                startRecording.disabled = false;
            });

            var startRecording = document.getElementById('start-recording');
            var stopRecording  = document.getElementById('stop-recording');
            var cameraPreview  = document.getElementById('camera-preview');
            var progressBar = document.querySelector('#progress-bar');
           var percentage = document.querySelector('#percentage');
			var  nombre;
			var  texto;
            var  recordAudio, recordVideo;
            startRecording.onclick = function() {
                startRecording.disabled = true;
                navigator.getUserMedia({
                        audio: true,
                        video: true
                    }, function(stream) {
                         recordAudio = RecordRTC(stream, {
                            onAudioProcessStarted: function() {
                               recordVideoSeparately && recordVideo.startRecording();
                                
                                cameraPreview.src = window.URL.createObjectURL(stream);
                                cameraPreview.play();
                            }
                        });
                        
                        recordVideo = RecordRTC(stream, {
                            type: 'video'
                        });

                        recordAudio.startRecording();
 

                        stopRecording.disabled = false;
                         }, function(error) {
                        alert( JSON.stringify( error ) );
                    });
            };

            stopRecording.onclick = function() {
                startRecording.disabled = false;
                stopRecording.disabled = true;

                
                var fileName = Math.round(Math.random() * 99999999) + 99999999;

                 recordVideoSeparately && recordAudio.stopRecording(function() {
                     // stop video recorder
                     recordVideo.stopRecording(function() {
                     
                         // get audio data-URL
                         recordAudio.getDataURL(function(audioDataURL) {
                         
                             // get video data-URL
                             recordVideo.getDataURL(function(videoDataURL) {
                                 var files = {
                                     audio: {
                                         name: fileName + '.wav',
                                         type: recordAudio.getBlob().type || 'audio/wav',
                                         dataURL: audioDataURL
                                     },
                                     video: {
                                         name: fileName + '.webm',
                                         type: recordVideo.getBlob().type || 'video/webm',
                                         dataURL: videoDataURL
                                     }
                                 };
 
                                 socketio.emit('message', files);
                             });
                             
                         });
                         
                         cameraPreview.src = '';
                         cameraPreview.poster = 'ajax-loader.gif';
                     });
                     
                 });
                 
                 // if firefox or if you want to record only audio
                 // stop audio recorder
                 !recordVideoSeparately && recordAudio.stopRecording(function() {
                     // get audio data-URL
                     recordAudio.getDataURL(function(audioDataURL) {
                         var files = {
                             audio: {
                                 name: fileName + '.wav',
                                 type: recordAudio.getBlob().type || 'audio/wav',
                                 dataURL: audioDataURL
                             }
                         };
 
                         socketio.emit('message', files, nombre, texto);

                       });
                             
                        

                    cameraPreview.src = '';
                    cameraPreview.poster = 'ajax-loader.gif';
                });
            };

            socketio.on('merged', function(fileName) {
            	document.getElementById('status').innerHTML = 'video guardado';
                cameraPreview.src = '/uploads/' + fileName;
                console.log(cameraPreview.src);
                var href = (location.href.split('/').pop().length 
                         ? location.href.replace( location.href.split('/').pop(), '' ) 
                         : location.href
                     );
                     
                 href = href + '/uploads/' + fileName;
                     
                 console.log('got file ' + href);
                 
                 cameraPreview.src = href
                cameraPreview.play();
            });

	 socketio.on('ffmpeg-output', function(result) {
                if(parseInt(result) >= 100) {
                     progressBar.parentNode.style.display = 'none';
                     return;
                 }
                 progressBar.parentNode.style.display = 'block';
                 progressBar.value = result;
                 percentage.innerHTML = 'Ffmpeg Progress ' + result + "%";
             });
             
             socketio.on('ffmpeg-error', function(error) {
                 alert(error);
             });
            
	function datos(){
	//if (document.elements[2].checked) { 
      //  tipo=document.elements[2].value;
       // console.log(tipo);
    //} 
    texto=document.getElementById("historia").value;
    nombre = document.getElementById("nombre").value;
    console.log(nombre);
    console.log(texto);
}


        </script>
		
    </body>
</html>