@reactoo/watchtogether-sdk v0.9.3

Reactoo Watch Together SDK for JavaScript

Overview

• Description
• Plugin for OTT providers
• Browser support
• Installation and Usage

Usage

• Installation
• Video room events
  • kicked
  • addLocalParticipant
  • addRemoteParticipant
  • removeLocalParticipant
  • removeRemoteParticipant
  • chatMessage
  • systemMessage
  • error

Questions and feedback

Description

Reactoo Watch Together SDK for JavaScript provides a rich set of client-side functionality that:

• Enables you to manage and join Watch Together video rooms
• Makes it easy to call Reactoo API directly
• Allows OTT broadcasters to synchronise the live stream
• Capture the reactions of participants to key moments
• Facilitates real-time communication between video room participants when you're implementing custom events

Reactoo Watch Together is a technology that allows you to create a video room and invite up to five participants to share the emotion of watching a live video. Those in the room will be able to see, hear and chat while watching the live action, allowing them to debate the talking points and celebrate as if they were all together. The person who sets up the room can invite others by simply sharing a link by text, WhatsApp, email or on social media.

Check out our API Reference for more detailed information.

Plugin for OTT providers

This SDK can be implemented as a plugin for OTT services to deliver an interactive watch together experience for their audiences (a video chat room where all users are synchronized to the live stream so they can see and chat to each other while watching the content). Reactoo also allow this to be broadcast live to others (effectively a multi-party Twitch-style live casting experience) and can capture the reactions of participants to key moments in the stream as they watch which are made available for social sharing.

Browser support

56+ ✔	44+ ✔	43+ ✔	67+ ✔	❌	❌

Usage

Installation

npm install --save @reactoo/wtsdk

let wtInstance = new Reactoo(true);
wtInstance.isReady
    .then(self => {
        wtSession = self.createSession({server, iceServers, token}, {
            addLocalParticipant: () => {},
            removeLocalParticipant: () => {}
        });

        wtSession.on('addLocalParticipant', (userId, stream) => {});

        return wtSession.connect();
    })
    .then(session => Promise.all([session, wtJanus.getUserStream()]))
    .then(([session, stream]) => session.publishStream(stream));

Video room events

kicked

Local participant was kicked from the video room. By default a user can only join one video room at a time on any device. This can be increased per user for some non-standard integrations - please get in touch with us

Callback parameters

Example

ReactooSession.on('kicked', (reason) => {
    if(reason === 'kicked') {
        // Please check that you're not signed in on any other devices
    } else if(reason === 'session_expired') {
        // Your session has expired
    } else {
        // Connection was terminated
    }
});

addLocalParticipant

A local MediaStream is available and ready to be displayed.

Callback parameters

Example

ReactooSession.on('addLocalParticipant', (userId, stream) => {
    console.log(`I have joined the video room`);
    $('#myvideo').get(0).srcObject = stream;
});

addRemoteParticipant

Remote participant has joined a video room and MediaStream is available and ready to be displayed.

Callback parameters

Example

ReactooSession.on('addRemoteParticipant', (userId, stream) => {
    console.log(`User ${userId} has joined the video room`);
    $('#remotevideo-1').get(0).srcObject = stream;
});

removeLocalParticipant

Local participant has left a video room.

Callback parameters

Example

ReactooSession.on('removeRemoteParticipant', (userId) => {
    console.log(`I have left the video room`);
    $('#myvideo').remove();
});

removeRemoteParticipant

Remote participant has left a video room.

Callback parameters

Example

ReactooSession.on('removeRemoteParticipant', (userId) => {
    console.log(`User "${userId}" has left the video room`);
    $('#remotevideo').remove();
});

chatMessage

Received a chat message from both local and remote users. Chat history is not being currently saved on server-side.

Callback parameters

Example

ReactooSession.on('chatMessage', (userId, message, date) => {
    console.log(`Received a message from "${userId}"`);
    let chat = $('#chatroom');
    chat.append(`<p>[${date.toISOString().substring(11,19)}] <strong>${participants[userId].displayname}</strong>: ${message}</p>`);
    chat.get(0).scrollTop = chat.get(0).scrollHeight;
});

systemMessage

Received a system message from server.

Callback parameters

Example

ReactooSession.on('systemMessage', (type, data) => {
    console.log(`Received a system message "${type}"`);
    if(type === 'user_update_displayname' || type === 'user_update_avatar') {
        // Reload user, data will contain userId
        emitEvent('userUpdate', data);
    } else if(type === 'observer_connecting') {
        // Reload video room with updated "allowedObservers" to not show observer as a participant
        emitEvent('roomUpdate');
    } else if(type === 'pending_shutdown') {
        // Current videoroom was reassigned to a different WebRTC instance
        emitEvent('reconnect');
    } else if(type === 'shutting_down') {
        // Current WebRTC videoroom instance will be terminated 5s
        emitEvent('reconnect');
    }
});

error

Received an error event.

Callback parameters

Example

ReactooSession.on('error', (type, data) => {
    console.log(`Error: "${type}"`, data);
});

Questions and feedback

Please raise questions, requests for help etc. via tech@reactoo.com. Feedback and suggestions for improvement always welcome :)