Estou fazendo um sistema de questionário para um cliente. Desse questionário algumas perguntas deverão ser respondidas por vídeo. Ao abrir a página da questão a câmera já começa a gravar o usuário. Estou conseguindo gravar o vídeo, salvar em um objeto JavaScript e executar ele no browser. Porém estou tendo dificuldades em jogar esse arquivo/objeto em um input type="file" para upá-lo pro servidor.
Estou com o prazo apertado... se alguém puder me dar uma luz eu agradeceria imensamente.
var video = document.querySelector('video');
function captureCamera(callback) {
navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(function(camera) {
callback(camera);
}).catch(function(error) {
alert('Erro ao acessar a camera/microfone.');
console.error(error);
});
}
function stopRecordingCallback() {
video.src = video.srcObject = null;
video.src = URL.createObjectURL(recorder.getBlob());
//video.play();
recorder.camera.stop();
//recorder.destroy();
//recorder = null;
sendForm();
}
var recorder; // globally accessible
function startRecord() {
this.disabled = false;
captureCamera(function(camera) {
setSrcObject(camera, video);
video.play();
recorder = RecordRTC(camera, {
type: 'video'
});
recorder.startRecording();
// release camera on stopRecording
recorder.camera = camera;
document.getElementById('btn-stop-recording').disabled = false;
});
};
document.getElementById('btn-stop-recording').onclick = function() {
this.disabled = true;
recorder.stopRecording(stopRecordingCallback);
};
startRecord();
function sendForm(){
document.getElementById('tempoInput').value = tempo;
document.questiontime.submit();
}
<html>
<body>
<video width="380" height="280" style="background: #eee;"></video>
<form name="questiontime" action="../controllers/sectionInterview.php" method="post">
<input type="file" id="InputVideo" name="videofile" value="" style="display: none;">
</form>
<button type="button" id="btn-stop-recording">Continuar</button>
<script src="https://cdn.webrtc-experiment.com/RecordRTC.js"></script>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
</body>
</html>
Ali na função sendForm() tentei bolar uma maneira de setar o objeto no input antes de submeter o form, mas sem sucesso...
Obrigado pela ajuda!