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

With CDN

Add a script tag to your HTML head

<script src="https://sdk.sariska.io/umd/sariska-media-transport.min.js"></script>

Compatibility for React Native: Polyfill Required

At the very beginning of your index.js file, insert the following import statement:

import 'sariska-media-transport/dist/esm/modules/mobile/polyfills';

This is only required for React Native applications.

Step 2 : Initialize the SDK

Kickstart the SDK with this simple command:

import SariskaMediaTransport from "sariska-media-transport";
SariskaMediaTransport.initialize();

Step 3 : Establish a WebSocket Connection

Create a persistent connection for real-time communication.

const token = {your-token};

const connection = new SariskaMediaTransport.JitsiConnection(token, "roomName", isNightly);

connection.addEventListener(SariskaMediaTransport.events.connection.CONNECTION_ESTABLISHED, () => {
  console.log('connection successful!!!');
});

// Handle connection events
connection.addEventListener(SariskaMediaTransport.events.connection.CONNECTION_FAILED, (error) => {
    // Token expired, set again
    if (error  === SariskaMediaTransport.events.connection.PASSWORD_REQUIRED) {
    // Set a new token
    connection.setToken(token)
    console.log('connection disconnect!!!', error);
  }
});

connection.addEventListener(SariskaMediaTransport.events.connection.CONNECTION_DISCONNECTED, (error) => {
  console.log('connection disconnect!!!', error);
});

connection.connect();

Use isNightly: true to access the latest features, or omit it for the stable version.

Step 4 : Initiate a Conference

Create a Jitsi-powered conference for real-time audio and video

const conference = connection.initJitsiConference(options);
conference.join();

Customize conference

To join with audio muted

startAudioMuted: true

To join with video muted

startVideoMuted: true

To join with startSilent no audio receive/send

startSilent: true

To enable rtcstats tracking analytics

rtcstatsServer: ""

CallStats ID

callStatsID: ""

CallStats Secret

callStatsSecret: ""

Last n speakers

channelLastN: 10

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.

const options = {
  devices: ["audio", "video"],
  resolution: 240,
}

Customize tracks

devices:

• Type: Array of strings

• Values: "desktop", "video", "audio"

• Purpose: Specifies which devices to request from the browser's GetUserMedia (GUM) API.

• Default: If this property is not set, GUM will attempt to access all available devices.

resolution:

• Type: String

• Values: 180, 240, 360, vga, 480, qhd, 540, hd, 720, fullhd, 1080, 4k, 2160

• Purpose: Sets the preferred resolution for the local video stream.

cameraDeviceId

• Type: String

• Purpose: Specifies the device ID of the camera to use.

micDeviceId

• Type: String

• Purpose: Specifies the device ID of the microphone to use.

minFps

• Type: Integer

• Purpose: Sets the minimum frame rate for the video stream.

maxFps

• Type: Integer

• Purpose: Sets the maximum frame rate for the video stream.

desktopSharingFrameRate

• Type: Object

• Properties:

  • min: Minimum frame rate for desktop sharing

  • max: Maximum frame rate for desktop sharing

desktopSharingSourceDevice

• Type: String

• Purpose: Specifies the device ID or label of the video input source to use for screen sharing.

facingMode

• Type: String

• Values: "user", "environment"

• Purpose: Sets the camera's facing mode (front-facing or back-facing).

firePermissionPromptIsShownEvent

• Type: Boolean

• Purpose: If set to true, fires a JitsiMediaDevicesEvents.PERMISSION_PROMPT_IS_SHOWN event when the browser displays the GUM permission prompt.

fireSlowPromiseEvent

• Type: Boolean

• Purpose: If set to true, fires a JitsiMediaDevicesEvents.USER_MEDIA_SLOW_PROMISE_TIMEOUT event if the browser takes too long to resolve the GUM promise. Cannot be used with firePermissionPromptIsShownEvent

Create Local Tracks

const localTracks = await SariskaMediaTransport.createLocalTracks(options);

Manage and modify media streams

Check Stream Properties:

• track.isLocal()

