Today we are going to try kurento media server and create a simple webrtc application.

Kurento is an open-source media server with WebRTC support. So if your customer wants to integrate video/audio chat on his website Kurento may solve this problem.

This is a sample video of what we are going to do:

So let’s start. First of all you should install Kurento media server(KMS) on your local computer. These steps can be viewed here.

Most KMS apps consists of 3 parts: client(browser), application server(like node.js where we call KMS API) and media server itself. The media server is like a constructor. To create it you should create a so called pipeline - a container where all of your media objects will live. And then just add different media objects to the pipeline and implement the features you need.

Create a project folder and insert bower.json file:

{
  "name": "kurento-basics",
  "version": "6.0.1-dev",
  "description": "Trying Kurento WebRTC",
  "authors": [
  "Kurento <info@kurento.org>"
  ],
  "main": "index.html",
  "moduleType": [
  "globals"
  ],
  "license": "LGPL",
  "homepage": "http://www.kurento.org/",
  "private": true,
  "ignore": [
  "**/.*",
  "node_modules",
  "bower_components",
  "test",
  "tests"
  ],
  "dependencies": {
  "adapter.js": "*",
  "bootstrap": "~3.3.0",
  "ekko-lightbox": "~3.3.0",
  "demo-console": "master",
  "kurento-client": "master",
  "kurento-utils": "master"
  }
}

Then run bower install to install all dependencies.

So let’s create a simple html page. There will be 2 video tags. The first one will show us a live video from our webcam. The second one will push video stream from our webcam to KMS, and then push it back to our browser.


  From webcam to browser

  Start
  Stop

  From webcam to media server and then to browser

Create js folder in your project and add index.js:


//basic arguments
var args = {
    //web socket address on our local machine
    ws_uri: "ws://" + location.hostname + ":8888/kurento",
    ice_servers: undefined
}

window.addEventListener('load', function(){

    //this is our stream from webcam
    var webRtcPeer;
    //constructor where we add different mediaobjects
    var pipeline;

    //video from webcam
    var videoInput = document.getElementById('videoInput');
    //video stream which is sent to media server and back to browser
    var videoOutput = document.getElementById('videoOutput');

    //start streaming
    var startButton = document.getElementById('start');
    //stop streaming
    var stopButton = document.getElementById('stop');

    //on start button click
    startButton.addEventListener('click', function(){

        var options = {
            localVideo: videoInput,
            remoteVideo: videoOutput
        };

        if(args.ice_servers){
            options.configuration = {
                iceServers:JSON.parse(args.ice_servers)
            };
        }

        //local stream starts working
        webRtcPeer = kurentoUtils.WebRtcPeer.WebRtcPeerSendrecv(options, function(error){
            if(error) return onError(error);
            //callback for receiving SDP offer
            //SDP is used for negotiating media exchanges between applications
            this.generateOffer(onOffer);
        });

        //when application want to connect to our media server
        function onOffer(error, sdpOffer){

            if(error) return onError(error);

            //kurentoClient is used for managing KMS API
            kurentoClient(args.ws_uri, function(error, client){

                if(error) return onError(error);

                //creating pipeline, constructor for media objects
                client.create("MediaPipeline", function(error, _pipeline){

                    if(error) return onError(error);
                    pipeline = _pipeline;

                    //adding object WebRtcEndpoint
                    //it is a media element with the capability of receiving and sending WebRTC flows
                    pipeline.create("WebRtcEndpoint", function(error, webRtc){

                        if(error) return onError(error);

                        //setting callbacks when we are ready to connect our webcam peer with KMS
                        setIceCandidateCallbacks(webRtcPeer, webRtc, onError);

                        //finishing SDP
                        webRtc.processOffer(sdpOffer, function(error, sdpAnswer){
                            if(error) return onError(error);
                            webRtcPeer.processAnswer(sdpAnswer, onError);
                        });
                        webRtc.gatherCandidates(onError);

                        //connecting WebRTCEndpoint to itself
                        webRtc.connect(webRtc, function(error){
                            if(error) return onError(error);
                        });

                    });

                });
            });
        }

    });

    function setIceCandidateCallbacks(webRtcPeer, webRtcEp, error){

        webRtcPeer.on('icecandidate', function(candidate){
            candidate = kurentoClient.register.complexTypes.IceCandidate(candidate);
            webRtcEp.addIceCandidate(candidate, onerror);
        });

        webRtcEp.on("OnIceCandidate", function(event){
            var candidate = event.candidate;
            webRtcPeer.addIceCandidate(candidate, onerror);
        });

    }

    stopButton.addEventListener("click", stop);

    //remove our webcam peer and pipeline
    function stop(){
        if(webRtcPeer){
            webRtcPeer.dispose();
            webRtcPeer = null;
        }
        if(pipeline){
            pipeline.release();
            pipeline = null;
        }
    }

    function onError(error){
        if(error){
            console.error(error);
            stop();
        }
    }

});

That’s all. Hope I helped you a bit )

Project files