muaz-khan / Multistreamsmixer
Licence: mit
MultiStreamsMixer is a JavaScript library that allows you pass multiple streams (e.g. screen+camera or multiple-cameras) and get single stream.
Stars: ✭ 246
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Multistreamsmixer
Webrtc
Pure Go implementation of the WebRTC API
Stars: ✭ 8,399 (+3314.23%)
Mutual labels: audio, webrtc
Libcrtc
WebRTC C++ library built on top of chromium webrtc.
Stars: ✭ 89 (-63.82%)
Mutual labels: audio, webrtc
Android audio talkback demo program
Android下音频对讲演示程序
Stars: ✭ 50 (-79.67%)
Mutual labels: audio, webrtc
Libjitsi
Advanced Java media library for secure real-time audio/video communication.
Stars: ✭ 536 (+117.89%)
Mutual labels: audio, webrtc
Audioswitch
An Android audio management library for real-time communication apps.
Stars: ✭ 69 (-71.95%)
Mutual labels: audio, webrtc
Mixedreality Webrtc
MixedReality-WebRTC is a collection of components to help mixed reality app developers integrate audio and video real-time communication into their application and improve their collaborative experience
Stars: ✭ 568 (+130.89%)
Mutual labels: audio, webrtc
Xsound
Web Audio API Library for Synthesizer, Effects, Visualization, Multi-Track Recording, Audio Streaming, Visual Audio Sprite ...
Stars: ✭ 123 (-50%)
Mutual labels: audio, webrtc
Opentok Ios Sdk Samples
Example applications that use the OpenTok iOS SDK
Stars: ✭ 186 (-24.39%)
Mutual labels: audio, webrtc
Javascript Media Recorder
WebRTC video recorder library for Javascript
Stars: ✭ 61 (-75.2%)
Mutual labels: audio, webrtc
Recorder
html5 js 录音 mp3 wav ogg webm amr 格式,支持pc和Android、ios部分浏览器、和Hybrid App(提供Android IOS App源码),微信也是支持的,提供H5版语音通话聊天示例 和DTMF编解码
Stars: ✭ 2,891 (+1075.2%)
Mutual labels: audio, webrtc
React Native Dropdown Picker
A single / multiple, categorizable & searchable item picker (dropdown) component for react native which supports both Android & iOS.
Stars: ✭ 230 (-6.5%)
Mutual labels: multiple
Mt32 Pi
🎹🎶 A baremetal kernel that turns your Raspberry Pi 3 or later into a Roland MT-32 emulator and SoundFont synthesizer based on Circle, Munt, and FluidSynth.
Stars: ✭ 231 (-6.1%)
Mutual labels: audio
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://www.webrtc-experiment.com/MultiStreamsMixer.js"></script>
Or link specific build:
Or install using NPM:
npm install multistreamsmixer
And import/require:
const MultiStreamsMixer = require('multistreamsmixer');
import MultiStreamsMixer from 'multistreamsmixer';
How to mix audios?
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(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]);
};
How to mix multiple cameras?
const mixer = new MultiStreamsMixer([camera1, camera2]);
rtcPeerConnection.addStream(mixer.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)
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.
<canvas>
or <video>
using querySelector
Access var canvas = document.querySelector('canvas.multi-streams-mixer');
var videos = document.querySelectorAll('video.multi-streams-mixer');
canvas.style.opacity = .1;
API
// default elementClass is "multi-streams-mixer"
var instance = new MultiStreamsMixer(arrayOfMediaStreams, elementClass);
MultiStreamsMixer.prototype = {
// get readonly MediaStream
getMixedStream: function() {},
// add more streams
appendStreams: function(arrayOfMediaStreams) {},
// replace with set of your own streams
resetVideoStreams: function(arrayOfMediaStreams) {},
// clear all the data
clearRecordedData: function() {}
};
License
MultiStreamsMixer.js is released under MIT licence . Copyright (c) Muaz Khan.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].