Determines whether the track is local or remote. Returns a boolean value true for local tracks, false for remote tracks.

• track.isMuted()

Checks if the track is currently muted. Returns true if muted, false if not.

• track.stream.toURL

Retrieves the URL of the stream, allowing access to the media content.

Retrieve Track Information:

• track.getType()

Identifies the track type, which can be "audio", "video", or "desktop".

• track.getId()

Obtains the unique identifier assigned to the track.

• track.getDeviceId()

Determines the device ID associated with the track, providing information about the physical source of the media.

• track.getParticipantId()

Returns the ID of the participant to whom the track belongs.

Manage Track State:

• track.switchCamera()

Switches the camera source between the front and back cameras (for video tracks).

• track.mute()

Mutes the track, preventing its audio or video from being transmitted.

• track.unmute()

Unmutes a previously muted track, resuming transmission.

Attach & Detach Tracks:

• track.attach()

Pairs the track with an HTML audio or video element, enabling playback within a web page.

• track.detach()

Disconnects the track from its associated audio or video element.

Track Disposal:

• track.dispose()

Releases the track's resources, effectively ending its use and freeing up memory.

Step 6 : Play Local Stream

Browsers

// Access local media tracks
const audioTrack = localTracks.find(track=>track.getType()==="audio");
const videoTrack = localTracks.find(track=>track.getType()==="video");

// Play video
videoTrack.attach(document.getElementById("videoElement"))

// Play audio
audioTrack.attach(document.getElementById("audioElement"))

React Native

// Install webRTC library
npm i react-native-webrtc

// Import RTCView from react-native-webrtc to render the live video stream
import {RTCView} from 'react-native-webrtc';

// Access local video track
const videoTrack = localTracks.find(track=>track.getType()==="video");;

// Render video
return {videoTrack.getType() === "video" && <RTCView streamURL={videoTrack.stream?.toURL()}/>}

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.

Moderator permissions

• Password Protection:

Ability to add a password to the meeting room, restricting access.

• Role Assignment:

Ability to grant moderator privileges to other participants.

• Participant Removal:

Ability to kick non-moderators or even other moderators from the meeting.

• Audio Control:

Ability to mute individual participants or all participants at once.

• Video Focus:

Ability to make everyone's video view follow the moderator's video.

• Joining Settings: Ability to:

  • Set participants to join with audio muted by default.

  • Set participants to join with video disabled by default.

• Lobby Management:

Ability to enable or disable the lobby room, requiring approval for participants to join.

• Join Approval:

Ability to approve or deny join requests when the lobby is enabled.

• Encryption (Beta):

Ability to enable end-to-end encryption (where available).

• Moderator Transfer:

If the current moderator leaves the meeting, a new moderator is automatically selected.

conference.addEventListener(SariskaMediaTransport.events.conference.USER_JOINED, function(id, participant) {
  console.log("user joined!!!", id, participant);
});

Joined participant properties

avatar:

• Type: String

• Purpose: Used to display their profile picture in the UI.

email:

• Type: String

• Purpose: May be used for identification or communication purposes.

moderator:

• Type: Boolean

• Purpose: Used to control moderation-related features in the UI.

audioMuted:

• Type: Boolean

• Purpose: Used to display the audio muted state in the UI.

videoMuted:

• Type: Boolean

• Purpose: Used to display the video muted state in the UI.

displayName:

• Type: String

• Purpose: Used to identify them in the UI.

role:

• Type: String

• Purpose: Used to determine their permissions and UI features.

status:

• Type: String

• Purpose: Used to display ("online", "offline", "away") their availability in the UI.

hidden:

• Type: Boolean

• Purpose: Typically used for bots like transcribers or recorders.

botType:

• Type: String

• Purpose: Used to identify the bot's purpose and capabilities.

Step 8 : Publish Streams

Make audio and video streams visible to others in the conference by publishing them using the following code:

localTracks.forEach(track => conference.addTrack(track));

Step 9 : Play Remote Peers Streams

Browsers

const remoteTracks = [];

