Можно ли использовать MediaRecorder API с HTML5 видео? - PullRequest
Новая
       31

Можно ли использовать MediaRecorder API с HTML5 видео?

0 голосов
/ 09 октября 2018

Я хотел бы записать видео-тег, чтобы можно было передавать данные BLOB-объектов на сервер веб-сокетов, однако при попытке запустить mediaRecorder я получаю следующую ошибку:

MediaRecorderне удалось запустить из-за отсутствия доступных аудио- или видеодорожек.

Возможно ли добавить аудио- / видеодорожки из тега html5 video в поток мультимедиа? 

<script>
var video = document.getElementById('video');
var mediaStream = video.captureStream(30);
var mediaRecorder = new MediaRecorder(
            mediaStream,
            {
                mimeType: 'video/webm;codecs=h264',
                videoBitsPerSecond: 3000000
            }
        );

fileElem.onchange = function () {
            var file = fileElem.files[0],
                canplay = !!video.canPlayType(file.type).replace("no", ""),
                isaudio = file.type.indexOf("audio/") === 0 && file.type !== "audio/mpegurl";
            video.src = URL.createObjectURL(file);
            video.play();
            mediaRecorder.start(1000); // Start recording, and dump data every second
        };
</script>

<p id="choice" class="info"><input type="file" id="file"> File type: <span id="ftype"></span></p>
<video width="640" height="360" id="video" src="" controls="false"></video>

1 Ответ

0 голосов
/ 09 октября 2018

Можно ли использовать MediaRecorder API с видео html5?

Да , однако вам необходимо инициализировать MediaRecorder после HTMLVideoElement.readyState имеет метаданные .

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

Примечание: В этом примере я использую onloadedmetadata для инициализации MediaRecorder после получения метаданными видео. 

var mainVideo = document.getElementById("mainVideo"),
  displayVideo = document.getElementById("displayVideo"),
  videoData = [],
  mediaRecorder;

var btnStart = document.getElementById("btnStart"),
  btnStop = document.getElementById("btnStop"),
  btnResult = document.getElementById("btnResult");

var initMediaRecorder = function() {
  // Record with 25 fps
  mediaRecorder = new MediaRecorder(mainVideo.captureStream(25));

  mediaRecorder.ondataavailable = function(e) {
    videoData.push(e.data);
  };
}

function startCapture() {
  videoData = [];
  mediaRecorder.start();

  // Buttons 'disabled' state
  btnStart.setAttribute('disabled', 'disabled');
  btnStop.removeAttribute('disabled');
  btnResult.setAttribute('disabled', 'disabled');
};

function endCapture() {
  mediaRecorder.stop();

  // Buttons 'disabled' state
  btnStart.removeAttribute('disabled');
  btnStop.setAttribute('disabled', 'disabled');
  btnResult.removeAttribute('disabled');
};

function showCapture() {
  return new Promise(resolve => {
    setTimeout(() => {
      // Wrapping this in setTimeout, so its processed in the next RAF
      var blob = new Blob(videoData, {
          'type': 'video/mp4'
        }),
        videoUrl = window.URL.createObjectURL(blob);

      displayVideo.src = videoUrl;
      resolve();
    }, 0);
  });
};
video {
  max-width: 300px;
  max-height: 300px;
  display: block;
  margin: 10px 0;
}
<video id="mainVideo" playsinline="" webkit-playsinline="1" controls="1" onloadedmetadata="initMediaRecorder()">
    <source src="sampleVideo.mp4" type="video/mp4">
  </video>

<button id="btnStart" onclick="startCapture()"> Start </button>
<button id="btnStop" disabled='disabled' onclick="endCapture()"> Stop </button>
<button id="btnResult" disabled='disabled' onclick="showCapture()"> Show Result </button>

<video id="displayVideo" playsinline="" webkit-playsinline="1" controls="1"></video>
...