VOIP

VOIP In Matrix JS SDK

This module outlines how two users in a room can set up a Voice over IP (VoIP) call to each other. Voice and video calls are built upon the WebRTC 1.0 standard. Call signalling is achieved by sending message events to the room. In this version of the spec, only two-party communication is supported (e.g. between two peers, or between a peer and a multi-point conferencing unit). This means that clients MUST only send call events to rooms with exactly two participants.

For a complete overview of Matrix Javascript SDK configuration, please go to our Matrix Javascript SDK.

Matrix Javascript SDK

Establish a call

This method is call by the caller when they wish to establish a call.

matrixCall = matrixcs.createNewMatrixCall(
        MATRIX_CLIENT_OBJ, ROOM_ID
);

For voice call

matrixCall.placeVoiceCall();
matrixCall.setRemoteAudioElement(document.getElementById("remote-audio"));

For video call

matrixCall.placeVideoCall(
    document.getElementById("remote-video"),
    document.getElementById("local-video")
);

Incoming call event for callee

client.on("Call.incoming", function(c) {
    console.log("Call ringing");
    console.log("Incoming call");
});

Callee answer the call

This method is call by the callee when they wish to answer the call.

call.answer();

Hangup the call

Method call by either party to signal their termination of the call. This can be sent either once the call has has been established or before to abort the call.

call.hangup();

Examples

<html>
<head>
<title>VoIP Test</title>
http://lib/matrix.js
http://call.js
</head>
<body>
	You can place and receive calls with this example. Make sure to edit the
    constants in <code>call.js</code> first.
    <div id="config"></div>
    <div id="result"></div>
    <button id="call">Place Call</button>
    <button id="answer">Answer Call</button>
    <button id="hangup">Hangup Call</button>
    <div id="videoBackground">
        <div id="videoContainer">
            <video id="remote"></video>
        </div>
    </div>
    <div id="videoBackground">
        <div id="videoContainer">
            <video id="local"></video>
        </div>
    </div>
</body>
</html>
console.log("Loading browser sdk");
var BASE_URL = "https://matrix.org";
var TOKEN = "accesstokengoeshere";
var USER_ID = "@username:localhost";
var ROOM_ID = "!room:id";


var client = matrixcs.createClient({
    baseUrl: BASE_URL,
    accessToken: TOKEN,
    userId: USER_ID
});
var call;

function disableButtons(place, answer, hangup) {
    document.getElementById("hangup").disabled = hangup;
    document.getElementById("answer").disabled = answer;
    document.getElementById("call").disabled = place;
}

function addListeners(call) {
    var lastError = "";
    call.on("hangup", function() {
        disableButtons(false, true, true);
        document.getElementById("result").innerHTML = (
            "<p>Call ended. Last error: "+lastError+"</p>"
        );
    });
    call.on("error", function(err) {
        lastError = err.message;
        call.hangup();
        disableButtons(false, true, true);
    });
}

window.onload = function() {
    document.getElementById("result").innerHTML = "<p>Please wait. Syncing...</p>";
    document.getElementById("config").innerHTML = "<p>" +
        "Homeserver: <code>"+BASE_URL+"</code><br/>"+
        "Room: <code>"+ROOM_ID+"</code><br/>"+
        "User: <code>"+USER_ID+"</code><br/>"+
        "</p>";
    disableButtons(true, true, true);
};

client.on("sync", function(state, prevState, data) {
    switch (state) {
        case "PREPARED":
          syncComplete();
        break;
   }
});

function syncComplete() {
    document.getElementById("result").innerHTML = "<p>Ready for calls.</p>";
    disableButtons(false, true, true);

    document.getElementById("call").onclick = function() {
        console.log("Placing call...");
        call = matrixcs.createNewMatrixCall(
            client, ROOM_ID
        );
        console.log("Call => %s", call);
        addListeners(call);
        call.placeVideoCall(
            document.getElementById("remote"),
            document.getElementById("local")
        );
        document.getElementById("result").innerHTML = "<p>Placed call.</p>";
        disableButtons(true, true, false);
    };

    document.getElementById("hangup").onclick = function() {
        console.log("Hanging up call...");
        console.log("Call => %s", call);
        call.hangup();
        document.getElementById("result").innerHTML = "<p>Hungup call.</p>";
    };

    document.getElementById("answer").onclick = function() {
        console.log("Answering call...");
        console.log("Call => %s", call);
        call.answer();
        disableButtons(true, true, false);
        document.getElementById("result").innerHTML = "<p>Answered call.</p>";
    };

    client.on("Call.incoming", function(c) {
        console.log("Call ringing");
        disableButtons(true, false, false);
        document.getElementById("result").innerHTML = "<p>Incoming call...</p>";
        call = c;
        addListeners(call);
    });
}
client.startClient();

 

Leave a Reply

Your email address will not be published. Required fields are marked *