Nalani's blog
Sunday, February 23, 2020
Saturday, February 22, 2020
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://www.avaya.com/blogs/archives/2014/08/understanding-webrtc-media-connections-ice-stun-and-turn.html
- Concepts of STUN/TURN servers
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
Monday, June 26, 2017
CSS3 - few things
mainstyle.css
@import "heading.css";
@import "paragraph.css";
/*All the document*/
*{
font-family: "Arial Black", 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
/*Inside All divs*/
div * {
font-family: "Comic Sans MS", cursive, sans-serif;
}
/*Cascade down i.e override above styles*/
.sitelink{
font-family: Georgia, serif
}
#tonyquote {
font-family: "Lucinda Sans Unicode", 'Lucida Sans', sans-serif;
color:black;
}
/*Paragraph inside sitelink class*/
p.sitelink{
font-family: "Palatino Linotype", "Book Antiqua", Palatino, sans-serif;
color: black;
}
span#tonyname{
font-family: "Times New Roman", Times, serif;
color: red;
}
#tutorials ol li{
color: purple;
}
#tutorials ul li{
color: green;
}
/*target paragraph comes immediately after the h3 tag*/
h3 + p {
font-style:italic;
}
/*target the link inside the paragraph immediately comes after h3 tag*/
h3 + p > a{
color: red;
}
/*every single pargraph which has a class */
p[class]{
background: grey;
}
/*every single pargraph which has a id */
p[id]{
background: yellow;
}
/*anything with the alt nintendo*/
*[alt~="nintendo"]{
background: orange
}
reference : newthinktank tutorial
Wednesday, January 11, 2017
What .NET Developers ought to know to start in 2017 by SCOTT HANSELMAN
Just have a look on this article.:)
http://www.hanselman.com/blog/WhatNETDevelopersOughtToKnowToStartIn2017.aspx
http://www.hanselman.com/blog/WhatNETDevelopersOughtToKnowToStartIn2017.aspx
Monday, August 29, 2016
Thursday, August 25, 2016
Subscribe to:
Posts (Atom)