If you are developing a ES6 app (eg. React, Vue), you can easily include the sdk:
-
npm install opentactv2 --savein order to add the module dependency to your app -
import Opentact from 'opentactv2';in order to start using the client in your javascript code.
If you are developing in plain Javascript and not using modules, you can simply include the opentact.min.js library in your html via a script tag.
<html>
...
<body>
...
<!-- opentact sdk -->
<script src="/path/to/your/opentact.min.js" charset="utf-8"/>
...
</body>
</html>IMPORTANT: Please keep in mind the charset attribute if you use the minified version of the SDK. This is required by the embbeded sip.js library.
It is a simple as:
var client = new Opentact({"appId":"<<your app uuid>>"});In order to log in, you need to obtain an identity uuid and a session token.
client.on("connection", function(conn) {
console.log( "sip registered", conn.sip );
console.log( "xmpp connected", conn.xmpp );
});
client.on("authenticate", function (auth) {
auth.callback("<<your token from backend>>");
});
client.connect({
identity: '<<your identity userId>>',
});client.on( "call:starting", function(session) {
console.log( "session id: ", session.id );
console.log( "call with: ", session.remoteUser );
console.log( "has audio: ", session.audio );
console.log( "has video: ", session.video );
// update your UI here
});
// To add the audio and video stream, you must set the properties remoteVideo and localVideo
//<video id="remoteVideo"></video>
//<video id="localVideo" muted="muted"></video>
client.connect({
identity: '<<your identity uuid>>',
remoteVideo: "remoteVideo",
localVideo: "localVideo"
});
client.call({
to: "<<an identity uuid>>"
audio: true,
video: true
});client.on( "call:ringing", function(session) {
...
});client.on( "call:rejected", function(session) {
...
});client.on( "call:started", function(session) {
...
});client.on( "call:terminated", function(session) {
console.log( "reason: ", session.reason );
});client.on( "call:received", function(session) {
client.accept({ id: session.id }); // or client.reject
});
client.on( "call:started", function(session){
client.hangup({ id: session.id });
});client.on( "im:sending", function(msg) {
console.log( "from: ", msg.from );
console.log( "to: ", msg.to );
console.log( "body: ", msg.body );
console.log( "session", msg.session );
console.log( "state", msg.state );
});
client.on( "im:receipt", function(msg) {
...
});
client.on( "im:received", function(msg) {
...
});
client.on('im:presence', function (msg) {
...
});
client.on("im:sent", function(msg) {
...
});
client.on('im:message', function (msg) {
...
});client.on( "im:started", function(session) {
console.log( "session id: ", session.id );
console.log( "im remote user: ", session.remoteUser );
console.log( "im local user: ", session.localUser );
console.log( "is im: ", session.im );
// once the session is ready,
// we can start chatting
client.imMessage({
to: session.remoteUser,
message: "Hello"
});
// we can start chatting
client.imMessage({
to: session.remoteUser,
message: "Hello"
});
});
client.im({
to: "<<an identity uuid>>"
});You can create a room and add different identities.
See https://xmpp.org/extensions/xep-0045.html for more info.
// once the xmpp connection is ready,
client.on("connection", function(msg) {
if(conn.xmpp){
// we can create room
client.createRoom("roomName");
// join the room
client.joinRoom("roomName", "MY_NICK");
//Send message to room
client.sendMessageRoom("roomName", "hello World");
}
});You can create a room and add different identities.
See https://xmpp.org/extensions/xep-0045.html for more info.
client.on('im:chat', function (msg) {
...
});
client.on('im:error', function (msg) {
...
});
client.on('im:muc:available', function (msg) {
...
});
//new message
client.on('im:message', function (msg) {
...
});
//New message in room
client.on('im:groupchat', function (msg) {
...
});
client.on('im:error', function (msg) {
...
});
client.on('im:muc:declined', function (msg) {
...
});
client.on('im:muc:destroyed', function (msg) {
...
});
client.on('im:muc:error', function (msg) {
...
});
client.on('im:muc:invite', function (msg) {
...
});
client.on('im:muc:join', function (msg) {
...
});
client.on('im:muc:leave', function (msg) {
...
});
client.on('im:muc:subject', function (msg) {
...
});
client.on('im:muc:unavailable', function (msg) {
...
});You can listen for chat states easily by registering a event listener.
See https://xmpp.org/extensions/xep-0085.html for more info.
client.on( "im:state", function(msg) {
console.log( "from", msg.from );
console.log( "session", msg.session);
console.log( "is typing", msg.state === 'composing' );
console.log( "is paused", msg.state === 'paused' );
});Chat state indicators are sent to a session, rather than to an identity:
client.imState({
session: "a session id",
state: "composing"
});
client.imState({
session: "a session id",
state: "paused"
});Errors have a code and a condition:
client.on( 'im:error', function(error) {
console.log( "session id", error.session );
console.log( "message id", error.id );
console.log( "code", error.code );
console.log( "condition", error.condition);
});You need either npm installed. Then:
- clone this repo
npm install
This will download the source code for this lib and grab all dependencies. Then, you've got the following scripts:
-
npm run build- produces production version of the sdk in thelibfolder -
npm run dev- produces development version of your library and runs a watcher -
npm run test- well ... it runs the tests :) -
npm run test:watch- same as above but in a watch mode