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.js | LIVE DEMO

Mix Multiple Cameras or Videos
Mix Multiple Microphones or Audios (Mp3/Wav/Ogg)
Mix Multiple Screens or Screen+Video
Mix Canvas 2D Animation + Camera + Screen
and GET SINGLE STREAM!!

All Demos

Main Demo: https://www.webrtc-experiment.com/MultiStreamsMixer/
Record Multiple Cameras
Record Camera+Screen

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

Link the library

<script src="https://cdn.webrtc-experiment.com/MultiStreamsMixer.js"></script>

<!-- or min.js -->
<script src="https://cdn.webrtc-experiment.com/MultiStreamsMixer.min.js"></script>

<!-- or without CDN -->
<script src="https://www.webrtc-experiment.com/MultiStreamsMixer.js"></script>

<!-- or rawgit -->
<script src="https://rawgit.com/muaz-khan/MultiStreamsMixer/master/MultiStreamsMixer.js"></script>

Or link specific build:

https://github.com/muaz-khan/MultiStreamsMixer/releases

<script src="https://github.com/muaz-khan/MultiStreamsMixer/releases/download/1.0.4/MultiStreamsMixer.js"></script>

How to mix audios?

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?

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?

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
appendStreams: (function) append extra/new streams (anytime)

License

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