将 getusermedia 数据附加到媒体源

Appending getusermedia data to mediasource

本文关键字：媒体 getusermedia 数据      更新时间：2023-09-26

我对媒体流和媒体源API的经验有限，您认为从getusermedia获取数据然后将该数据附加到媒体源的最佳方法是什么。现在我正在使用媒体记录器来记录数据，然后将其附加到新的媒体源对象上。但它只是返回一个空白视频。这是我目前正在做的事情。

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)但我想处理原始数据。有没有可能这样做。这是一个小提琴，所以你可以玩它。

我有一个类似的问题，这个答案对我有用。
我想问题是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
}

这是我的工作演示。 甚至我也在为这个 MIMETYPE 苦苦挣扎了很多天，终于我的代码可以工作了演示

var mediasource = new MediaSource(),video = document.querySelector("video"),
    mime = 'video/webm;codecs=vp9,opus'
video.src = URL.createObjectURL(mediasource)
mediasource.addEventListener("sourceopen",function(_){
    var source = mediasource.addSourceBuffer(mime)
    navigator.mediaDevices.getUserMedia({video: true,audio: true}).then(stream=>{
        var recorder = new MediaRecorder(stream,{mimeType:mime})
        recorder.ondataavailable = d =>{
            var r = new Response(d.data).arrayBuffer() // convert blob to arraybuffer
            r.then(arraybuffer=>{
                source.appendBuffer(arraybuffer)
            })
        }
        recorder.start(5000)
    })
})
相关文章：