conference.addEventListener(SariskaMediaTransport.events.conference.TRACK_ADDED, function(track) {
  remoteTracks.push(track);
});

remoteTracks.forEach(track => {
    if (track.getType() === "audio") {
        RemoteContainer.append(track.attach(document.getElementById("remoteAudioElemId")));
    }
    
    if (track.getType() === "video") {
        RemoteContainer.append(track.attach(document.getElementById("remoteVideoElemId")));
    }
});

Additional methods for remote tracks:

• getType(): Returns the track type (audio, video, or desktop)

• stream.toURL(): Returns the stream URL

• getId(): Returns the track ID

• isMuted(): Checks if the track is muted

• getParticipantId(): Returns the participant ID associated with the track

• isLocal(): Checks if the track is local

• attach(): Attaches the track to an audio or video element

• detach(): Detaches the track from an audio or video element

React Native

npm i react-native-webrtc

const remoteTracks = [];

conference.addEventListener(SariskaMediaTransport.events.conference.TRACK_ADDED, function(track) {
  remoteTracks.push(track);
});

return {
  remoteTracks.map(track => {
    if (track.getType() === "video") {
      return <RTCView streamURL={track.stream.toURL()}/>
    }
  })
};

Additional methods for remote tracks:

• getType(): Returns the track type (audio, video, or desktop)

• getStreamURL(): Returns the URL of the stream

• getId(): Returns the ID of the track

• isMuted(): Checks if the track is muted

• getParticipantId(): Returns the ID of the participant who owns the track

• isLocal(): 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

conference.addEventListener(SariskaMediaTransport.events.conference.ANALYTICS_EVENT_RECEIVED,  (payload)=> {
  // Construct the payload
  const { name, action, actionSubject, source, attributes } = payload;
})

Payload

• name: The name of the event (string)

• action: The action associated with the event (string)

• actionSubject: The subject of the action (string)

• source: The source of the event (string)

• attributes: Additional attributes of the event (JSON)

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.

// Listen for changes in the dominant speaker
conference.addEventListener(SariskaMediaTransport.events.conference.DOMINANT_SPEAKER_CHANGED, id=> {
  console.log(id) // Dominant speaker ID
});

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.

// Track changes in the "last N" speakers
conference.addEventListener(SariskaMediaTransport.events.conference.LAST_N_ENDPOINTS_CHANGED, (leavingEndpointIds, enteringEndpointIds)=> {
   console.log(leavingEndpointIds) //Array of ID's of users leaving lastN
   console.log(enteringEndpointIds) //Array of ID's of users entering lastN
});

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.

// Set a local participant property
conference.setLocalParticipantProperty(key, value);

// Remove a local participant property
conference.rempveLocalParticipantProperty(key)

// Get the value of a local participant property 
conference.getLocalParticipantProperty(key)

// Listen for changes in participant properties
conference.addEventListener(SariskaMediaTransport.events.conference.PARTICIPANT_PROPERTY_CHANGED, (participant, key,oldValue, newValue) => {
});

Participant Count

Get the total number of participants: Retrieve the complete participant count, including both visible and hidden members.

conference.getParticipantCount();
// Pass true to include hidden participants

Some conferences may include hidden participants besides attendees, such as bots assisting with recording, transcription, or pricing.

Participant Lists

Access all participants: Obtain a list of all participants, including their IDs and detailed information.

// Get all participants
conference.getParticipants(); // Array of {participantId: details} objects

// Get participants without hidden users
conference.getParticipantsWithoutHidden(); // Array of {participantId: details} objects

All Participants as an Object

Advanced manipulation: You can directly access the conference object for more granular control over conference behavior.

conference.participants; // {participantId: details}

Pinning Participants

• Pin a single participant: Pin a specific participant to always receive their video, even when "last n" is enabled.

conference.pinParticipant(participantId)

• Pin multiple participants: Pin an array of participants to always receive their videos.

conference.pinParticipant(participantIds)

Access Local User Details

• Retrieve the local user's ID: Get the ID of the local user.

conference.myUserId();

• Retrieve the local user's information: Get comprehensive details about the local user, including name, email, ID, and avatar.

