Запись звука и видео через браузер, просмотр и отправка на сервер

200

17 декабря 2019, 11:00

Нужно дать возможность пользователю записать минутное видео, просмотреть его и отправить. Пока удалось только скопировать пример и увидеть видео с камеры на странице

<video width="640" height="480" autoplay></video>
<script>
// Prefer camera resolution nearest to 1280x720.
var constraints = { audio: false, video: { width: 1280, height: 720 } }; 
navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
  var video = document.querySelector('video');
  video.srcObject = mediaStream;
  video.onloadedmetadata = function(e) {
    video.play();
  };
})
.catch(function(err) { console.log(err.name + ": " + err.message); }); // always check for errors at the end.
</script>

Как реализовать теперь запись,просмотр,отправку? Пните в нужном направлении

Answer 1

Вот пишет и даёт скачать:

<a id="download">Download</a>
<button id="stop">Stop</button>
    <script>
      const downloadLink = document.getElementById("download");
      const stopButton = document.getElementById("stop");
      var handleSuccess = function(stream) {
        const options = { mimeType: "video/webm" };
        const recordedChunks = [];
        const mediaRecorder = new MediaRecorder(stream, options);
        stopButton.addEventListener("click", function() {
        mediaRecorder.stop();
        });
        mediaRecorder.addEventListener("dataavailable", function(e) {
          if (e.data.size > 0) {
            recordedChunks.push(e.data);
          }
        });
        mediaRecorder.addEventListener("stop", function() {
          downloadLink.href = URL.createObjectURL(new Blob(recordedChunks));
          downloadLink.download = "acetest.webm";
        });
        mediaRecorder.start();
      };
      navigator.mediaDevices
        .getUserMedia({ audio: true, video: true })
        .then(handleSuccess);
    </script>

то есть отправить уже можно через какой нибудь <input type="file"> но работает почему-то только с mimeType: 'video/webm'