7.-Como usar la API de Jitsi

Puede usar la API de Jitsi Meet para incrustar un videochat en su aplicación. También puede integrar la implementación de distribución global de alta disponibilidad en meet.jit.si. Lo único que se pide en ese caso es que NO quite el logotipo de jitsi.org de la esquina superior izquierda.

Instalación

Lo primero que hay que hacer es agregar la librería de la API de Jitsi Meet a su aplicación de la siguiente forma

<script src='https://meet.jit.si/external_api.js'></script>

La API

api = new JitsiMeetExternalAPI(domain, options)

El siguiente paso sería crear el objeto, su constructor tiene un numero de opciones

  • domain: Es la direccion del dominio usado para construir la conferencia, ‘meet.jit.si’ por ejemplo
  • options: Propiedades de objetos y argumentos opcionales.
    • roomName: (opcional) nombre de la sala de videochat.
    • width: (opcional) ancho para el iframe que se creará. Si se especifica un número, se trata como unidades de píxeles. Si se especifica una cadena, el formato es un número seguido de ‘px’, ‘em’, ‘pt’ o ‘%’.
    • height: (opcional) altura para el iframe que se creará. Si se especifica un número, se trata como unidades de píxeles. Si se especifica una cadena, el formato es un número seguido de ‘px’, ‘em’, ‘pt’ o ‘%’.
    • parentNode: (opcional) HTML DOM Elemento donde se agregará el iframe como elemento secundario.
    • configOverwrite: (opcional) Objeto de JS que sobreescribe las opciones definidas en config.js.
    • interfaceConfigOverwrite: (opcional) Objeto de JS que sobreescribe las opciones definidas en interface_config.js.
    • noSSL: (opcional, defaults to true) Booleano que indica si se debe contactar al servidor mediante HTTP o HTTPS.
    • jwt: (optional) JWT token.
    • onload: (opcional) Controlador para el evento OnLoad del iframe.
    • invitees: (opcional) Matriz de objetos que contienen información sobre nuevos participantes que serán invitados a la llamada.
    • devices: (opcional) Un mapa que contiene información sobre los dispositivos iniciales que se utilizarán en la llamada.
    • userInfo: (opcional) JS objeto que contiene información sobre el participante que abre la reunión, como el correo electrónico.

Ejemplo:

const domain = 'meet.jit.si';
const options = {
    roomName: 'JitsiMeetAPIExample',
    width: 700,
    height: 700,
    parentNode: document.querySelector('#meet')
};
const api = new JitsiMeetExternalAPI(domain, options);

Puede configurar los dispositivos de medios iniciales para la llamada:

const domain = 'meet.jit.si';
const options = {
    ...
    devices: {
        audioInput: '<deviceLabel>',
        audioOutput: '<deviceLabel>',
        videoInput: '<deviceLabel>'
    },
    ...
};
const api = new JitsiMeetExternalAPI(domain, options);

Se puede sobreescribir opciones de config.js e interface_config.js. Por ejemplo, para habilitar el modo de interfaz de tira de película, puede usar la siguiente forma:

const options = {
    ...
    interfaceConfigOverwrite: { filmStripOnly: true },
    ...
};
const api = new JitsiMeetExternalAPI(domain, options);

También puede pasar un token jwt a Jitsi Meet:

const options = {
   ...
   jwt: '<jwt_token>',
   noSsl: false,
   ...
};
const api = new JitsiMeetExternalAPI(domain, options);

Puede configurar la información de usuario (correo electrónico, nombre para mostrar) para la llamada:

var domain = "meet.jit.si";
var options = {
    ...
    userInfo: {
        email: 'email@jitsiexamplemail.com',
        displayName: 'John Doe'
    }
}
var api = new JitsiMeetExternalAPI(domain, options);

Controlando la integración de la conferencia Jitsi Meet

Gestión de dispositivos JitsiMeetExternalAPI:

  • getAvailableDevices – Lista de dispositivos disponibles.
api.getAvailableDevices().then(devices => {
    // devices = {
    //     audioInput: [{
    //         deviceId: 'ID'
    //         groupId: 'grpID'
    //         kind: 'audioinput'
    //         label: 'label'
    //     },....],
    //     audioOutput: [{
    //         deviceId: 'ID'
    //         groupId: 'grpID'
    //         kind: 'audioOutput'
    //         label: 'label'
    //     },....],
    //     videoInput: [{
    //         deviceId: 'ID'
    //         groupId: 'grpID'
    //         kind: 'videoInput'
    //         label: 'label'
    //     },....]
    // }
    ...
});
  • getCurrentDevices – Lista de los dispositivos que se están usando.
