相关疑难解决方法(0)

我正在尝试使用getUserMedia显示从网络摄像头拍摄的MediaStream,并使用可能的任何机制(作为实验)将其中继到远程对等体.我没有直接使用webRTC,因为我想控制原始数据.

我遇到的问题是我的视频元素没有显示任何内容,我也没有收到任何错误.我在Elementary OS(基于Ubuntu 14.04的linux OS)上使用Chrome版本51.0.2704.103(64位).

作为旁注,如果我将所有blob记录到一个数组中然后创建一个新的blob并将视频的src元素设置为URL.createObjectUrl(blob),它会正确显示视频.

这是我试图完成的代码(减去中继,我只是尝试在本地播放):

var ms = new MediaSource();
var video = document.querySelector("video"); 
video.src = window.URL.createObjectURL(ms);

ms.addEventListener("sourceopen", function() {
    var sourceBuffer = ms.addSourceBuffer('video/webm; codecs="vorbis,vp8"');

    navigator.getUserMedia({video: {width: 320, height: 240, framerate: 30}, audio: true}, function(stream) {
        var recorder = new MediaRecorder(stream);

        recorder.ondataavailable = function(event) {
            var reader = new FileReader();
            reader.addEventListener("loadend", function () {
                var uint8Chunk = new Uint8Array(reader.result);
                if (!sourceBuffer.updating) {
                    sourceBuffer.appendBuffer(uint8Chunk);
                }
                if (video.paused) video.play();
            });
            reader.readAsArrayBuffer(event.data);
        };

        recorder.start(10);
    }, function(error) {
        console.error(error);
    });
}, false); …

我正在做一个我想要的项目

getUserMedia -> MediaRecorder -> socketIO -> MediaSource appendbuffer

我让它工作,但几秒后它随机停止.

我知道WebRTC,但在我正在开发的项目中,它基于一个不支持WebRTC的Chrome嵌入版本的环境.

服务器:

'use strict';

const io = require('socket.io')();

io.on('connection', (socket) => {
  console.log('connection');

  socket.on('stream', (data) => {
    socket.emit('stream', data);
  });
});

io.listen(3001);

客户:

//Codecs
var SOURCE_BUFFER_MIME = 'video/webm; codecs="vp8, vorbis"';
var RECORDER_MIME      = 'video/webm; codecs="vp8"';

//Here buffers are stored when sourcebuffer is still 'updating'
var buffers            = [];

//Video1: Directly from get user media
var $video1      = document.getElementById('video1');

//Video2: Using mediasource
var $video2      = document.getElementById('video2');
var mediaSource  = new MediaSource(); …