Web Toolkit : Sample Code


Important: The application server needs to run HTTPS for successful RTC communication in the brower

Quick Group Mode implementation

<html>
<head>
<title>Enablex Example</title>
<script type="text/javascript" src="EnxRtc.js"></script>
<script type="text/javascript">

window.onload = function () {

   var config = { audio: true,video: true,data: true,videoSize: [640, 480, 640, 480],attributes: {name: "YOUR_NAME"} };
   var playerOptions = { player: { 'height': '500px', 'width': '600px', } }; // Player options (*optional parameter)

   var localStream = EnxRtc.joinRoom("TOKEN_GOT_FROM_SERVER_API", config, function (success, error) {
      if(success){

         localStream.play("local_div",playerOptions); // Player options (*optional parameter)
         var publishId = success.publishId; // This is the publishId of your own
         var room = success.room; // This is the room-handler

         room.addEventListener('stream-subscribed', function (streamEvent) {
            streamEvent.stream.play("remote_div",playerOptions); // Player options (*optional parameter)
         });
      }
   });
};
</script>
</head>
<body>
<div id="local_div" style="width:300px; height: 250px;"></div>
<div id="remote_div" style="width:300px; height: 250px;"></div>
</body>
</html>

Detail Group Mode implementation

<html>
<head>
<title>Enablex Example</title>
<script type="text/javascript" src="EnxRtc.js"></script>
<script type="text/javascript">
window.onload = function () {
    var config = { audio: true,video: true,data: true,videoSize: [640, 480, 640, 480],attributes: {name: "YOUR_NAME"} };
    var playerOptions = {  player: {   'height': '500px',  'width': '600px',  } }; // Player options (*optional parameter) 
    var localStream = EnxRtc.Stream(config); // You will get local stream handler here
    var room = EnxRtc.Room({token: "GOT_FROM_SERVER_API"}); // You will get room handler here
    localStream.addEventListener("media-access-denied", function (error) { // This will get call when can not get media access
        console.log(error);
    });
    localStream.addEventListener("media-access-allowed", function () { // This will get call when media access succeed 

        room.addEventListener("room-connected", function (roomEvent) {

            room.publish(localStream,{maxVideoBW:2046},function(id,error){ // This will publish your local stream handler
                var ownId = id; // If it success then id of published stream will receive here
            });
            for (var index in roomEvent.streams) {
                room.subscribe(roomEvent.streams[index]);  // Sending for subscribing stream
            }
        });

        room.addEventListener("stream-subscribed", function(streamEvent) {  
           /* This will call when stream subscription over room is finished and stream is ready to play */
            var stream = streamEvent.stream;  // This is the subscribed stream object to play
            var div = document.createElement('div');
            div.setAttribute("style", "width: 300px; height: 250px;");
            div.setAttribute("id", "enablex_" + stream.getID());
            document.body.appendChild(div);
            stream.play("test" + stream.getID(),playerOptions); // Playing stream here
        });

        room.addEventListener("stream-added", function (streamEvent) { 
            /* This will get called when new user published his stream in room */
            room.subscribe(streamEvent.stream); // Sending new stream for subscribe
        });

        room.addEventListener("stream-removed", function (streamEvent) {
           /* This will get called when any user left from room or un-publish his stream*/
            var stream = streamEvent.stream;
            if (stream.elementID !== undefined) {
                var element = document.getElementById(stream.elementID);
                document.body.removeChild(element); // Removing the video element from page
            }
        });
        room.connect(); // Going to connect in room
        localStream.play("local_video",playerOptions); // This method will play local stream handler
    });
    localStream.init(); // Initializing local stream handler for media access
};
</script>
</head>
<body>
<div id="local_video" style="width:300px; height: 250px;">
</div>
</body>
</html>

Active Talker Mode implementation

<html>
<head>
<title>Enablex Active Talker Example</title>
<script type="text/javascript" src="EnxRtc.js"></script>
<script type="text/javascript">
    window.onload = function () {
        var config = { audio: true,video: true,data: true,videoSize: [640, 480, 640, 480],attributes: {name: "YOUR_NAME"} };
        var playerOptions = { player: { 'height': '500px', 'width': '600px', } }; // Player options (*optional parameter)

        var localStream = EnxRtc.joinRoom("TOKEN_GOT_FROM_SERVER_API", config, function (success, error) {
            if(success){
                localStream.play("local_div",playerOptions); // Player options (*optional parameter)
                var publishId = success.publishId; // This is the publishId of your own
                var room = success.room; // This is the room-handler

                room.addEventListener('stream-subscribed', function (streamEvent) {
                    streamEvent.stream.play("remote_div",playerOptions); // Player options (*optional parameter)
                });
                room.addEventListener('active-talkers-updated', function (event) {
                    var activeList = event.message.activeList;
                    for(var loop = 0 ; loop < activeList.length ; loop ++){
                        addStreamInfo(activeList[loop].streamId,activeList[loop].name)
                    }
                });
            }
        });
        const addStreamInfo = function(streamId,name){
            var nameDiv = document.createElement('div');
            nameDiv.classList.add("stream-name");
            nameDiv.innerText = name;
            document.getElementById("con_"+id).prepend(nameDiv);
        }
     };
</script>
</head>
<body>
    <div id="local_div" style="width:300px; height: 250px;"></div>
    <div id="remote_div" style="width:300px; height: 250px;"></div>
</body>
</html>
EnxStream Android Toolkit