Nalani's blog

Sunday, February 23, 2020

Sample for SVG animations with CSS

https://github.com/nalanijaya/animations

Saturday, February 22, 2020

Angular 9 - Worth Watching

https://www.youtube.com/watch?v=TcdhAxDWWxM

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://codelabs.developers.google.com/codelabs/webrtc-web/#3 - WebRTC Concepts

https://github.com/muaz-khan

http://www.muazkhan.com/2014/05/webrtc-tips-tricks.html

- 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://demo.xirsys.com/

https://opentokrtc.com/

Other

http://www.ouchangjian.com/question/58ea35b5ba8da7dd0545d9d7

https://hacks.mozilla.org/2013/02/cross-browser-camera-capture-with-getusermediawebrtc/

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

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

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