SFMediaStream

A HTML5 media streamer library for playing music, video, or even microphone & camera live streaming with node server. The transmitted data is compressed (depend on the browser media encoder) before being sent to node server, and the latency is configurable.

The default configuration is intended for newer browser. If you want to build 2-way communication for older and newer browser, then you must send streamer encoding information to the presenter before start the communication or using mp4 instead of opus.

Install with CDN link

You can download minified js from this repository or use this CDN link <script type="text/javascript" src='https://cdn.jsdelivr.net/npm/sfmediastream@v1'></script>

If you want to use the different version, please modify the v1 into a specific version.

And include it on your project

// Prefixed with Scarlets when imported with CDN link
var presenter = new ScarletsMediaPresenter(...);
var streamer = new ScarletsAudioStreamer(...);

Install with NPM

npm i sfmediastream

This is for web bundler like Webpack or Browserify, and can't be used as a library for Node.js. If you want to use this recorder/effect/plugin for Node.js, the I think it may be possible by using headless browser like Puppeteer.

const {MediaPresenter, AudioStreamer, ...} = require('sfmediastream');
var presenter = new MediaPresenter(...);
var streamer = new AudioStreamer(...);

Adding retro-compatibility

In case of the browser doesn't support some codec like audio/wav, audio/webm, or audio/ogg you can to add opus-media-recorder before using the library.

Safari browser actually is partially supported by using this polyfill. It able to stream audio, but is not playable by the browser.

How to use

ScarletsMediaPresenter

This class is used for streaming local media like camera or microphone to the server.

Properties

// Example for accessing the properties
presenterMedia.debug = true;

Method

Event Listener

onRecordingReady

Callback when the library is ready for recording

presenterMedia.onRecordingReady = function(packet){
    console.log("Header size: " + packet.data.size);
    mySocket.emit('bufferHeader', packet);
};

onBufferProcess

Callback when data buffer is ready to be played

presenterMedia.onBufferProcess = function(packet){
    console.log("Data", packet);
    mySocket.emit('stream', packet);
};

Example

var presenterMedia = new ScarletsMediaPresenter({
    audio:{
        channelCount:1,
        echoCancellation: false
    },/* video:{
        frameRate:15,
        width: 1280,
        height: 720,
        facingMode: (frontCamera ? "user" : "environment")
    } */
}, 1000); // 1sec

presenterMedia.onRecordingReady = function(packet){
    console.log("Recording started!");
    console.log("Header size: " + packet.data.size + "bytes");

    // Every new streamer must receive this header packet
    mySocket.emit('bufferHeader', packet);
}

presenterMedia.onBufferProcess = function(packet){
    console.log("Buffer sent: " + packet[0].size + "bytes");
    mySocket.emit('stream', packet);
}

presenterMedia.startRecording();
presenterMedia.stopRecording();

ScarletsAudioStreamer

This class is used for buffering and playing microphone stream from the server.

// The minimum duration for audio is ~100ms
var audioStreamer = new ScarletsAudioStreamer(1000); // 1sec

Properties

// Example for accessing the properties
audioStreamer.debug = true;

Method

ScarletsVideoStreamer

This class is used for buffering and playing microphone & camera stream from the server.

Still in experimental mode and have some bug.

// Usually the minimum duration for video is 1000ms
var videoStreamer = new ScarletsVideoStreamer(videoHTML, 1000); // 1sec

Properties

// Example for accessing the properties
videoStreamer.debug = true;

Method

Example

// var audioStreamer = new ScarletsAudioStreamer(1000); // 1sec
var videoStreamer = new ScarletsVideoStreamer(1000); // 1sec
videoStreamer.playStream();

// First thing that must be received
mySocket.on('bufferHeader', function(packet){
    videoStreamer.setBufferHeader(packet);
});

mySocket.on('stream', function(packet){
    console.log("Buffer received: " + packet[0].byteLength + "bytes");
    videoStreamer.receiveBuffer(packet);
});

// Add an effect
var ppDelay = ScarletsMediaEffect.pingPongDelay();

