Soy nuevo programando, y necesito ayuda con un proyecto en el que he venido trabajando y no encuentro una solución. La situación es la siguiente: necesito crear una aplicación que grabe videos con audio, tal que el usuario tenga 15 segundos para dejar un mensaje. Ademas de la toma del video, el programa debe capturar una foto de la persona que deja el mensaje, para que ésta se visualice en un botón para que otros usuarios posteriores puedan pinchar dicho boton y reproducir el video. En principio es un boton por video.
Entonces, he conseguido en internet dos programas, uno que me permite tomar la foto y guardarla y otro que me permite tomar el video y guardarlo tambien; implementando el API getUserMedia. Sin embargo, siempre que va a tomar un nuevo video me pide acceso a la camara y el microfono de Chrome, lo cual no es funcional, lo ideal seria que tan solo una vez pregunte el acceso a estos recursos.
El codigo que estoy usando es el siguiente:
Código HTML :
<html>
<head>
<title>Audio and Video capture using RecordRTC</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="author" content="eurekka">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="https://www.webrtc-experiment.com/style.css">
<style>
audio {
vertical-align: bottom;
width: 10em;
}
video { vertical-align: top;max-width: 100%; }
input {
border: 1px solid #d9d9d9;
border-radius: 1px;
font-size: 2em;
margin: .2em;
width: 30%;
}
p, .inner { padding: 1em; }
li {
border-bottom: 1px solid rgb(189, 189, 189);
border-left: 1px solid rgb(189, 189, 189);
padding: .5em;
}
label {
display: inline-block;
width: 8em;
}
</style>
<script>
document.createElement('article');
document.createElement('footer');
</script>
<!-- script used for audio/video/gif recording -->
<script src="https://www.webrtc-experiment.com/RecordRTC.js"> </script>
</head>
<body>
<article>
<header style="text-align: center;">
<h1>
Audio and Video capture using <a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC" target="_blank">RecordRTC</a> by
<a href="http://eurekka.meximas.com/" target="_blank">eurekka</a>
</h1>
</header>
<div class="github-stargazers"></div>
<section class="plusone-gplus">
<div class="g-plusone" data-href="https://www.webrtc-experiment.com/"></div>
</section>
<section class="experiment">
<h2 class="header">Record and POST to Server!</h2>
<p style="text-align:center;">
<video id="preview" controls style="border: 1px solid rgb(15, 158, 238); height: 240px; width: 320px;"></video>
</p>
<hr />
<button id="record">Record</button>
<button id="stop" disabled style="visibility:hidden">Stop</button>
<button id="delete" disabled>Delete your webm/wav files from Server</button>
<button id="play" disabled>Play</button>
<img src="" id="photo" alt="photo">
<canvas id="canvas"></canvas>
<div id="container" style="padding:1em 2em;"></div>
</section>
</article>
<script>
var streaming = false,
video = document.querySelector('#video'),
canvas = document.querySelector('#canvas'),
photo = document.querySelector('#photo'),
startbutton = document.querySelector('#startbutton'),
width = 320,
height = 0;
//Comprobamos la compatibilidad de nuestro navegador con User Media
if (tieneUserMedia()) {
console.log("Ok, el navegador soporta UserMedia");
} else {
alert('Mala suerte: getUserMedia() no está soportado en tu navegador. ¿Conoces Chrome?');
}
//Comprueba los diferentes motores que dan soporte
function tieneUserMedia() {
return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
}
/////////////////////////////////
/////////////////////////////////
//Similar a los prefijos de CSS, usamos variables para contener los posibles
//objetos usados en cada navegador
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia;
var video = document.querySelector('video');
var cameraStream="";
//Comprobamos si existe getUserMedia y si no lanzamos un error
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true, audio:true}, exito, error);
//Llámamos getUserMedia, pedimos acceso a vídeo. Si tenemos éxito llamamos una función y si no, lanzamos un error.
} else {
error();
}
//Si soportamos getUserMedia y damos permiso, nuestro tag de video mostrará el stream que recogemos.
function exito(stream) {
video.src = window.URL.createObjectURL(stream);
cameraStream = stream;
video.play();
}
//Nuestro error lanza un simple mensaje alert.
function error(e) {
alert("Algo salió mal, técnicamente");
}
var resultado = 0;
var numero = 10;
var i = 0;
var record = document.getElementById('record');
//boton.onclick = function() {
//alert('boton es activado')
variable();
//i++;
//};
function variable (){
record.onclick =
function() {
//alert('boton es activado')
i++;
//alert(""+i+"");
selector ();
}
};
function selector () {
switch(i) {
case 1:
alert('hola');
takepicture1();
recordingTheVideo1();
break;
case 2:
alert('otar vez!');
takepicture2();
recordingTheVideo1();
}
}
/////////////////////////////////////////////////////////// RECORD VIDEO
//////////////////////////////////////////////////////////
function recordingTheVideo (){
function PostBlob(blob, fileType, fileName) {
// FormData
var formData = new FormData();
formData.append(fileType + '-filename', fileName);
formData.append(fileType + '-blob', blob);
// progress-bar
var hr = document.createElement('hr');
container.appendChild(hr);
var strong = document.createElement('strong');
strong.innerHTML = fileType + ' upload progress: ';
container.appendChild(strong);
var progress = document.createElement('progress');
container.appendChild(progress);
// POST the Blob
xhr('save.php', formData, progress, function (fileURL) {
container.appendChild(document.createElement('hr'));
var mediaElement = document.createElement(fileType);
var source = document.createElement('source');
var href = location.href.substr(0, location.href.lastIndexOf('/') + 1);
source.src = href + fileURL;
if(fileType == 'video') source.type = 'video/webm; codecs="vp8, vorbis"';
if(fileType == 'audio') source.type = 'audio/wav';
mediaElement.appendChild(source);
mediaElement.controls = true;
container.appendChild(mediaElement);
play.onclick = function(){
mediaElement.play(); //video achive to show
var audio = document.querySelector('audio');//audio achive to show
audio.play();
}
progress.parentNode.removeChild(progress);
strong.parentNode.removeChild(strong);
hr.parentNode.removeChild(hr);
});
}
var record = document.getElementById('record');
var play = document.getElementById('play');
var stop = document.getElementById('stop');
var deleteFiles = document.getElementById('delete');
var audio = document.querySelector('audio');
var recordVideo = document.getElementById('record-video');
var preview = document.getElementById('preview');
var container = document.getElementById('container');
var recordAudio, recordVideo;
record.onclick = function() {
record.disabled = true;
var video_constraints = {
mandatory: { },
optional: []
};
navigator.getUserMedia({
audio: false,
video: false
}, function (stream) {
preview.src = window.URL.createObjectURL(stream);
preview.play();
recordAudio = RecordRTC(stream, {
});
recordVideo = RecordRTC(stream, {
type: 'video'
});
setTimeout(function(){},3000);
recordAudio.startRecording() &&
recordVideo.startRecording();
stop.disabled = false;
});
setTimeout(function(){stopRcrd();},10000); //4 seconds less of recording
};
var fileName;
function stopRcrd() {
record.disabled = false;
stop.disabled = true;
play.disabled = false;
fileName = Math.round(Math.random() * 99999999) + 99999999;
recordAudio.stopRecording();
PostBlob(recordAudio.getBlob(), 'audio', fileName + '.wav');
recordVideo.stopRecording();
PostBlob(recordVideo.getBlob(), 'video', fileName + '.webm');
preview.src = '';
deleteFiles.disabled = false;
deleteAudioVideoFiles();
};
deleteFiles.onclick = function() {
deleteAudioVideoFiles();
};
function deleteAudioVideoFiles() {
deleteFiles.disabled = true;
if (!fileName) return;
var formData = new FormData();
formData.append('delete-file', fileName);
xhr('delete.php', formData, null, function (response) {
console.log(response);
});
fileName = null;
container.innerHTML = '';
}
function xhr(url, data, progress, callback) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
callback(request.responseText);
}
};
request.onprogress = function(e) {
if(!progress) return;
if (e.lengthComputable) {
progress.value = (e.loaded / e.total) * 100;
progress.textContent = progress.value; // Fallback for unsupported browsers.
}
if(progress.value == 100){
progress.value = 0;
}
};
request.open("POST", "http://localhost/8081/save.php");
request.send(data);
}
window.onbeforeunload = function() {
if (!!fileName) {
deleteAudioVideoFiles();
return 'It seems that you\'ve not deleted audio/video files from the server.';
}
};
}
/////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////
video.addEventListener('canplay', function(ev){
if (!streaming) {
height = video.videoHeight / (video.videoWidth/width);
video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);
function takepicture1() {
alert("tomando la foto")
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
sendToServer1();
}
function sendToServer1() {
alert("enviando...")
var data = canvas.toDataURL('image/png');
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
// request complete
}
xhr.open('POST','http://localhost/javascriptexcercises/snapshot1.php',true);
xhr.setRequestHeader('Content-Type', 'application/upload');
xhr.send(data);
}
function takepicture2() {
alert("tomando la foto 2")
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
sendToServer2();
}
function sendToServer2() {
alert("enviando 2...")
var data = canvas.toDataURL('image/png');
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
}
xhr.open('POST','http://localhost/javascriptexcercises/snapshot2.php',true);
xhr.setRequestHeader('Content-Type', 'application/upload');
xhr.send(data);
}
record.addEventListener('click', function(ev){
//takepicture();
//selector();
ev.preventDefault();
}, false);
</script>
</body>
</html>
Estaría muy agradecido con su ayuda!
