Write video file after capture on site

Question

Write video file after capture on site

Navigation

#1 by (3 votes)

5

I have a page that captures a video + user's audio 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 video with audio, but does not generate a file on the server. I'm 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, is it possible to even determine what format that file will be generated (type an AVI)?

php javascript html5 html5-audio html5-video

asked by anonymous 20.11.2015 / 12:15

1 answer

How to join lists in C #? Validate maximum size of an attachment

score 3 · Accepted Answer

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

For the example below, I'll use a input:file , in it you should upload a video of whatever, the important thing here is how do we send Blob (its stream ) to a file to the server.

In the example below, I call 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 you use a FormData you are sending form to the server, you can dynamically mount it as in the example or use an existing form, such as:

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 to multipart/form-data , this is the default value if you are using XMLHttpRequest to perform the AJAX request. p>

If you are using jQuery , it modifies this property, so you have to tell it to use the conventional form and do 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 multipart/form-data , if you send as application/x-www-form-urlencoded (a string similar to queryString ), you will not be able to send a file to the server, so your PHP method should be prepared to receive in this format (which is even the standard adopted by the web today).