npm

npm’s 2019 JavaScript ecosystem survey analysis is now available!Get your copy here »

multistreamsmixer

1.0.8 • Public • Published

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!!

npm downloads Build Status: Linux

All Demos

  1. Main Demo: https://www.webrtc-experiment.com/MultiStreamsMixer/
  2. Record Multiple Cameras
  3. 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:

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

Or install using NPM:

npm install multistreamsmixer

How to mix audios?

// NPM can use this:
// const MultiStreamsMixer = require('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());

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;
 
const 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.resetVideoStreams([cameraStreamOnly]);
};

How to mix multiple cameras?

const mixer = new MultiStreamsMixer([camera1, camera2]);
 
rtcPeerConnection.addStream(audioMixer.getMixedStream());
 
mixer.frameInterval = 1;
mixer.startDrawingFrames();

API

  1. getMixedStream: (function) returns mixed MediaStream object
  2. frameInterval: (property) allows you set frame interval
  3. startDrawingFrames: (function) start mixing video streams
  4. resetVideoStreams: (function) replace all existing video streams with new ones
  5. releaseStreams: (function) stop mixing streams
  6. appendStreams: (function) append extra/new streams (anytime)

TypeScript / Angular

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

Disclaimer

There is no warranty, expressed or implied, associated with this product. Use at your own risk.

License

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

install

npm i multistreamsmixer

Downloadsweekly downloads

241

version

1.0.8

license

MIT

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability