jiti-meet/doc/api.md

373 lines
13 KiB
Markdown
Raw Normal View History

# Jitsi Meet API
2017-01-26 01:14:30 +00:00
2019-02-23 16:39:27 +00:00
You can use the Jitsi Meet API to embed Jitsi Meet in to your application. You are also welcome to use it for embedding the globally distributed and highly available deployment on meet.jit.si itself. The only thing we ask for in that case is that you please DO NOT remove the jitsi.org logo from the top left corner.
2017-01-26 01:14:30 +00:00
## Installation
To embed Jitsi Meet in your application you need to add the Jitsi Meet API library:
2017-01-26 01:14:30 +00:00
```javascript
<script src="https://meet.jit.si/external_api.js"></script>
```
## API
### `api = new JitsiMeetExternalAPI(domain, options)`
The next step for embedding Jitsi Meet is to create the Jitsi Meet API object.
Its constructor gets a number of options:
* **domain**: domain used to build the conference URL, "meet.jit.si" for
example.
* **options**: object with properties - the optional arguments:
* **roomName**: (optional) name of the room to join.
* **width**: (optional) width for the iframe which will be created. If a number is specified it's treated as pixel units. If a string is specified the format is number followed by 'px', 'em', 'pt' or '%'.
* **height**: (optional) height for the iframe which will be created. If a number is specified it's treated as pixel units. If a string is specified the format is number followed by 'px', 'em', 'pt' or '%'.
* **parentNode**: (optional) HTML DOM Element where the iframe will be added as a child.
* **configOverwrite**: (optional) JS object with overrides for options defined in [config.js].
* **interfaceConfigOverwrite**: (optional) JS object with overrides for options defined in [interface_config.js].
2017-08-04 08:15:11 +00:00
* **noSSL**: (optional, defaults to true) Boolean indicating if the server should be contacted using HTTP or HTTPS.
* **jwt**: (optional) [JWT](https://jwt.io/) token.
* **onload**: (optional) handler for the iframe onload event.
* **invitees**: (optional) Array of objects containing information about new participants that will be invited in the call.
Example:
2017-01-26 01:14:30 +00:00
```javascript
var domain = "meet.jit.si";
var options = {
roomName: "JitsiMeetAPIExample",
width: 700,
height: 700,
parentNode: document.querySelector('#meet')
}
var api = new JitsiMeetExternalAPI(domain, options);
2017-01-26 01:14:30 +00:00
```
You can overwrite options set in [config.js] and [interface_config.js].
For example, to enable the filmstrip-only interface mode, you can use:
2017-01-26 01:14:30 +00:00
```javascript
var options = {
interfaceConfigOverwrite: {filmStripOnly: true}
};
var api = new JitsiMeetExternalAPI(domain, options);
2017-01-26 01:14:30 +00:00
```
You can also pass a jwt token to Jitsi Meet:
```javascript
var options = {
jwt: "<jwt_token>",
noSsl: false
};
var api = new JitsiMeetExternalAPI(domain, options);
```
### Controlling the embedded Jitsi Meet Conference
2017-01-26 01:14:30 +00:00
You can control the embedded Jitsi Meet conference using the `JitsiMeetExternalAPI` object by using `executeCommand`:
2017-01-26 01:14:30 +00:00
```javascript
2017-01-26 01:14:30 +00:00
api.executeCommand(command, ...arguments)
```
The `command` parameter is String object with the name of the command. The following commands are currently supported:
2017-01-26 01:14:30 +00:00
* **displayName** - Sets the display name of the local participant. This command requires one argument - the new display name to be set.
```javascript
2017-01-26 01:14:30 +00:00
api.executeCommand('displayName', 'New Nickname');
```
* **subject** - Sets the subject of the conference. This command requires one argument - the new subject to be set.
```javascript
api.executeCommand('subject', 'New Conference Subject');
```
* **toggleAudio** - Mutes / unmutes the audio for the local participant. No arguments are required.
```javascript
2017-01-26 01:14:30 +00:00
api.executeCommand('toggleAudio')
```
* **toggleVideo** - Mutes / unmutes the video for the local participant. No arguments are required.
```javascript
2017-01-26 01:14:30 +00:00
api.executeCommand('toggleVideo')
```
* **toggleFilmStrip** - Hides / shows the filmstrip. No arguments are required.
```javascript
api.executeCommand('toggleFilmStrip')
2017-01-26 01:14:30 +00:00
```
* **toggleChat** - Hides / shows the chat. No arguments are required.
```javascript
2017-01-26 01:14:30 +00:00
api.executeCommand('toggleChat')
```
* **toggleShareScreen** - Starts / stops screen sharing. No arguments are required.
```javascript
2017-01-26 01:14:30 +00:00
api.executeCommand('toggleShareScreen')
```
* **hangup** - Hangups the call. No arguments are required.
```javascript
2017-01-26 01:14:30 +00:00
api.executeCommand('hangup')
```
* **email** - Changes the local email address. This command requires one argument - the new email address to be set.
```javascript
2017-01-26 01:14:30 +00:00
api.executeCommand('email', 'example@example.com')
```
* **avatarUrl** - Changes the local avatar URL. This command requires one argument - the new avatar URL to be set.
```javascript
api.executeCommand('avatarUrl', 'https://avatars0.githubusercontent.com/u/3671647')
2017-01-26 01:14:30 +00:00
```
You can also execute multiple commands using the `executeCommands` method:
```javascript
2017-01-26 01:14:30 +00:00
api.executeCommands(commands)
```
2017-03-31 16:38:44 +00:00
The `commands` parameter is an object with the names of the commands as keys and the arguments for the commands as values:
```javascript
2017-01-26 01:14:30 +00:00
api.executeCommands({displayName: ['nickname'], toggleAudio: []});
```
You can add event listeners to the embedded Jitsi Meet using the `addEventListener` method.
**NOTE: This method still exists but it is deprecated. JitsiMeetExternalAPI class extends [EventEmitter]. Use [EventEmitter] methods (`addListener` or `on`).**
```javascript
2017-01-26 01:14:30 +00:00
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.
2017-01-26 01:14:30 +00:00
The following events are currently supported:
* **avatarChanged** - event notifications about avatar
changes. The listener will receive an object with the following structure:
```javascript
{
"id": id, // the id of the participant that changed his avatar.
"avatarURL": avatarURL // the new avatar URL.
}
```
2017-08-04 08:15:11 +00:00
* **audioAvailabilityChanged** - event notifications about audio availability status changes. The listener will receive an object with the following structure:
```javascript
{
"available": available // new available status - boolean
2017-08-04 08:15:11 +00:00
}
```
* **audioMuteStatusChanged** - event notifications about audio mute status changes. The listener will receive an object with the following structure:
```javascript
{
"muted": muted // new muted status - boolean
2017-08-04 08:15:11 +00:00
}
```
* **screenSharingStatusChanged** - receives event notifications about turning on/off the local user screen sharing. The listener will receive object with the following structure:
```javascript
{
"on": on //whether screen sharing is on
}
```
* **incomingMessage** - Event notifications about incoming
messages. The listener will receive an object with the following structure:
```javascript
2017-01-26 01:14:30 +00:00
{
"from": from, // The id of the user that sent the message
"nick": nick, // the nickname of the user that sent the message
"message": txt // the text of the message
2017-01-26 01:14:30 +00:00
}
```
* **outgoingMessage** - Event notifications about outgoing
messages. The listener will receive an object with the following structure:
```javascript
2017-01-26 01:14:30 +00:00
{
"message": txt // the text of the message
2017-01-26 01:14:30 +00:00
}
```
* **displayNameChange** - event notifications about display name
changes. The listener will receive an object with the following structure:
```javascript
2017-01-26 01:14:30 +00:00
{
"id": id, // the id of the participant that changed his display name
"displayname": displayName // the new display name
2017-01-26 01:14:30 +00:00
}
```
2018-06-18 09:19:07 +00:00
* **emailChange** - event notifications about email
changes. The listener will receive an object with the following structure:
```javascript
{
"id": id, // the id of the participant that changed his email
"email": email // the new email
}
```
* **participantJoined** - event notifications about new participants who join the room. The listener will receive an object with the following structure:
```javascript
2017-01-26 01:14:30 +00:00
{
"id": id, // the id of the participant
"displayName": displayName // the display name of the participant
2017-01-26 01:14:30 +00:00
}
```
* **participantLeft** - event notifications about participants that leave the room. The listener will receive an object with the following structure:
```javascript
2017-01-26 01:14:30 +00:00
{
"id": id // the id of the participant
2017-01-26 01:14:30 +00:00
}
```
* **videoConferenceJoined** - event notifications fired when the local user has joined the video conference. The listener will receive an object with the following structure:
```javascript
2017-01-26 01:14:30 +00:00
{
"roomName": room, // the room name of the conference
"id": id, // the id of the local participant
"displayName": displayName, // the display name of the local participant
"avatarURL": avatarURL // the avatar URL of the local participant
2017-01-26 01:14:30 +00:00
}
```
* **videoConferenceLeft** - event notifications fired when the local user has left the video conference. The listener will receive an object with the following structure:
```javascript
2017-01-26 01:14:30 +00:00
{
"roomName": room // the room name of the conference
2017-01-26 01:14:30 +00:00
}
```
2017-08-04 08:15:11 +00:00
* **videoAvailabilityChanged** - event notifications about video availability status changes. The listener will receive an object with the following structure:
```javascript
{
"available": available // new available status - boolean
2017-08-04 08:15:11 +00:00
}
```
* **videoMuteStatusChanged** - event notifications about video mute status changes. The listener will receive an object with the following structure:
```javascript
{
"muted": muted // new muted status - boolean
2017-08-04 08:15:11 +00:00
}
```
2017-01-26 01:14:30 +00:00
* **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:
```javascript
{
"subject": subject // the new subject
}
```
You can also add multiple event listeners by using `addEventListeners`.
2017-01-26 01:14:30 +00:00
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.**
2017-01-26 01:14:30 +00:00
```javascript
2017-01-26 01:14:30 +00:00
function incomingMessageListener(object)
{
// ...
2017-01-26 01:14:30 +00:00
}
function outgoingMessageListener(object)
{
// ...
2017-01-26 01:14:30 +00:00
}
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`).**
```javascript
2017-01-26 01:14:30 +00:00
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.**
```javascript
2017-01-26 01:14:30 +00:00
api.removeEventListeners(["incomingMessage", "outgoingMessageListener"]);
```
You can get the number of participants in the conference with the following API function:
```javascript
2017-01-26 01:14:30 +00:00
var numberOfParticipants = api.getNumberOfParticipants();
```
You can get the avatar URL of a participant in the conference with the following API function:
```javascript
var avatarURL = api.getAvatarURL(participantId);
```
You can get the display name of a participant in the conference with the following API function:
```javascript
var displayName = api.getDisplayName(participantId);
```
2018-06-18 09:19:07 +00:00
You can get the email of a participant in the conference with the following API function:
```javascript
var email = api.getEmail(participantId);
```
You can get the iframe HTML element where Jitsi Meet is loaded with the following API function:
```javascript
var iframe = api.getIFrame();
```
2017-08-04 08:15:11 +00:00
You can check whether the audio is muted with the following API function:
```javascript
api.isAudioMuted().then(function(muted) {
2017-08-04 08:15:11 +00:00
...
});
```
You can check whether the video is muted with the following API function:
```javascript
api.isVideoMuted().then(function(muted) {
2017-08-04 08:15:11 +00:00
...
});
```
You can check whether the audio is available with the following API function:
```javascript
api.isAudioAvailable().then(function(available) {
2017-08-04 08:15:11 +00:00
...
});
```
You can check whether the video is available with the following API function:
```javascript
api.isVideoAvailable().then(function(available) {
2017-08-04 08:15:11 +00:00
...
});
```
You can invite new participants to the call with the following API function:
```javascript
api.invite([{...}, {...}, {...}]).then(function() {
// success
}).catch(function() {
// 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:
```javascript
2017-01-26 01:14:30 +00:00
api.dispose()
```
NOTE: It's a good practice to remove the conference before the page is unloaded.
[config.js]: https://github.com/jitsi/jitsi-meet/blob/master/config.js
[interface_config.js]: https://github.com/jitsi/jitsi-meet/blob/master/interface_config.js
2017-03-31 16:38:44 +00:00
[EventEmitter]: https://nodejs.org/api/events.html