conference.getLocalUser();

• Retrieve the local user's role: Get the role of the local user (For example, participant, moderator, owner).

conference.getRole();

Manage Tracks

• Get all remote tracks: Retrieve a list of all remote tracks (audio and video) in the conference.

conference.getRemoteTracks();

• Get all local tracks: Retrieve a list of all local tracks (audio and video)

conference.getLocalTracks();

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.

const breakoutRooms  = conference.getBreakoutRooms();

• Create a breakout room: Create a new breakout room with the specified subject.

breakoutRooms.createBreakoutRoom("room subject");

• Remove a breakout room: Remove the current breakout room (if applicable).

breakoutRooms.removeBreakoutRoom();

• Check for breakout room status: Determine if the current room is a breakout room.

breakoutRooms.isBreakoutRoom();

• Send a participant to a breakout room: Move a participant to a specific breakout room.

breakoutRooms.sendParticipantToRoom(participantJid, roomJid)

Kick Participants

• Listen for participant kick events

conference.addEventListener(SariskaMediaTransport.events.conference.KICKED, (id)=> { // Handle a participant being kicked by a moderator
// The kicked participant's ID is available in the `id` variable
});

conference.addEventListener(SariskaMediaTransport.events.conference.PARTICIPANT_KICKED, (actorParticipant, kickedParticipant, reason) => { // Handle a moderator being kicked by another moderator
// Information about the actor, kicked participant, and reason is available in the event arguments
});

• Kick a participant

confernece.kickParticipant(id)

• Kick a moderator

confernece.kickParticipant(id, reason) // Kick a moderator, providing a reason for the kick

Manage Owner Roles

The room creator has a moderator role, while other users have a participatory role.

• Grant owner rights

conference.grantOwner(id) // Grant owner rights to a participant

• Listen for role changes

conference.addEventListener(SariskaMediaTransport.events.conference.USER_ROLE_CHANGED, (id, role) => {
      if (cofenerece.user.id === id ) {
          console.log(`My role changed, new role: ${role}`);
      } else {
          console.log(`Participant role changed: ${role}`);
      }
  });

• Revoke owner rights:

conference.revokeOwner(id) // Revoke owner rights from a participant

Change Display Names

• Setting a new display name

conference.setDisplayName(name); // Change the local user's display name

• Listen for display name changes

conference.addEventListener(SariskaMediaTransport.events.conference.DISPLAY_NAME_CHANGED, (id, displayName)=> { // Handle display name changes for other participants
// Access the participant ID
});

Lock/Unlock Room

• Lock room: Moderators can restrict access to the room with a password.

conference.lock(password); // Lock the room with the specified password

• Unlock room: Removes any existing password restriction.

conference.unlock();

Subtitles

• Request subtitles: Enable subtitles for spoken content.

conference.setLocalParticipantProperty("requestingTranscription", true);

• Request language translation: Translate subtitles into a specific language.

conference.setLocalParticipantProperty("translation_language", 'hi'); // Example for Hindi

Language Code	Language Name
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.

conference.addEventListener(SariskaMediaTransport.events.conference.SUBTITLES_RECEIVED, (id, name, text)=> {
// Handle received subtitle data (id, speaker name, text)
});

• Stop subtitles: Disable subtitles.

confernence.setLocalParticipantProperty("requestingTranscription", false);

Screen Share

• Start screen share: Share your screen with other participants.

const desktopTrack = await SariskaMediaTransport.createLocalTracks({devices: ["desktop"]});

conference.addtrack(desktopTrack[0]);

• Stop screen share: Stop sharing your screen.

  await conference.removeTrack(desktopTrack); 

Messages

Sariska offers robust messaging capabilities for both private and group communication scenarios.

• Send and Receive Private Text Messages

// Send a private text message to a specific participant
conference.sendMessage("message", participantId);

// Listen for incoming private text messages
conference.addEventListener(SariskaMediaTransport.events.conference.PRIVATE_MESSAGE_RECEIVED, (participantId, message)=>{ 
});

