Question

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

li

我知道您可以使用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 () {})，但我想处理原始数据。是否有可能这样做。这是一个小提琴，所以你可以玩it。

Answer 1

我有类似的问题，this answer为我工作我想问题是MediaRecorder API返回Blob，但需要一个ArrayBuffer。根据{{3}}：＆＃34;从Blob中读取内容的唯一方法是使用the MDN documentation＆＃34;。

我调整了您的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
}

将getusermedia数据附加到mediasource

1 个答案: