camera

by sinky

HTML

<input type="file" accept="video/*" capture="camera" id="recorder">
<button id="save">Speichern</button>
<div id="progress"></div>
<hr/>
<video id="player" controls></video>
<script>
  var save = document.getElementById('save');
  var recorder = document.getElementById('recorder');
  var progress = document.getElementById('progress');

  var player = document.getElementById('player');

  recorder.addEventListener('change', function(e) {
    var file = e.target.files[0];
    player.src = URL.createObjectURL(file);
  });

  save.onclick = function() {
    var data = new FormData();
    data.append('foo', 'bar');
    data.append('file', recorder.files[0]);
    var config = {
      onUploadProgress: function(progressEvent) {
        var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
        progress.innerText = percentCompleted;
      }
    };
    axios.put('upload.php', data, config)
      .then(function(res) {

      })
      .catch(function(err) {

      });
  };

</script>

CSS

#player {
  max-width: 200px;
}