• Send and Receive Private Payload

// Send a private payload to a specific participant
conference.sendEndpointMessage(to, payload);

// Listen for incoming private payloads 
conference.addEventListener(SariskaMediaTransport.events.conference.ENDPOINT_MESSAGE_RECEIVED, (participant, payload)=>{
});

• Send and Receive Group Text Messages

// Send a group text message to all participants
conference.sendMessage("message", participantId);

// Listen for incoming group text messages
conference.addEventListener(SariskaMediaTransport.events.conference.MESSAGE_RECEIVED, (participantId, message)=>{
});

• Send and Receive Group Payload

// Send a group payload to all participants
conference.sendEndpointMessage('', payload);

// Listen for incoming group payloads
conference.addEventListener(SariskaMediaTransport.events.conference.ENDPOINT_MESSAGE_RECEIVED, (participant, payload)=>{
});

Transcription

• Start Transcription: Initiate transcription for the ongoing conference.

conference.startTranscriber();

• Stop Transcription: Stop transcription and get a download link for the transcript.

conference.stopTranscriber();

Mute/Unmute Participants

• Mute Remote Participant

conference.muteParticipant(participantId, mediaType)
// participantId: ID of the participant to be muted
// mediaType: Type of media to mute ('audio' or 'video')

The moderator has the ability to temporarily silence the microphone of any participant who is not physically present in the meeting room.

• Mute/Unmute Local Participant

// Mute a local track (audio or video)
track.mute()

// Unmute a previously muted local track
track.unmute()

// Check if a local track is currently muted
track.isMuted()

Connection Quality

• Local Connection Statistics Received

conference.addEventListener(SariskaMediaTransport.events.conference.LOCAL_STATS_UPDATED,  (stats)=>{
// Handle local connection statistics
});

• Remote Connection Statistics Received

conference.addEventListener(SariskaMediaTransport.events.conference.REMOTE_STATS_UPDATED, (id, stats)=>{
// Handle remote connection statistics
});

Audio

• No Audio Signal

// Triggered when the conference audio input loses signal
conference.addEventListener(SariskaMediaTransport.events.conference.NO_AUDIO_INPUT,  () => {
// Handle the absence of audio input
});

• Audio Input State Changed

// Triggered when the audio input state switches between having or not having audio input
conference.addEventListener(SariskaMediaTransport.events.conference.AUDIO_INPUT_STATE_CHANGE, hasAudioInput => {
// Handle changes in audio input state
});

• Audio Level Indicator

conference.addEventListener(SariskaMediaTransport.events.conference.TRACK_AUDIO_LEVEL_CHANGED, function() {
// Handle audio level change events
});

• Noise Detection

Detect excessive noise from the microphone used in the conference.

conference.addEventListener(SariskaMediaTransport.events.conference.NOISY_MIC, function () {
// Handle noisy mic events, such as notifying the user or adjusting settings
});

• Talk While Muted Detection

conference.addEventListener(SariskaMediaTransport.events.conference.TALK_WHILE_MUTED, function () {
// Handle talk while muted events, such as providing a visual indicator
});

• Noise Suppression/Cancellation

Reduces background noise from audio signals using a recurrent neural network (RNN).

await SariskaMediaTransport.effects.createRnnoiseProcessor();

Rnnoise uses a powerful RNN to silence unwanted noise in your audio. This open-source library can significantly enhance audio quality.

Virtual Background

Change the background behind you in video calls with various options:

• Image: Define a static image as the background

const options  = {
      // Enable virtual background
      backgroundEffectEnabled: true,
      // Choose image background
      backgroundType: "image",
      // URL of the image
      virtualSource: "https://image.shutterstock.com/z/stock-photo-jasna-lake-with-beautiful-reflections-of-the-mountains-triglav-national-park-slovenia-1707906793.jpg"
};

const effect = await SariskaMediaTransport.effects.createVirtualBackgroundEffect(options);

• Blur: Blur the background for a subtle effect

const options  = {
      // Enable virtual background
      backgroundEffectEnabled: true,
      // Choose blur background
      backgroundType: "blur",
      // Adjust blur intensity (0-100)
      blurValue: 25
}
  
