Запись видео в формате HTML 5 и сохранение потока

Использование Html 5 Я хочу записать видео и сохранить поток в локальном файле. Ниже приведен код. При нажатии кнопки он уже вызывает камеру и захватывает видео в теге "VIDEO" HTML. Можно ли сохранить поток в локальный файл? Или я могу сохранить его как файл MP4?

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript">

function enter() {

    if (navigator.mozGetUserMedia) { 
       navigator.myGetMedia=navigator.mozGetUserMedia;
       navigator.myGetMedia({video: true}, connect, error); 
    } 
    else {
       alert("NO");
    }

    function connect(stream) {

        var video = document.getElementById("my_video");
            video.src = window.URL ? window.URL.createObjectURL(stream) : stream;
            video.play();

        var canvas = document.getElementById("c"); 
    }

    function error(e) { console.log(e); }

}

</script>

</head>    
<body>
    <canvas width="640" height="480" id="c"></canvas>
    <input type="button" value="RECORD" onClick="enter()"/>
    <input type="button" value="SAVE" />
    <video id="my_video" width="640" height="480"/>
</body>
</html>

Я хочу сохранить поток при нажатии кнопки сохранения.

Ответы

Ответ 1

RecordRTC: аудио/видеозапись WebRTC

https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC

  • Запись звука для Chrome и Firefox
  • Запись видео /Gif для Chrome; (Firefox имеет немного проблем, скоро будет восстановлен)

Демо: https://www.webrtc-experiment.com/RecordRTC/

Создание .webm видео из getUserMedia()

http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermedia

Демо: http://html5-demos.appspot.com/static/getusermedia/record-user-webm.html

Захват аудио и видео в HTML5

http://www.html5rocks.com/en/tutorials/getusermedia/intro/

Ответ 2

MediaRecorder API - это решение, которое вы ищете,

Firefox поддерживал его некоторое время, а шум - это хром, который будет реализовывать его в следующем выпуске (chrome 48), но предположим, что вам, возможно, потребуется включить флаг эксперимента, возможно, флаг не будет потребуется от chrome версии 49, для получения дополнительной информации ознакомьтесь с этим chrome issue.

Между тем, пример того, как это сделать в firefox:

var video, reqBtn, startBtn, stopBtn, ul, stream, recorder;
video = document.getElementById('video');
reqBtn = document.getElementById('request');
startBtn = document.getElementById('start');
stopBtn = document.getElementById('stop');
ul = document.getElementById('ul');
reqBtn.onclick = requestVideo;
startBtn.onclick = startRecording;
stopBtn.onclick = stopRecording;
startBtn.disabled = true;
ul.style.display = 'none';
stopBtn.disabled = true;

function requestVideo() {
  navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    })
    .then(stm => {
      stream = stm;
      reqBtn.style.display = 'none';
      startBtn.removeAttribute('disabled');
      video.src = URL.createObjectURL(stream);
    }).catch(e => console.error(e));
}

function startRecording() {
  recorder = new MediaRecorder(stream, {
    mimeType: 'video/mp4'
  });
  recorder.start();
  stopBtn.removeAttribute('disabled');
  startBtn.disabled = true;
}


function stopRecording() {
  recorder.ondataavailable = e => {
    ul.style.display = 'block';
    var a = document.createElement('a'),
      li = document.createElement('li');
    a.download = ['video_', (new Date() + '').slice(4, 28), '.webm'].join('');
    a.href = URL.createObjectURL(e.data);
    a.textContent = a.download;
    li.appendChild(a);
    ul.appendChild(li);
  };
  recorder.stop();
  startBtn.removeAttribute('disabled');
  stopBtn.disabled = true;
}
<div>

  <button id='request'>
    Request Camera
  </button>
  <button id='start'>
    Start Recording
  </button>
  <button id='stop'>
    Stop Recording
  </button>
  <ul id='ul'>
    Downloads List:
  </ul>

</div>
<video id='video' autoplay></video>

Ответ 3

В настоящее время нет готового к выпуску HTML5 решения для записи видео через Интернет. Текущие доступные решения заключаются в следующем:

Захват HTML файлов

Работает на мобильных устройствах и использует приложение захвата ОС для захвата видео и загрузки/отправки его на веб-сервер. Вы получите файлы .mov на iOS (они не воспроизводятся на Android, которые я пробовал) и .mp4 и .3gp на Android. По крайней мере, кодеки будут такими же: H.264 для видео и AAC для аудио в 99% устройств.

HTML Media Capture

Изображение предоставлено https://addpipe.com/blog/the-new-video-recording-prompt-for-media-capture-in-ios9/

Flash и медиа-сервер на рабочем столе.

Запись видео во Flash работает следующим образом: аудио и видео данные захватываются с веб-камеры и микрофона, кодируются с помощью Sorenson Spark или H.264 (видео) и Nellymoser Asao или Speex (аудио), затем он передается (rtmp) в медиа-сервер (Red5, AMS, Wowza), где он сохраняется в файлах .flv или .f4v.

Предложение MediaStream Recording

Запись MediaStream представляет собой предложение Целевой группы по захвату медиа (совместная целевая группа между рабочими группами WebRTC и Device API) для JS API, цель которой - сделать базовую видеозапись в браузере очень простой.

Не поддерживается основными браузерами. Когда это произойдет, вы, скорее всего, столкнетесь с разными типами файлов (как минимум .ogg и .webm) и аудио/видео кодеками в зависимости от браузера.

Коммерческие решения

Есть несколько саасов и программных решений, которые будут обрабатывать некоторые или все вышеперечисленное, включая addpipe.com, HDFVR, Nimbb и Cameratag.

Дальнейшее чтение:

Ответ 4

Вот элегантная библиотека, которая записывает видео во всех поддерживаемых браузерах и поддерживает загрузку:

https://www.npmjs.com/package/videojs-record