- 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!!
- 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.
<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:
<script src="https://github.com/muaz-khan/MultiStreamsMixer/releases/download/1.0.4/MultiStreamsMixer.js"></script>
Or install using NPM:
npm install multistreamsmixer
And import/require:
const MultiStreamsMixer = require('multistreamsmixer');
import MultiStreamsMixer from 'multistreamsmixer';
const audioMixer = new MultiStreamsMixer([microphone1, microphone2]);
// record using MediaRecorder API
const recorder = new MediaRecorder(audioMixer.getMixedStream());
// or share using WebRTC
rtcPeerConnection.addStream(audioMixer.getMixedStream());
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;
const mixer = new MultiStreamsMixer([screenStream, cameraStream]);
rtcPeerConnection.addStream(mixer.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.resetVideoStreams([cameraStreamOnly]);
};
const mixer = new MultiStreamsMixer([camera1, camera2]);
rtcPeerConnection.addStream(mixer.getMixedStream());
mixer.frameInterval = 1;
mixer.startDrawingFrames();
getMixedStream
: (function) returns mixed MediaStream objectframeInterval
: (property) allows you set frame intervalstartDrawingFrames
: (function) start mixing video streamsresetVideoStreams
: (function) replace all existing video streams with new onesreleaseStreams
: (function) stop mixing streamsappendStreams
: (function) append extra/new streams (anytime)
import {MultiStreamsMixer} from 'yourPath/MultiStreamsMixer';
let mixer = new MultiStreamsMixer([stream1,stream2]);
mixer.appendStreams(stream3);
let mixed = mixer.getMixedStream();
P.S: pollyfills are removed (except for AudioContext) use adapter instead
There is no warranty, expressed or implied, associated with this product. Use at your own risk.
MultiStreamsMixer.js is released under MIT licence . Copyright (c) Muaz Khan.