api.getCurrentDevices().then(devices => {
    // devices = {
    //     audioInput: {
    //         deviceId: 'ID'
    //         groupId: 'grpID'
    //         kind: 'videoInput'
    //         label: 'label'
    //     },
    //     audioOutput: {
    //         deviceId: 'ID'
    //         groupId: 'grpID'
    //         kind: 'videoInput'
    //         label: 'label'
    //     },
    //     videoInput: {
    //         deviceId: 'ID'
    //         groupId: 'grpID'
    //         kind: 'videoInput'
    //         label: 'label'
    //     }
    // }
    ...
});
  • isDeviceChangeAvailable – Resuelve con verdadero si el cambio de dispositivo está disponible y con falso si no.
// The accepted deviceType values are - 'output', 'input' or undefined.
api.isDeviceChangeAvailable(deviceType).then(isDeviceChangeAvailable => {
    ...
});
  • isDeviceListAvailable – Resuelve con verdadero si la lista de dispositivos está disponible y con falso si no.
api.isDeviceListAvailable().then(isDeviceListAvailable => {
    ...
});
  • isMultipleAudioInputSupported – Resuelve con verdadero si se admiten múltiples entradas de audio y con falso si no.
api.isMultipleAudioInputSupported().then(isMultipleAudioInputSupported => {
    ...
});
  • setAudioInputDevice – Establece el dispositivo de entrada de audio en el que tiene la etiqueta o id que se pasa
api.setAudioInputDevice(deviceLabel, deviceId);
  • setAudioOutputDevice – Establece el dispositivo de salida de audio en el que tiene la etiqueta o id que se pasa.
api.setAudioOutputDevice(deviceLabel, deviceId);
  • setVideoInputDevice – Establece el dispositivo de entrada de video en el que tiene la etiqueta o id que se pasa.
api.setVideoInputDevice(deviceLabel, deviceId);

Puede controlar la conferencia utilizando el objeto creado  JitsiMeetExternalAPI usando  executeCommand:

api.executeCommand(command, ...arguments);

 El parámetro command es un objeto String con el nombre del comando. Actualmente se admiten los siguientes comandos:

  • displayName – Establece el nombre para mostrar del participante local. Este comando requiere un argumento: se debe establecer el nuevo nombre para mostrar.
api.executeCommand('displayName', 'New Nickname');
  • password – Establece la contraseña para la sala. Este comando requiere un argumento: se debe establecer el nombre de la contraseña.
api.executeCommand('password', 'The Password');
  • sendTones – Reproducir tonos.
api.executeCommand('sendTones', {
    tones: string, // Los tonos táctiles del teclado de marcación. Por ejemplo, '12345#'.
    duration: number, // Opcional. El número de milisegundos que debe reproducir cada tono. El valor predeterminado es 200.
    pause: number // Optional. El número de milisegundos entre cada tono. El valor predeterminado es 200.
});
  • subject – Establece el tema de la conferencia. Este comando requiere un argumento: el nuevo asunto que se establecerá.
api.executeCommand('subject', 'New Conference Subject');
  • toggleAudio – Silencia / activa el audio para el participante local. No se requieren argumentos.
api.executeCommand('toggleAudio');
  • toggleVideo – desactiva / activa el video para el participante local. No se requieren argumentos.
api.executeCommand('toggleVideo');
  • toggleFilmStrip – Oculta / muestra la tira de película. No se requieren argumentos.
api.executeCommand('toggleFilmStrip');
  • toggleChat – Oculta / muestra el chat. No se requieren argumentos.
api.executeCommand('toggleChat');
  • toggleShareScreen – Inicia / detiene el uso compartido de la pantalla. No se requieren argumentos.
api.executeCommand('toggleShareScreen');
  • toggleTileView – Entrar / salir del modo de diseño de vista de mosaico. No se requieren argumentos.
api.executeCommand('toggleTileView');
  • hangup – Cuelga la llamada. No se requieren argumentos.
api.executeCommand('hangup');
  • email – Cambia la dirección de correo electrónico local. Este comando requiere un argumento: se debe establecer la nueva dirección de correo electrónico.