const effect = await SariskaMediaTransport.effects.createVirtualBackgroundEffect(options);

• Screen Share: Show your computer screen as the background

const [ desktopTrack ] = await SariskaMediaTransport.createLocalTracks({devices: ["desktop"]});

const options = {
      // Enable virtual background
      backgroundEffectEnabled: true,
      // Choose screen share background
      backgroundType: "desktop-share",
      virtualSource: desktopTrack
}

const effect = await SariskaMediaTransport.effects.createVirtualBackgroundEffect(options);

Start and Stop Virtual Background Effect

• Start: Apply the effect to your local video track

const videoTrack = localTracks.find(track=>track.getType()==="video"); // Get your video track

await videoTrack.setEffect(effect);

• Stop: Remove the effect from your video track

  await videoTrack.setEffect(undefined);

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

const [ desktopTrack ] = await SariskaMediaTransport.createLocalTracks({devices: ["desktop"]});
const effect = await SariskaMediaTransport.effects.createScreenshotCaptureEffect(processScreenShot);
await effect.startEffect(
    desktopTrack.getOriginalStream(),
    desktopTrack.videoType
    );

// Process the captured screenshot
const processScreenShot = (canvas) => {
    var dataURL = canvas.toDataURL();
    console.log("data", dataURL);
    // Upload dataURL to your server
    }                    

• Stop capturing

effect.stopEffect()

CallStats Integration

Monitor your WebRTC application performance using CallStats (or build your own). See the "RTC Stats" section for details.

const options = {callStatsID: 'callstats-id', callStatsSecret: 'callstats-secret'}
const conference = connection.initJitsiConference(options);

Internet Connectivity Status

This ensures seamless connectivity even in the face of fluctuating internet connections. It automatically manages connections and disconnections as needed.

Browsers

// Update network status and notify Sariska Media Transport
function updateNetwork() {
   // Communicate the current online status to SariskaMediaTransport
   SariskaMediaTransport.setNetworkInfo({isOnline: window.navigator.onLine});
}

// When the browser goes offline, updateNetwork() is called to inform SariskaMediaTransport
window.addEventListener("offline", updateNetwork);

// When the browser comes back online, updateNetwork() is called again to update the status
window.addEventListener("online", updateNetwork);

React Native

npm i @react-native-community/netinfo

import NetInfo from "@react-native-community/netinfo";

// Add an event listener to detect connectivity changes
const unsubscribe = NetInfo.addEventListener(state => {
  // Log the current connection status
  console.log("Is connected?", state.isConnected);
  
  // Update SariskaMediaTransport with the latest connectivity information
  SariskaMediaTransport.setNetworkInfo({isOnline: state.isConnected});
});

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.

conference.getSpeakerStats();

Connection Stats

Gain insights into the connection quality of conference participants.

const connectionStats = conference.getConnectionState();

Connection Stats Properties	Purpose
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.

// Obtain the audio tracks to be mixed
const audioTrack1 = getTracks()[0];
const audioTrack2 = getTracks()[1];

// Create an audio mixer instance
const audioMixer = SariskaMediaTransport.createAudioMixer();

// Add individual audio streams to the mixer
audioMixer.addMediaStream(audioTrack1.getOriginalStream());
audioMixer.addMediaStream(audioTrack2.getOriginalStream());

// Initiate the mixing process and retrieve the resulting mixed stream
const mixedMediaStream = audioMixer.start();

// Extract the mixed audio track from the mixed stream
const mixedMediaTrack = mixedMediaStream.getTracks()[0];

// Maintain synchronization between the mixed track's enabled state and the track using the effect

End-to-End Encryption

Empower your application with robust end-to-end encryption, ensuring secure communication for your users.

• Enable End-to-End Encryption

// Initialize Olm early for E2EE readiness
window.Olm.init().catch(e => {
    console.error('Failed to initialize Olm, E2EE will be disabled', e);
    delete window.Olm; // Remove Olm if initialization fails
});

