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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
{ "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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/> <link rel="stylesheet" href="css/kurento.css"/> <script src="bower_components/jquery/dist/jquery.min.js"></script> <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <script src="bower_components/adapter.js/adapter.js"></script> <script src="bower_components/kurento-client/js/kurento-client.js"></script> <script src="bower_components/kurento-utils/js/kurento-utils.js"></script> <script src="js/index.js"></script> <title></title> </head> <body> <div class="container"> <div class="row"> <div class="col-md-5"> <h3>From webcam to browser</h3> <video id="videoInput" autoplay width="480px"height="360px" poster="img/webrtc.png"></video> </div> <div class="col-md-2"> <a id="start" href="#" class="btn btn-success">Start</a> <a id="stop" href="#" class="btn btn-danger">Stop</a> </div> <div class="col-md-5"> <h3>From webcam to media server and then to browser</h3> <video id="videoOutput" autoplay width="480px"height="360px" poster="img/webrtc.png"></video> </div> </div> </div> </body> </html> |
Create js folder in your project and add index.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
//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 )
Hi, great to read first public article on kurento api, this made me bookmark your address.
how can we use remote KMS with this example, thanks
Hi Man, I am trying your demo which is awesome. In that the local stream works perfectly. But the remote stream doesn’t appear. I check that the KMS Server working or not which the result is that all ports are opened (8888, 8433) and which are listening.. Please help me i am strucked.. This one is decide my carrier.
Hi ,
I want to use video from my Amazon S3 bucket to stream using kurento & nodejs.
Can you please help me? if you have any reference code then it will be better.
Please guide.
Thanks,
Sagar