Monday, July 10, 2017

Video calling app using WebRTC


I had a work around related to WebRTC recently. So I thought of sharing some information relevant to it. The requirement is to build an app to establish a peer to peer video conferencing

What done so far
User logs with a particular login name and establish a call. With proper coverage, communication happens properly. There are following R & D and new features to be done.

R&D
1. When low coverage, voice should be prioritized while video is dropped.
2. Sometimes video stream is stucked and it does not reconnect again.
3. Multiple users have logged, call A to B, B to C, C to A etc , then sdp protocol issue is occurred. Renegotiation problems causes in this case.
4. Once a video is stucked, you cannot get the call again.
5. Showing the presence status (online, offline, busy etc.)

To do features
6. Video/Audio mute
7. Chat functionality

Technology

WebRTC, nodejs (server side), JQuery, Bootstrap (for front end)

Work flow

Started following the tutorial here. You can refer some other references as well.

https://www.tutorialspoint.com/webrtc/webrtc_video_demo.htm

According to above tutorial configure node server using following step.

Create a folder in one of your local directory and copy the package.json and server.js there. And install node using npm install and use Node Inspector to debug. (https://spin.atomicobject.com/2015/09/25/debug-node-js/)
Then you will see node_modules folder created.  I have commented out ssl related codes on server.js and you will not need ssl folder contents here. But deployed version actual certificates are available.


When you debug you will see the following.






Once you have setup the server, with the front end implementation we can run the application. I have used ASP.NET MVC project for my convenience for the client.js and other user interfaces.

VideoDemo/js
1. client.js – the javascript file which communicate via node server
2. preferopus.js – workaround done to have clear video streaming

VideoDemo/Resources
I have used a bootstrap template. So, this location includes css, js etc, which comes with that template. There are unnecessary files here. We can remove those. 

Front end
Once you run the app with two browser tabs/windows, and get a call to the other.



References
https://github.com/muaz-khan
-          This guy has done lot of experiments on WebRTC. There are many articles that we refer on stack overflow

Other applications built using WebRTC
https://opentokrtc.com/

Other
http://webrtc-security.github.io/

I will update the source code on this post. :)