// Activate E2EE:
conference.toggleE2EE(true); // Enable end-to-end encryption

// Verify E2EE support
conference.isE2EESupported() // Check if E2EE is available

• Disable End-to-End Encryption

conference.toggleE2EE(false); // 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 the conference with both audio and video muted initially
const conference = connection.initJitsiConference({
    startAudioMuted: true, // Mute audio upon joining
    startVideoMuted: true // Mute video upon joining
    });

• Join in Silent Mode

// Join the conference in silent mode, disabling both audio input and output
const conference = connection.initJitsiConference({
    startSilent: true // Enter the conference in silent mode
    });

Live Stream

Broadcast your conference to multiple platforms simultaneously. Embed live streams directly into your app or website using various formats.

// Define streaming destinations and settings
const appData = {
    // Keys for platforms to stream
    streamKeys: [
        {streamKey: "youtube", streamValue: "youtube-stream-key"}, 
        {streamKey: "facebook", streamValue: "facebook-stream-key"}, 
        {streamKey: "twitch", streamValue: "twitch-stream-key"}, 
        {streamKey: "vimeo", streamValue: "vimeo-stream-key"}, 
        {streamKey: "periscope", streamValue: "periscope-stream-key"}, 
        {streamKey: "instagram",streamValue: "instagram-stream-key"}
        // Add keys for other platforms as needed
        ],
    // Optional list of additional RTMP URLs for streaming
    streamUrls: ["rtmp://test-rtmp-url-1", "rtmp://test-rtmp-url-2", "rtmp://test-rtmp-url-n"],
    isRecording: false,
    // Specify "live" for embedding the stream
    app: "live",
    stream: "livestream"
}

// app and stream: If you want to embed live streaming to your app or website just pass app and stream then you can embed and play live streaming in your platform for HTTP-FLV, HLS, DASH and HDS, mp3, aac

* Play HTTP-FLV:  https://edge.sariska.io/http-flv/live/livestream.flv
* Play HLS:  https://edge.sariska.io/hls/live/livestream.m3u8
* Play DASH: https://edge.sariska.io/dash/live/livestream.mpd
* Play MP3:  https://edge.sariska.io/mp3/live/livestream.mp3
* Play AAC:  https://edge.sariska.io/acc/live/livestream.aac


// Start live recording with configuration data
conference.startRecording({
    mode: SariskaMediaTransport.constants.recording.mode.STREAM, // Set mode to "stream"
    appData: JSON.stringify(appData) // Pass app data as JSON string
});


// Listen for RECORDER_STATE_CHANGED event to track streaming status
conference.addEventListener("RECORDER_STATE_CHANGED", (payload)=>{ 
    // Verify mode is "stream" again
    const mode = payload._mode;
    // Get the live streaming session ID
    const sessionId =  payload._sessionID;
    // Check the streaming status: on, off, or pending
    const status =  payload._status; 
});


// Stop live streaming using the session ID
conference.stopRecording(sessionId);

Cloud Recording

Store your recordings and transcriptions in various cloud storage services.

Supported storage providers

1. Object-based storage: Amazon S3, Google Cloud Storage, Azure Blob Storage, other S3-compatible cloud providers.

2. Dropbox

Set credentials

1. Object-based storage

   • Access your Sariska dashboard

   • Locate the storage credentials section

   • Enter the required credentials for your chosen provider

1. Dropbox

   • Obtain a Dropbox OAuth token

// Configure for Object-based storage
const appData = {
   file_recording_metadata : {
   'share': true // Enable sharing
    }
}


// Configure for Dropbox 
const appData = {
   file_recording_metadata: {
      upload_credentials: {
         service_name: "dropbox",
         token: "your_dropbox_oauth_token"
      }
   }
} 


// Start recording
conference.startRecording({
  mode: SariskaMediaTransport.constants.recording.mode.FILE,
  appData: JSON.stringify(appData)
});