api.executeCommand('email', 'ejemplo@ejemplo.com');
  • avatarUrl – Cambia la URL del avatar local. Este comando requiere un argumento: se debe establecer la nueva URL del avatar.
api.executeCommand('avatarUrl', 'https://avatars0.githubusercontent.com/u/3671647');
  • sendEndpointTextMessage – Envía un mensaje de texto a otro participante a través de los canales de datos.
api.executeCommand('receiverParticipantId', 'text');

You can also execute multiple commands using También puede ejecutar múltiples comandos utilizando el método: executeCommands 

api.executeCommands(commands);

El parámetro commands es un objeto con los nombres de los comandos como claves y los argumentos para los comandos como valores:

api.executeCommands({
    displayName: [ 'nickname' ],
    toggleAudio: []
});

Se pueden monitorear eventos con el metodoaddEventListener. NOTA: Este método todavía existe pero está en desuso. La clase JitsiMeetExternalAPI extiende EventEmitter. Use los métodos EventEmitter (addListener u on).

api.addEventListener(event, listener);

The event parameter is a String object with the name of the event. The listener parameter is a Function object with one argument that will be notified when the event occurs with data related to the event.

The following events are currently supported:

  • cameraError – event notifications about Jitsi-Meet having failed to access the camera. The listener will receive an object with the following structure:
{
    type: string, // A constant representing the overall type of the error.
    message: string // Additional information about the error.
}
  • avatarChanged – event notifications about avatar changes. The listener will receive an object with the following structure:
{
    id: string, // the id of the participant that changed his avatar.
    avatarURL: string // the new avatar URL.
}
  • audioAvailabilityChanged – event notifications about audio availability status changes. The listener will receive an object with the following structure:
{
    available: boolean // new available status - boolean
}
  • audioMuteStatusChanged – event notifications about audio mute status changes. The listener will receive an object with the following structure:
{
    muted: boolean // new muted status - boolean
}
  • endpointTextMessageReceived – event notifications about a text message received through datachannels. The listener will receive an object with the following structure:
{
    senderInfo: {
        jid: string, // the jid of the sender
        id: string // the participant id of the sender
    },
    eventData: {
        name: string // the name of the datachannel event: `endpoint-text-message`
        text: string // the received text from the sender
    }
}
  • micError – event notifications about Jitsi-Meet having failed to access the mic. The listener will receive an object with the following structure:
{
    type: string, // A constant representing the overall type of the error.
    message: string // Additional information about the error.
}
  • screenSharingStatusChanged – receives event notifications about turning on/off the local user screen sharing. The listener will receive object with the following structure:
{
    on: boolean, //whether screen sharing is on
    details: {

        // From where the screen sharing is capturing, if known. Values which are
        // passed include 'window', 'screen', 'proxy', 'device'. The value undefined
        // will be passed if the source type is unknown or screen share is off.
        sourceType: string|undefined
    }
}
  • dominantSpeakerChanged – receives event notifications about change in the dominant speaker. The listener will receive object with the following structure:
{
    id: string //participantId of the new dominant speaker
}
  • tileViewChanged – event notifications about tile view layout mode being entered or exited. The listener will receive object with the following structure:
{
    enabled: boolean, // whether tile view is not displayed or not
}
  • incomingMessage – Event notifications about incoming messages. The listener will receive an object with the following structure:
{
    from: string, // The id of the user that sent the message
    nick: string, // the nickname of the user that sent the message
    message: string // the text of the message
}
  • outgoingMessage – Event notifications about outgoing messages. The listener will receive an object with the following structure:
{
    message: string // the text of the message
}
  • displayNameChange – event notifications about display name changes. The listener will receive an object with the following structure:
{
    id: string, // the id of the participant that changed his display name
    displayname: string // the new display name
}
  • deviceListChanged – event notifications about device list changes. The listener will receive an object with the following structure:
{
    devices: Object // the new list of available devices.
}

