JavaScript
Unleash real-time audio/video, live streaming, cloud recording, transcriptions, language translation, and more in your web and mobile apps with the versatile Sariska Media JavaScript APIs.
Key Features:
Seamlessly integrate with various JavaScript frameworks (Vanilla, React, Angular, Vue, Electron, NW, React Native, and more).
Access a rich set of features for audio/video conferencing, live streaming, cloud recording, transcriptions, language translation, virtual backgrounds, and more.
Maintain persistent, low-latency connections for real-time data exchange.
Installation
Step 1 : Install Sariska Media Transport Library
With NPM
npm i sariska-media-transportWith CDN
Add a script tag to your HTML head
Compatibility for React Native: Polyfill Required
At the very beginning of your index.js file, insert the following import statement:
Step 2 : Initialize the SDK
Kickstart the SDK with this simple command:
Step 3 : Establish a WebSocket Connection
Create a persistent connection for real-time communication.
Step 4 : Initiate a Conference
Create a Jitsi-powered conference for real-time audio and video
Step 5 : Capture Local Stream
Media Stream
A MediaStream is a collection of audio or video tracks, represented by MediaStreamTrack objects.
Each MediaStreamTrack can have multiple channels (e.g., left and right channels in a stereo audio track).
Capture Local Tracks
Define options:
Specify desired devices ("audio", "video", or "desktop").
Set preferred video resolution.
Optionally configure specific devices, frame rates, screen sharing options, and facing mode.
Create Local Tracks
Step 6 : Play Local Stream
Step 7 : Handle User Joined Event
This event is triggered when a new user joins the conference. Moderators have exclusive control over meetings and can manage participants. To assign a moderator, set the moderator value to true when generating the token.
Step 8 : Publish Streams
Make audio and video streams visible to others in the conference by publishing them using the following code:
Step 9 : Play Remote Peers Streams
Additional methods for remote tracks:
getType():Returns the track type (audio, video, or desktop)stream.toURL():Returns the stream URLgetId():Returns the track IDisMuted():Checks if the track is mutedgetParticipantId():Returns the participant ID associated with the trackisLocal():Checks if the track is localattach():Attaches the track to an audio or video elementdetach():Detaches the track from an audio or video element
Additional methods for remote tracks:
getType():Returns the track type (audio, video, or desktop)getStreamURL():Returns the URL of the streamgetId():Returns the ID of the trackisMuted():Checks if the track is mutedgetParticipantId():Returns the ID of the participant who owns the trackisLocal():Checks if the track is local
Additional RTCView properties for styling:
mirror:Mirrors the video horizontally (true or false)cover:Controls how the video fills the view ("contain" or "cover")zOrder:Sets the stacking order of the view (0 or 1)
Analytics
Sariska-media-transport offers pre-configured events to help you track and analyze user interactions, media usage, and overall performance. This data can be used to enhance your product, improve user experience, and make informed decisions.
Available Events
Here are some of the key events you can track:
User Actions:
User joined
User left
Media Usage:
Conference duration
Camera duration
Audio track duration
Video track duration
Recording:
Recording started
Recording stopped
Local recording started
Local recording stopped
Transcription:
Transcription started
Transcription stopped
Performance:
Speaker stats
Connection stats
Browser performance stats
Add Event Listener to Track Events
Features
Sariska offers powerful features to enhance your application's capabilities. Find your desired feature using the search bar or explore below!
Active/Dominant Speaker
Identify the main speaker: Easily detect the active or dominant speaker in a conference. Choose to stream only their video for improved resolution and reduced bandwidth usage. Ideal for one-way streaming scenarios like virtual concerts.
Last N Speakers
Dynamically showcase recent speakers: Focus on the active conversation by displaying video only for the last N participants who spoke. This automatically adjusts based on speech activity, offering a more efficient and relevant view.
Participant Information
Set local participant properties: Define additional information about participants beyond the default settings. This can include screen-sharing status, custom roles, or any other relevant attributes.
Participant Count
Get the total number of participants: Retrieve the complete participant count, including both visible and hidden members.
Participant Lists
Access all participants: Obtain a list of all participants, including their IDs and detailed information.
All Participants as an Object
Advanced manipulation: You can directly access the conference object for more granular control over conference behavior.
Pinning Participants
Pin a single participant: Pin a specific participant to always receive their video, even when "last n" is enabled.
Pin multiple participants: Pin an array of participants to always receive their videos.
Access Local User Details
Retrieve the local user's ID: Get the ID of the local user.
Retrieve the local user's information: Get comprehensive details about the local user, including name, email, ID, and avatar.
Retrieve the local user's role: Get the role of the local user (For example, participant, moderator, owner).
Manage Tracks
Get all remote tracks: Retrieve a list of all remote tracks (audio and video) in the conference.
Get all local tracks: Retrieve a list of all local tracks (audio and video)
Breakout Rooms
Split your conference meeting into smaller, focused groups with unique audio and video. Moderators can create rooms, assign participants, and reunite everyone seamlessly.
Access breakout rooms: Get an instance to manage breakout rooms.
Create a breakout room: Create a new breakout room with the specified subject.
Remove a breakout room: Remove the current breakout room (if applicable).
Check for breakout room status: Determine if the current room is a breakout room.
Send a participant to a breakout room: Move a participant to a specific breakout room.
Kick Participants
Listen for participant kick events
Kick a participant
Kick a moderator
Manage Owner Roles
The room creator has a moderator role, while other users have a participatory role.
Grant owner rights
Listen for role changes
Revoke owner rights:
Change Display Names
Setting a new display name
Listen for display name changes
Lock/Unlock Room
Lock room: Moderators can restrict access to the room with a password.
Unlock room: Removes any existing password restriction.
Subtitles
Request subtitles: Enable subtitles for spoken content.
Request language translation: Translate subtitles into a specific language.
af
Afrikaans
ar
Arabic
bg
Bulgarian
ca
Catalan
cs
Czech
da
Danish
de
German
el
Greek
en
English
enGB
English (United Kingdom)
eo
Esperanto
es
Spanish
esUS
Spanish (Latin America)
et
Estonian
eu
Basque
fi
Finnish
fr
French
frCA
French (Canadian)
he
Hebrew
hi
Hindi
hr
Croatian
hu
Hungarian
hy
Armenian
id
Indonesian
it
Italian
ja
Japanese
kab
Kabyle
ko
Korean
lt
Lithuanian
ml
Malayalam
lv
Latvian
nl
Dutch
oc
Occitan
fa
Persian
pl
Polish
pt
Portuguese
ptBR
Portuguese (Brazil)
ru
Russian
ro
Romanian
sc
Sardinian
sk
Slovak
sl
Slovenian
sr
Serbian
sq
Albanian
sv
Swedish
te
Telugu
th
Thai
tr
Turkish
uk
Ukrainian
vi
Vietnamese
zhCN
Chinese (China)
zhTW
Chinese (Taiwan)
mr
Marathi
Receive subtitles: Listen for incoming subtitles.
Stop subtitles: Disable subtitles.
Screen Share
Start screen share: Share your screen with other participants.
Stop screen share: Stop sharing your screen.
Messages
Sariska offers robust messaging capabilities for both private and group communication scenarios.
Send and Receive Private Text Messages
Send and Receive Private Payload
Send and Receive Group Text Messages
Send and Receive Group Payload
Transcription
Start Transcription: Initiate transcription for the ongoing conference.
Stop Transcription: Stop transcription and get a download link for the transcript.
Mute/Unmute Participants
Mute Remote Participant
Mute/Unmute Local Participant
Connection Quality
Local Connection Statistics Received
Remote Connection Statistics Received
Audio
No Audio Signal
Audio Input State Changed
Audio Level Indicator
Noise Detection
Detect excessive noise from the microphone used in the conference.
Talk While Muted Detection
Noise Suppression/Cancellation
Reduces background noise from audio signals using a recurrent neural network (RNN).
Virtual Background
Change the background behind you in video calls with various options:
Image: Define a static image as the background
Blur: Blur the background for a subtle effect
Screen Share: Show your computer screen as the background
Start and Stop Virtual Background Effect
Start: Apply the effect to your local video track
Stop: Remove the effect from your video track
Capture Screenshots of Shared Screen
Periodically capture screenshots of your screen share (e.g., every 30 seconds) and upload them to your server for analysis.
Start capturing
Stop capturing
CallStats Integration
Monitor your WebRTC application performance using CallStats (or build your own). See the "RTC Stats" section for details.
Internet Connectivity Status
This ensures seamless connectivity even in the face of fluctuating internet connections. It automatically manages connections and disconnections as needed.
Speaker Stats
Get valuable insights into the current conversation, specifically focusing on speaker dominance. It analyzes the interaction and estimates how long each participant has held the dominant speaker role.
Connection Stats
Gain insights into the connection quality of conference participants.
audioSsrc
The audio SSRC (Synchronization Source identifier)
bandwidth
The estimated available bandwidth in bits per second
bitrate
The current media bitrate in bits per second
bridgeCount
The number of bridges in use
codec
The codec being used for media transmission
connectionSummary
A brief summary of the connection quality (e.g., "Good", "Fair", "Poor")
e2eRtt
The estimated end-to-end round-trip time in milliseconds
participantId
The ID of the participant
framerate
The current media framerate in frames per second
isLocalVideo
Indicates whether the stats are for the local participant's video
maxEnabledResolution
The maximum resolution enabled for the participant
packetLoss
The percentage of packet loss
region
The region where the participant is located
resolution
The current resolution of the media stream
serverRegion
The region of the server handling the connection
shouldShowMore
Indicates whether more detailed connection stats are available
videoSsrc
The video SSRC
transport
The transport protocol being used (e.g., "UDP", "TCP")
Web Audio Mixer
Combine multiple audio tracks into a single, unified audio stream.
End-to-End Encryption
Empower your application with robust end-to-end encryption, ensuring secure communication for your users.
Enable End-to-End Encryption
Disable End-to-End Encryption
Join Muted/Silent
Join conferences with audio and video already muted, or in a silent mode where no audio is transmitted or received. This ensures a seamless experience and respects participant preferences.
Join with Muted Audio and Video
Join in Silent Mode
Live Stream
Broadcast your conference to multiple platforms simultaneously. Embed live streams directly into your app or website using various formats.
Cloud Recording
Store your recordings and transcriptions in various cloud storage services.
PSTN
Dial-in(PSTN)
Dial-out(PSTN)
Lobby/Waiting Room
SIP Video Gateway
Peer-to-Peer Mode
Designed for efficient communication between two participants.
- Start Peer-to-Peer Mode
Sariska automatically activates Peer-to-Peer mode when your conference has exactly two participants. This mode bypasses the central server and directly connects participants, maximizing bandwidth efficiency and reducing latency. However, even with more than two participants, you can forcefully start Peer-to-Peer mode.
One-to-One Calling (React Native Only)
This allows synchronous phone calls, similar to WhatsApp, even if the receiver's app is closed or in the background.
Initiating Calls:
Make a call even if the callee's app is closed or in the background.
Play a busy tone if the callee is on another call or disconnects your call.
Play ringtone/ringback/DTMF tones.
Step 1 : Caller Initiates Call
HTTP Call to Sariska Server
{API Method}
Push Notification to callee using Firebase or APNS
This notifies the receiver even if their app is closed or in the background.
Step 2 : Callee Responds to Call
Reads Push Notification (using react-native-callkeep)
Processes the notification even if the app is closed or in the background.
HTTP Call to Update Status
{API Method}
No need to join conference via SDK
Status update through the HTTP call suffices.
Step 3 : Caller Receives Response
Listens for USER_STATUS_CHANGED event
Step 4 : After Connection Established
The call proceeds like a normal conference call.
React Native Libraries:
react-native-callkeep: Handles notifications and call events even when the app is closed or in the background.
react-native-incall-manager: Manages device events like headset state, proximity sensors, and audio routing.
Last updated