javascript - MediaSource randomly stops video

Question

I am working on a project where I want to

getUserMedia -> MediaRecorder -> socketIO -> MediaSource appendbuffer

I got it to work, however after a few seconds it randomly stops.

I know about WebRTC, but in the project I am working on it's based on an environment which is a version of Chrome embedded that doesn't support WebRTC.

Server:

'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);

Client:

//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();
var sourceBuffer = null;
$video2.src      = window.URL.createObjectURL(mediaSource);
$video2.play();

mediaSource.addEventListener('sourceopen',  function(e) {
  sourceBuffer = mediaSource.addSourceBuffer(SOURCE_BUFFER_MIME);
});

//Start socketIO connection
socket = io.connect('http://localhost:3001/');

socket.on('connect', function() {
  console.log('Connected');
  socket.on('stream', function(data) {
    if (sourceBuffer !== null) {
      console.count('Received');
      buffers.unshift(new Uint8Array(data));
      append();
    }
  });
});

function append() {
  if (buffers.length && mediaSource.readyState == "open" &&
      (sourceBuffer !== null && !sourceBuffer.updating)) {
    var buffer = buffers[0];
    console.log(buffer.byteLength);
    buffers.shift();
    sourceBuffer.appendBuffer(buffer);
  }
}

navigator.webkitGetUserMedia({audio: true, video: true},
  function(stream) {
    $video1.src = window.URL.createObjectURL(stream);
    $video1.play();

    //Extract data
    recorder = new MediaRecorder(stream, { mimeType : RECORDER_MIME });
    recorder.ondataavailable = function(e) {
      // recorder.pause();
      if (e.data && e.data.size > 0) {
        socket.emit('stream', e.data);
      }
    };
    recorder.start(500);
    //recorder.start(5000); //this causes the pause right after the next batch is appended
  },
  function(err) {
    console.log(err);
  }
);

Answer 1

Waitting for answers