Добавление данных getusermedia в медиаресурс

Question

У меня ограниченный опыт работы с mediastream и mediasource apis. Что, по вашему мнению, является наилучшим способом получения данных из getusermedia и последующего добавления этих данных в mediaasource? Прямо сейчас я использую MediaRecorder для записи данных, а затем добавляю их в новый объект медиаресурса. Но он просто возвращает пустое видео. Вот что я сейчас делаю.

function createElem (tagName) {
  var elem = document.createElement(tagName)
  elem.controls = true
  elem.autoplay = true 
  elem.play() 
  document.body.appendChild(elem)
  return elem
}

navigator.getUserMedia({ video: true, audio: false }, function (stream) {
  var recorder = new MediaRecorder(stream)
  var wrapper = new MediaSource()

  var elem = createElem('video')
  elem.src = window.URL.createObjectURL(wrapper)
  wrapper.addEventListener('sourceopen', sourceOpen)

  function sourceOpen () {
    var source = wrapper.addSourceBuffer('video/webm;codecs=vp9')
    recorder.ondataavailable = function (e) {
      source.appendBuffer(new Uint8Array(e.data))
    }
  }
  recorder.start(1000)
}, function () {})

Я знаю, что вы можете просто использовать video.src = window.URL.createObjectURL(stream) но я хотел бы обработать необработанные данные. Возможно ли сделать это таким образом. Вот скрипка, так что вы можете поиграть с ней.

Answer 1

У меня была похожая проблема, и этот ответ сработал для меня.
Я предполагаю, что проблема в том, что MediaRecorder API возвращает Blob, но необходим ArrayBuffer. Согласно документации MDN: "Единственный способ читать содержимое из BLOB-объекта - это использовать FileReader".

Я адаптировал вашу скрипку, но протестировал ее только в Chrome 53.

navigator.getUserMedia({ video: true, audio: false }, successCallback, function (err) { console.error('Error:', err, err.stack); })

function successCallback(stream) {
    var recorder, source = new MediaSource()

    var elem = createVideoElem()
    elem.src = URL.createObjectURL(source)  
    source.addEventListener('sourceopen', sourceOpen)

    function sourceOpen () {
        var buffer = source.addSourceBuffer('video/webm;codecs=vp9')
        recorder = new MediaRecorder(stream)
        recorder.start(1000)

        recorder.ondataavailable = function (e) {
            var fileReader = new FileReader();
            fileReader.onload = function() {
                buffer.appendBuffer(fileReader.result);
            };
            fileReader.readAsArrayBuffer(e.data);
        }
    }
}

function createVideoElem () {
    var elem = document.createElement('video')
    elem.controls = true
    elem.autoplay = true // for chrome
    elem.play() // for firefox
    document.body.appendChild(elem)
    return elem
}

Answer 2

вот моя рабочая демонстрация. даже я много дней боролся с этим mimeTypes, наконец, мой код работает демо

      enter code here