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

Asked

Viewed 687 times

1

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

I’m on a tight deadline... if anyone can give me a light I’d appreciate it immensely.

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>

There in the sendform() function I tried to figure out a way to set the object in the input before submitting the form, but without success...

Thanks for the help!

php javascript html jquery webrtc

2 answers

2


Wrong!

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

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

You need to use the Blob (returned by the method getBlob()) 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 also I teach upload via jQuery:

  • 1

    Perfect Wallace! I managed to raise the object via Ajax as your help. Broke me a gigantic branch... thank you very much!!!

  • Wallace Maxters, I realized that via mobile this code is not getting UPAR video. You know what can be?

  • @Alissonpelizaro the problem is in upload or Recordrtc? I am also using this library and it is still in experimental phase.

  • Recordrtc works perfect, I can even play the video recorded in the mobile browser. The problem is only the same upload. I’ll try to debug here on mobile to see if a light appears, rs.

1

I was able to solve it with Wallace’s help. Follow 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 simply 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";
  }

}

Browser other questions tagged php javascript html jquery webrtc

You are not signed in. Login or sign up in order to post.