Package Exports

multistreamsmixer

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (multistreamsmixer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

MultiStreamsMixer | Mix Multiple Cameras & Screens into Single Stream

https://www.webrtc-experiment.com/MultiStreamsMixer/

Pass multiple streams (e.g. screen+camera or multiple-cameras) and get single stream.

How to mix audios?

// https://cdn.webrtc-experiment.com/MultiStreamsMixer.js
var audioMixer = new MultiStreamsMixer([microphone1, microphone2]);

// record using MediaRecorder API
var recorder = new MediaRecorder(audioMixer.getMixedStream());

// or share using WebRTC
rtcPeerConnection.addStream(audioMixer.getMixedStream());

How to mix screen+camera?

// https://cdn.webrtc-experiment.com/MultiStreamsMixer.js
screenStream.fullcanvas = true;
screenStream.width = screen.width; // or 3840
screenStream.height = screen.height; // or 2160 

cameraStream.width = parseInt((20 / 100) * screenStream.width);
cameraStream.height = parseInt((20 / 100) * screenStream.height);
cameraStream.top = screenStream.height - cameraStream.height;
cameraStream.left = screenStream.width - cameraStream.width;

var mixer = new MultiStreamsMixer([screenStream, cameraStream]);

rtcPeerConnection.addStream(audioMixer.getMixedStream());

mixer.frameInterval = 1;
mixer.startDrawingFrames();

btnStopStreams.onclick = function() {
    mixer.releaseStreams();
};

btnAppendNewStreams.onclick = function() {
    mixer.appendStreams([anotherStream]);
};

btnStopScreenSharing.onclick = function() {
    // replace all old streams with this one
    // it will replace only video tracks
    mixer.replaceStreams([cameraStreamOnly]);
};

How to mix multiple cameras?

// https://cdn.webrtc-experiment.com/MultiStreamsMixer.js
var mixer = new MultiStreamsMixer([camera1, camera2]);

rtcPeerConnection.addStream(audioMixer.getMixedStream());

mixer.frameInterval = 1;
mixer.startDrawingFrames();

API

getMixedStream: (function) returns mixed MediaStream object
frameInterval: (property) allows you set frame interval
startDrawingFrames: (function) start mixing video streams
resetVideoStreams: (function) replace all existing video streams with new ones
releaseStreams: (function) stop mixing streams

License

MultiStreamsMixer.js is released under MIT licence . Copyright (c) Muaz Khan.