Record video file after capture on site

Question

I have a page that captures a video + audio from the user using HTML5 and Javascript. The code follows:

<video width="600" height="400"></video>
<input type="button" id="stopbt" value="stop"/>
<script type="text/javascript">
   navigator.getUserMedia = (
   navigator.getUserMedia ||
   navigator.webkitGetUserMedia ||
   navigator.mozGetUserMedia ||
   navigator.msGetUserMedia);

   var video = document.querySelector('video');
      var cameraStream = '';
      if(navigator.getUserMedia){
          navigator.getUserMedia(
          {
            audio: true, 
            video: true
          },

    function(stream)
    {
        var url = window.URL || window.webkitURL;
        cameraStream = stream;
        video.src = window.URL.createObjectURL(stream);
        video.play();
    },
    function(error)
    {
        document.writeln("Há um problema para acessar os dispositivos.")
    }
    );
}
else
{
    document.writeln("Captura não é suportada!");
}
document.querySelector('#stopbt').addEventListener(
    'click',
    function(e)
    {
        video.src='';
        cameraStream.stop();
    });
</script>

However, this code only captures audio video, but does not generate a file on the server. I am using PHP in the project...

Is there any way to generate a file on the server from a capture like this (containing audio and video)? And, if there is, it is possible to even determine the format that this file will be generated (type an AVI)?

Answer 1

I will post only the part of the Javascript submission, as you will receive in PHP and will process the Stream, this I will leave to your discretion.

For the example below, I will use a input:file, on it you must perform the upload of a video which you want, the important thing here is how we will do to upload a Blob (its variable stream) with a file for the server.

In the example below, I call the Blob of arquivo.

//caso não tenha um arquivo de video, baixe um exemplo em:
//http://techslides.com/demos/sample-videos/small.webm

var file = document.getElementById("file");
var enviar = document.getElementById("enviar");
var exibir = document.getElementById("exibir");
var video = document.getElementById("video");

var pegarArquivo = function () {
  if (file.files.length > 0) {
    var arquivo = file.files[0];
    if (arquivo.type.indexOf("video") != -1) {
      return arquivo;
    } else {
      alert("Selecione um arquivo de video");
    }
  } else {
    alert("Selecione um arquivo");
  }
  return null;
}

exibir.addEventListener("click", function (event) {
  var arquivo = pegarArquivo();
  if (arquivo) {
    var url = URL.createObjectURL(arquivo);
    video.src = url;
  }
});

enviar.addEventListener("click", function (event) {
  var arquivo = pegarArquivo();
  if (arquivo) {
    var formData = new FormData();
    formData.append("arquivo", arquivo);        

    var httpRequest = new XMLHttpRequest();
    httpRequest.open("POST", "%URL com extensão PHP que espera o arquivo%", true);
    httpRequest.onreadystatechange = function (event) {
      if (httpRequest.readyState == 4) {
        if (httpRequest.status == 200) {
          alert("arquivo rececido com sucesso");
        } else {
          alert("ocorreu um erro durante o envio");
        }
      }
    }        
    httpRequest.send(formData);
  }
});

<input id="file" type="file" />
<br />
<input id="exibir" type="button" value="Exibir Video" />
<input id="enviar" type="button" value="Enviar Video" />
<br />
<video id="video" width="320" height="240" loop="" autoplay="" ></video>

When using a FormData you are sending a form to the server, you can mount one dynamically as in the example or use an existing form, for example:

var form = document.getElementById("form");
var data = new FormData(form);
...
httpRequest.send(data);

So what we’re basically doing is sending the file inside a form through a POST request.

But a detail, to send a FormData, you need to set the header Content-Type for multipart/form-data, this is the default value if using XMLHttpRequest to carry out the requisition AJAX.

If using jQuery, it modifies this property, then you will have to inform it to use the conventional form and not make modifications:

var data = new FormData();
data.append("arquivo", arquivo)

$.ajax({
    url: "%URL com extensão PHP que espera o arquivo%",
    data: data,
    contentType: false,
    processData: false,
    type: "POST",
    success: function(data){
        alert("arquivo rececido com sucesso");
    }
});

remembering that you need to send a multipart/form-data, if send as application/x-www-form-urlencoded (a string similar to a queryString), you will not be able to send a file to the server, so your PHP method must be ready to receive in this format (which is even the standard adopted by the web currently).