t-mullen / mediastream-to-webm

Convert MediaStreams to live WebM streams.

mediastream-to-webm

Converts MediaStreams to live WebM streams. Currently only for Chrome.

Allows you to send video/audio as a single outgoing data stream to many peers.

Features

• Packages webm clusters and headers into standalone chunks that don't require the entire stream.
• Fixes MSE problems with timestamp gaps.
• Abstracts away recording and source buffers.

Install

var MediaStreamToWebm = require('mediastream-to-webm')

<script src="dist/mediastream-to-webm.js" />

Usage

// Wrap your MediaStream into an encoder
var encodedStream = MediaStreamToWebm.EncodedStream(mediaStream)

// The encoded stream is a ReadableStream
encodedStream.pipe(socket1) 
encodedStream.pipe(socket2) // pipe as many times as you want, at any time, without worrying about the structure of the stream
encodedStream.pipe(socket2)
// ...

var decodedStream = MediaStreamToWebm.DecodedStream()
socket.pipe(decodedStream) // pipe the encoded stream into the decoded

// The buffered video element is available for us to watch!
var video = decodedStream.videoElement
video.autoplay = true
video.oncanplay = function () {
    video.play()
}
document.body.appendChild(video) 

API

MediaStreamToWebm.EncodedStream(mediaStream, opts)

Encode a MediaStream into a webm data stream.

mediaStream - The input MediaStream you want to broadcast.

opts - Options object. Default is:

{
    interval: 10,
    mimeType: 'video/webm; codecs="opus,vp8"'
}

MediaStreamToWebm.DecodedStream(opts)

Decode an encoded webm data stream. Decoded data will be buffered into a video element.

opts - Options object. Default is:

{
    videoElement: null, // specify an existing video element
    mimeType: 'video/webm; codecs="opus,vp8"'
}

DecodedStream.videoElement

The video element that will be buffered with the decoded webm stream.

Notes

• Currently only works on Chrome (Firefox refuses to accept a webm stream from their own MediaRecorder...)
• This module has additional overhead for live streaming. If you want just want a prerecorded stream, use media-recorder-stream.
• Headers are sent with every chunk and this packaged needs to be decoded. You won't be able to pass the data stream directly into a webm player.
• Less efficient and versatile than sending MediaStreams over WebRTC. This "dumb" video stream is not meant to be a replacement for the adaptive bitrate, network-aware SRTP protocol used by WebRTC.

mediastream-to-webm's Issues

[Bug?] Unable to get decoded stream to play in video element in firefox

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
      .then((stream) => {
        let video = document.getElementById('video');
        encodedStream = EncodedStream(stream, { mimeType: 'video/webm;codecs=opus,vp8;' });
        decodedStream = DecodedStream({ videoElement: video, mimeType: 'video/webm;codecs=opus,vp8;' });
        encodedStream.on('data', (data) => {
          console.log(data);
          this.decodedStream.write(data);
        });
      });

I was testing encode/decode and got the above code working on chrome, but I only seem to get a continual loading of the video element in firefox. Is this something wrong I'm doing on my end or a bug with the library?

cannot play webm file

I am trying to create a .webm file locally but when I try to play it it will not work.

  var fs = require('fs');
  window.name = 'popup';
  function onTabStream(stream) {
    window.web_stream = stream;
    var encodedStream = MediaStreamToWebm.EncodedStream(stream)
    var ws = fs.createWriteStream('sample.webm');
    encodedStream.pipe(ws); 
    
    document.getElementById('result').innerHTML = 'stream created. click the button on the main window. ';
  }
  chrome.tabCapture.capture({ audio: false, video: true }, onTabStream);

Example of usage

Do you got any working example (server and client side) so I can see that? I'm not sure from the docs how to use this and where to use it.

Ability to decode webm stream in NodeJS.

The ability to decode the webm stream in NodeJS serverside would be useful. This would allow me to pipe the data directly to an output webm file.

if we can only send the chunk but aren't allowed to connect to the enc stream

Summary for future visitors: to use the chunks provided in the EncodedStream.on('data') event, @t-mullen gave the answer below. The chunk can't be provided to Media Source Extensions, instead it must be provided to the DecodedStream. If you are using DecodedStream.write to do that, you must write the chunk in the same format you received it from EncodedStream, which is a Uint8Array. Thanks @t-mullen!

Using mediastream-to-webm for client without node js

Hi ! I'm curently trying to use your mediastream-to-webm.js library to send a video stream by socket from client to server. However you seemed to use node js require to include mediastream-to-webm in your client and we'd need to build our client without node js. So is it possible to only include it with a script tag without having undefined mtw var ?
In that case could you give me some advices to call the mtw variable ?
The purpose of our project is to use a webcam in client side and to send it by socket to a raspberry server in order to display it. You'll find attached our client source code.
Thank you !
Index2.zip

Firefox unable to play streams

Firefox is currently unable to play it's own media-recorder-streams in mediasource.

Both browsers have actually reverted to SimpleBlock format, so the issue seems to be a Firefox regression.

[Bug] Mediastream does not record when browser is minimized.

How to replicate:

const mtw = require('mediastream-to-webm);
navigator.mediaDevices.getUserMedia({ video: true, audio: true}).then(stream => {
  let encodedStream = mtw.EncodedStream(stream);
  encodedStream.on('data', (data) => {
    console.log(data);
  });
});

then minimize your browser, you'll see that the data event callback stops.

I believe this has to do with the fact that the MediaRecorder has a setInterval timer that's throttled. Any ideas on how to fix this?