UXKit Voxeet Cordova
Instructions on how to use the Voxeet Cordova plugin.
cordova-plugin-voxeet
This plugin bridges the Voxeet Toolkit and ConferenceKit calls. Wait for the deviceReady
event before you interact with the plugin.
Before the installation, it is mandatory to add the following platforms:
- iOS
cordova platform add ios
- Android
cordova platform add android
Installation
Use the following code to initialize the Cordova UXKit:
cordova plugin add cordova-plugin-voxeet
Note: in some cases, it is needed to initialize the SDK beforehand. Especially in cases when the plugin used by the application delays the onDeviceReady
event.
cordova plugin add cordova-plugin-voxeet --variable VOXEET_CORDOVA_CONSUMER_KEY="your key" --variable VOXEET_CORDOVA_CONSUMER_SECRET="your secret"
Installation on iOS
1. Make sure that the cordova platform add ios
is in the project root folder.
2. In Xcode, set the value of the ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES
build settings to true.
3. To enable VoIP notification, follow the Swift UXKit guide.
Installation on Android
1. Enable push notifications. To do it, follow the steps in the application. More information about push notifications is available in the Java UXKit guide.
2. Make sure that Voxeet push notification service tags are before other services registered in the AndroidManifest. These tags should have the proper priority to prevent Cordova FCM issues.
3. Modify the generated MainActivity
right before the super.onCreate(savedInstanceState);
, as in the example below.
To do it, use the Android Studio or other IDE. This call uses the import android.view.WindowManager;
import.
getWindow().addFlags(
WindowManager.LayoutParams.FLAG_SHOW_WHEN_LOCKED |
WindowManager.LayoutParams.FLAG_DISMISS_KEYGUARD |
WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON |
WindowManager.LayoutParams.FLAG_TURN_SCREEN_ON
)
4. If you have changed the name of the default accepted view, register to this view. This way you will be able to implement properly the push notifications.
5. Edit the AndroidManifest.xml file and put the following xml node in the
<meta-data
android:name="voxeet_incoming_accepted_class"
android:value="fully.qualified.package.name.to.the.default.cordova.activity"
/>
Implementation
After the installation, the project exports all the elements to integrate them into your application.
- Use the following code to have access the
Voxeet
singleton.
const { Voxeet, UserType } = VoxeetSDK
Use the Voxeet
and UserInfo
classes:
Voxeet
is a singleton which enables interaction with the SDK.-
UserInfo
is a class containing user information:- constructor:
(externalId: string, name: string, avatarUrl: string)
- json(): return the corresponding json
- constructor:
Initialization
Initialize the UXKit using the following code:
Voxeet.initialize(<consumer_key>: string , <secret_key>: string)
.then(() => {
//if the initialization is ok
})
.catch(err => {
//in case of error
});
Initialize with OAuth2
Voxeet.initializeWithRefresh(
(accessToken: string),
(refreshToken: () => Promise<boolean>)
)
//the refresh token callback to be used
const refreshToken = () => {
return new Promise((resolve, reject) => {
cordovaHTTP.get(
"https://YOUR_REFRESH_TOKEN_URL",
null,
{},
function(response) {
var json = undefined
try {
json = JSON.parse(response.data)
} catch (e) {
json = response
}
resolve(json.access_token) //return your access token
},
function(response) {
alert("error " + response.error)
}
)
})
}
//the actual call to the SDK initialization
refreshToken()
.then(result => Voxeet.initializeToken(result, refreshToken))
.then(() => {
//if the initialization is ok
})
.catch(err => {
//in case of error
})
Connect / Disconnect a session
Connect a session using the following code:
var user = new UserInfo(<externalId>: string, <name>: string, <avatarUrl>: string);
Voxeet.connect(user)
.then(() => {
//if the session is connected
})
.catch(err => {
//in case of error
});
Disconnect a session using the following code:
Voxeet.disconnect()
.then(() => {
//if the session is disconnected
})
.catch(err => {
//in case of error
})
Create / Join / Invite / Leave a conference
You can create a conference with a custom alias (optional). You can also invite others to join the current conference by using the invite
method.
var user1 = new UserInfo(<externalId>: string, <name>: string, <avatarUrl>: string);
var user2 = new UserInfo(<externalId>: string, <name>: string, <avatarUrl>: string);
var user3 = new UserInfo(<externalId>: string, <name>: string, <avatarUrl>: string);
Voxeet.create({conferenceAlias: 'YOUR_CONFERENCE_ALIAS'})
.then(result => Promise.all([
Voxeet.join(result.conferenceId),
result.isNew ? Voxeet.invite(result.conferenceId, [user1, user2, user3]) : null
]))
.catch(err => {
//in case of error
});
An other example if you don't want to invite anyone and a conference alias isn't needed.
Voxeet.create({})
.then(result => Promise.all([Voxeet.join(result.conferenceId)]))
.catch(err => {
//in case of error
})
To leave a conference, use the following code:
Voxeet.leave()
.then(() => {
//call made and everything is ok
})
.catch(err => {
//in case of error
})
Broadcast a message
To broadcast a message, use the following code:
Voxeet.sendBroadcastMessage("YOUR_MESSAGE")
.then(() => {
//message sent
})
.catch(err => {
//error while sending the message
})
Useful methods
To maximize or minimize a conference, use the appearMaximized
(as in the example below). By default, the conference appears maximized. Change the value to false if you wish to minimize it.
Voxeet.appearMaximized(true)
To start a conference using a built-in receiver or a built-in receiver speaker, use the defaultBuiltInSpeaker
(as in the example below). By default, the conference starts using a built-in receiver. Change the value to true if you wish to use built-in speaker.
Voxeet.defaultBuiltInSpeaker(true)
To enable a video, use the defaultVideo
(as in the example below). By default, the conference starts without a video. Change the value to true if you wish to enable video conferencing.
Voxeet.defaultVideo(true)
Cordova example
var user1 = new UserInfo(
"0",
"Benoit",
"https://cdn.voxeet.com/images/team-benoit-senard.png"
)
var user2 = new UserInfo(
"1",
"Stephane",
"https://cdn.voxeet.com/images/team-stephane-giraudie.png"
)
var user3 = new UserInfo(
"2",
"Thomas",
"https://cdn.voxeet.com/images/team-thomas.png"
)
Voxeet.initialize("YOUR_CONSUMER_KEY", "YOUR_CONSUMER_SECRET")
.then(() => Voxeet.appearMaximized(true))
.then(() => Voxeet.defaultBuiltInSpeaker(true))
.then(() => Voxeet.defaultVideo(true))
.then(() => Voxeet.connect(user1))
.then(() =>
Voxeet.create({
conferenceAlias: "YOUR_CONFERENCE_ALIAS",
params: { videoCodec: "H264" },
})
)
.then(result =>
Promise.all([
Voxeet.join(result.conferenceId),
result.isNew ? Voxeet.invite(result.conferenceId, [user2, user3]) : null,
])
)
.then(() => Voxeet.sendBroadcastMessage("Hello world"))
.then(() => Voxeet.leave())
.then(() => Voxeet.disconnect())
.then(() => alert("done"))
.error(err => alert(err))
Examples of starting Broadcasting / Webinar mode
(only compatible with Android) To start a webinar or broadcast mode conference:
Creating a conference
const options: = {
alias: "some_alias",
params: {
liveRecording: true
}
}
const promise = Voxeet.create(options);
//resolving
Joining a conference
const promise = Voxeet.broadcast(conferenceId)
//resolving
Enabling Android push notification
Add the following preference at the end of the config.xml file to enable Android push notifications:
<widget>
<every other="tags" />
<preference name="VOXEET_CORDOVA_USE_PUSH" value="true" />
</widget>
Android Q breaking changes
Previously given as an option, due to new mechanisms preventing standard behaviour, Android Q+ needs the following modification done:
<config-file parent="./application" target="AndroidManifest.xml">
<meta-data android:name="voxeet_incoming_accepted_class" android:value="fully.qualified.package.name.to.the.default.cordova.activity" />
</config-file>
If this is not set, a caught-exception will be set in the logs.
Supported Platforms
- iOS
- Android
License
Copyright 2020 - Voxeet
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.