// Stream (source) -> Ping pong delay -> destination
videoStreamer.audioConnect(ppDelay.input);
ppDelay.output.connect(ScarletsMedia.audioContext.destination);

ScarletsMediaPlayer

This class is used for playing video or audio from url.

var mediaPlayer = new ScarletsMediaPlayer(document.querySelector('audio'));

Properties

The videoContext still in experimental mode and haven't been implemented.

// Example for accessing the properties
mediaPlayer.preload = "metadata";

Method

Below also the available method.

prepare

Load media from URL

mediaPlayer.prepare('my.mp3' /*single*/ || /*with fallback*/ ['my.mp3', 'fallback.ogg'], function(){
    mediaPlayer.play();
});

on

Register event callback

mediaPlayer.on('loadedmetadata', function(e){
    // See at the property above
    console.log(e.target.duration);
});

off

Un-register event callback

mediaPlayer.off('abort');

once

Register event callback and remove listener after called

mediaPlayer.once('abort', function(e){
    alert('User aborted the buffer');
});

Available Events

playlistchange the callback function will get (player, playlist, index) as the arguments.

Video Properties

// Example for accessing the properties
mediaPlayer.poster = 'url.png';

Properties

audioFadeEffect

Enable fade effect when playing or pausing the sound

mediaPlayer.audioFadeEffect = true;

audioOutput

Can be used to connect the media to other effect or plugin like equalizer

// Create equalizer and pass audio output as equalizer input
var equalizer = ScarletsMediaEffect.equalizer(null, mediaPlayer.audioOutput);

// Connect to final destination
equalizer.output.connect(ScarletsMedia.audioContext.destination);

ScarletsMediaEffect

This feature can be used on every media if you have the media source node as the input. And make sure every node is connected to AudioContext.destination or it will not playable.

The plugins have a function to destroy node connection that aren't being used. So don't forget to destroy your unused effect to clean unused memory.

effect.destroy();

Available Plugin

// Directly connect audio output as an input for ping pong delay plugin
var ppDelay = ScarletsMediaEffect.pingPongDelay(mediaPlayer.audioOutput);

// Create StereoPanner handler
var panner = ScarletsMediaEffect.stereoPanner(/* input [optional] */);
// panner.input (will be available if no input passed on plugin)

// Connect ppDelay output to panner input
ppDelay.output.connect(panner.input);

// Modify the plugin (Still need to be documented)
panner.set(-1); // Left channel

// Connect to final destination
panner.connect(ScarletsMedia.audioContext.destination);

// Visualization
// player.audioOutput -> pingPongDelay -> Panner -> final destination

Playlist

This will be available on current media player

Properties

// Example for accessing the properties
console.log('Current playlist count', mediaPlayer.playlist.original.length);

Method

reload

Replace old playlist data

mediaPlayer.playlist.reload([{
    yourProperty:'',
    stream:['main.mp3', 'fallback.ogg']
}, ...]);

add

Add new data to playlist

mediaPlayer.playlist.add({
    yourProperty:'',
    stream:['main.mp3', 'fallback.ogg']
});

remove

Remove original playlist data by index

// mediaPlayer.playlist.original[0]
mediaPlayer.playlist.remove(0);

next

Play next music, this will also trigger playlistchange event

mediaPlayer.playlist.next();

previous

Play previous music, this will also trigger playlistchange event

mediaPlayer.playlist.previous();

play

Play music by index

// mediaPlayer.playlist.list[0]
mediaPlayer.playlist.play(0);

shuffle

Shuffle the playlist

// mediaPlayer.playlist.list
mediaPlayer.playlist.shuffle(true || false);

Contribution

If you want to help in SFMediaStream please fork this project and edit on your repository, then make a pull request to here. Otherwise, you can help with donation via patreon.

Compile from source

After you downloaded this repo you need to install some devDependencies.

$ npm i
$ gulp watch

After you make some changes on /src it will automatically compile into /dist/SFMediaStream.js. Make sure you cleared your cache when doing some experiment.

License

SFMediaStream is under the MIT license.

But don't forget to put the a link to this repository.