Send a video recorded via Javascript by input type="file"

Navigation
1

I'm doing a questionnaire system for a client. From this questionnaire some questions should be answered by video. When opening the page of the question the camera already begins to record the user. I am able to write the video, save to a JavaScript object and run it in the browser. However I'm having trouble playing this file / object in an input type="file" to get it to the server.

I have a tight deadline ... if anyone can give me a light I would greatly appreciate it. 

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><scriptsrc="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  </body>
</html>

In the sendForm () function I tried to create a way to set the object in the input before submitting the form, but without success ...

Thanks for the help!

    
asked by anonymous 29.06.2018 / 21:34

2 answers

2

Wrong!

You can not change the value of input via Javascript. The API simply does not allow you to do this. That is, a file in input[type=file] .

But since I already used this plugin, the solution I always use is to upload it via Ajax .

You need to use Blob (returned by getBlob() method) and send it.

See a small example with jQuery: 

var form = new FormData();

form.data('video', recorder.getBlob());

$.ajax({
    url: 'url_do_upload',
    data: form,
    processData: false,
    contentType: false,
    cache: false
})

Here I also teach upload via jQuery:

29.06.2018 / 22:34
1

I was able to solve Wallace's help. Here is the final code: 

  var form = new FormData();

  recorder.camera.stop(); //Objeto Recorder contendo o video gravado via WRTC

  form.append('video', recorder.getBlob()); //Passando o objeto Recorder como parâmetro POST

  $.ajax({
     url: "../controllers/sectionInterview.php",
     type: 'POST',
     data: form,
     processData: false,
     contentType: false,
     cache: false
  });

And getting the file just this way in PHP: 

if(isset($_FILES['video'])){

  $new_name = $idUser."-".date("Y.m.d-H.i.s") . ".webm";
  $new_name = '../uploads/'.$new_name;

  if (move_uploaded_file($_FILES['video']['tmp_name'], $new_name)) {
    echo "success";
  } else {
    echo "failure";
  }

}
    
02.07.2018 / 19:59
How to show next field when user clicks green button insert server_id in the creation of each record, mysql