NOTE: The devices object has the same format as the getAvailableDevices result format.

  • emailChange – event notifications about email changes. The listener will receive an object with the following structure:
{
    id: string, // the id of the participant that changed his email
    email: string // the new email
}
  • feedbackSubmitted – event notifications about conference feedback submission
{
    error: string // The error which occurred during submission, if any.
}
  • filmstripDisplayChanged – event notifications about the visibility of the filmstrip being updated.
{
    visible: boolean // Whether or not the filmstrip is displayed or hidden.
}
  • participantJoined – event notifications about new participants who join the room. The listener will receive an object with the following structure:
{
    id: string, // the id of the participant
    displayName: string // the display name of the participant
}
  • participantKickedOut – event notifications about a participants being removed from the room. The listener will receive an object with the following structure:
{
    kicked: {
        id: string, // the id of the participant removed from the room
        local: boolean // whether or not the participant is the local particiapnt
    },
    kicker: {
        id: string // the id of the participant who kicked out the other participant
    }
}
  • participantLeft – event notifications about participants that leave the room. The listener will receive an object with the following structure:
{
    id: string // the id of the participant
}
  • passwordRequired – event notifications fired when failing to join a room because it has a password.
  • videoConferenceJoined – event notifications fired when the local user has joined the video conference. The listener will receive an object with the following structure:
{
    roomName: string, // the room name of the conference
    id: string, // the id of the local participant
    displayName: string, // the display name of the local participant
    avatarURL: string // the avatar URL of the local participant
}
  • videoConferenceLeft – event notifications fired when the local user has left the video conference. The listener will receive an object with the following structure:
{
    roomName: string // the room name of the conference
}
  • videoAvailabilityChanged – event notifications about video availability status changes. The listener will receive an object with the following structure:
{
    available: boolean // new available status - boolean
}
  • videoMuteStatusChanged – event notifications about video mute status changes. The listener will receive an object with the following structure:
{
    muted: boolean // new muted status - boolean
}
  • readyToClose – event notification fired when Jitsi Meet is ready to be closed (hangup operations are completed).
  • subjectChange – event notifications about subject of conference changes. The listener will receive an object with the following structure:
{
    subject: string // the new subject
}
  • suspendDetected – event notifications about detecting suspend event in host computer.

You can also add multiple event listeners by using addEventListeners. This method requires one argument of type Object. The object argument must have the names of the events as keys and the listeners of the events as values. NOTE: This method still exists but it is deprecated. JitsiMeetExternalAPI class extends EventEmitter. Use EventEmitter methods.

function incomingMessageListener(object)
{
// ...
}

function outgoingMessageListener(object)
{
// ...
}

api.addEventListeners({
    incomingMessage: incomingMessageListener,
    outgoingMessage: outgoingMessageListener
});

If you want to remove a listener you can use removeEventListener method with argument the name of the event. NOTE: This method still exists but it is deprecated. JitsiMeetExternalAPI class extends EventEmitter. Use EventEmitter methods( removeListener).

api.removeEventListener('incomingMessage');

If you want to remove more than one event you can use removeEventListeners method with an Array with the names of the events as an argument. NOTE: This method still exists but it is deprecated. JitsiMeetExternalAPI class extends EventEmitter. Use EventEmitter methods.

api.removeEventListeners([ 'incomingMessage', 'outgoingMessageListener' ]);

You can get the number of participants in the conference with the following API function:

const numberOfParticipants = api.getNumberOfParticipants();

You can get the avatar URL of a participant in the conference with the following API function:

const avatarURL = api.getAvatarURL(participantId);

You can get the display name of a participant in the conference with the following API function:

const displayName = api.getDisplayName(participantId);

You can get the email of a participant in the conference with the following API function:

const email = api.getEmail(participantId);

You can get the iframe HTML element where Jitsi Meet is loaded with the following API function:

const iframe = api.getIFrame();

You can check whether the audio is muted with the following API function:

api.isAudioMuted().then(muted => {
    ...
});

You can check whether the video is muted with the following API function:

api.isVideoMuted().then(muted => {
    ...
});

You can check whether the audio is available with the following API function:

api.isAudioAvailable().then(available => {
    ...
});

You can check whether the video is available with the following API function:

api.isVideoAvailable().then(available => {
    ...
});

You can invite new participants to the call with the following API function:

api.invite([ {...}, {...}, {...} ]).then(() => {
    // success
}).catch(() => {
    // failure
});

NOTE: The format of the invitees in the array depends on the invite service used for the deployment.

You can remove the embedded Jitsi Meet Conference with the following API function:

api.dispose();

NOTE: It’s a good practice to remove the conference before the page is unloaded.

Otro sitio más de Los Lucero