// Monitor recording state
conference.addEventListener("RECORDER_STATE_CHANGED", (payload)=>{ 
   const mode = payload._mode; // Recording mode (e.g., "file")
   const sessionId =  payload._sessionID; // Unique identifier for the cloud recording session
   const status =  payload._status; // Current recording status ("on", "off", or "pending")
// Handle recording state changes based on mode, sessionId, and status
});


// Stop recording
conference.stopRecording(sessionId); // Provide the session ID

PSTN

• Dial-in(PSTN)

// Retrieve the phone pin and number for users to join via PSTN:
const phonePin = conference.getPhonePin(); // Get the phone pin for PSTN access
const phoneNumber = conference.getPhoneNumber() // Get the phone number for PSTN access

Share this phone number and pin with users to enable PSTN conference call participation.

• Dial-out(PSTN)

// Dial a phone number to invite a participant to the conference
conference.dial(phoneNumber)

This initiates a call to the provided phone number, inviting them to join the conference.

Lobby/Waiting Room

// Join the lobby
conference.joinLobby(displayName, email); // Request to join the conference lobby


// Event listeners for lobby-related actions:
conference.addEventListener(SariskaMediaTransport.events.conference.LOBBY_USER_JOINED, (id, name) => {
// Handle events when a user joins the lobby
})

conference.addEventListener(SariskaMediaTransport.events.conference.LOBBY_USER_UPDATED,  (id, participant)=> {
// Handle events when a user's information in the lobby is updated
})

// Additional event listeners for lobby actions:
conference.addEventListener(SariskaMediaTransport.events.conference.LOBBY_USER_LEFT, id=> {
})

conference.addEventListener(SariskaMediaTransport.events.conference.MEMBERS_ONLY_CHANGED,  enabled=> {
})


// Moderator actions for lobby access:
conference.lobbyDenyAccess(participantId); // Deny access to a participant in the lobby
conference.lobbyApproveAccess(participantId); // Approve access to a participant in the lobby


// Lobby management methods:
conference.enableLobby() // Enable lobby mode for the conference (moderator only)
conference.disableLobby(); // Disable lobby mode for the conference (moderator only)
conference.isMembersOnly(); // Check if the conference is in members-only mode (lobby disabled)

SIP Video Gateway

// Initiate a SIP video call
conference.startSIPVideoCall("[e-mail]", "display name"); // Start a SIP video call with the specified address and display name

// Terminate a SIP video call
conference.stopSIPVideoCall('[e-mail]'); // End the SIP video call with the specified address

// Event listeners for SIP gateway state changes
conference.addEventListener("VIDEO_SIP_GW_SESSION_STATE_CHANGED", (state)=>{
   // Handle events when the SIP gateway session state changes (on, off, pending, retrying, failed)
   console.log("state", state);
})

// Event listener for SIP gateway availability changes
conference.addEventListener("VIDEO_SIP_GW_AVAILABILITY_CHANGED", (status)=>{
   // Handle events when the SIP gateway availability changes (busy or available)
   console.log("status", status); 
})

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.

conference.startP2PSession();

Starting Peer-to-Peer mode eliminates server charges as long as the central turn server remains unused.

• Stop Peer-to-Peer Mode

  If you need to revert to server-mediated communication, you can easily stop Peer-to-Peer mode.

conference.stopP2PSession();

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

1. HTTP Call to Sariska Server

{API Method}

1. 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

1. Reads Push Notification (using react-native-callkeep)

Processes the notification even if the app is closed or in the background.

1. HTTP Call to Update Status

{API Method}

1. 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

conference.addEventListener(SariskaMediaTransport.events.conference.USER_STATUS_CHANGED, (id, status) => {
// - id: receiver's user id
// - status: "ringing", "busy", "rejected", "connected", "expired"
});

Event status details

• ringing: receiver's phone is ringing

• busy: receiver is on another call

• rejected: receiver declined your call

• connected: receiver accepted your call

• expired: receiver didn't answer within 40 seconds

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.

Benefits of these libraries

• Detect if the app is closed or in the background.

• Respond to background notifications.

• Manage device events and audio routing.

• Toggle speaker/microphone and flashlight.

• Play ringtones/ringbacks/DTMF tones.