Skip to main content

Posts

Disable ICE Trickling

ICE trickling is a process where candidate-pairs are shared as soon as gathered by the ICEAgent.

Its true that, there is NO JavaScript API "currently" available in RTCWeb drafts to disable ICE-trickling process however, there is a trick that can be used to merge all candidate pairs in the session-description, and then you merely need to share that "single" SDP only.

The trick is simple: Wait until "end-of-candidate" signal is fired.

Usually "onicecandidate" event returns "NULL" entry for "event.candidate" object.

In "old-good" days, we were watching for "oniceconnectionstatechange" event, and checking for "peer.iceGatheringState === 'complete'" to return the SDP.

BTW, you can still listen for both "end-of-candidate" NULL value, as well as "peer.iceGatheringState === 'complete'".

peer.oniceconnectionstatechange =function(event){if(peer.iceGatheringState ==='…
Recent posts

WebRTC for ASP.NET developers

This post links some demos and tutorials for ASP.NET webforms and ASP.NET MVC developers to quick start and implement WebRTC in their applications.

First of all, please don't forget to check this post: I want to learn WebRTC!

Here is a simple one-to-one ASP.NET MVC based demo & source code:
https://github.com/muaz-khan/WebRTC-ASPNET-MVC
This demo uses MS-SQL to store SDP and ICE messages and to sync the data among room participants. This demo is having following functionalities:
Private/Public rooms creationsPassword protected roomsMS-SQL for signaling and presence detectionOne-to-One connectionsList of a public rooms, stats of each room, number of users in each room etc.
There is another XHR-based signaling demo and source code that can fit in any WebRTC application and demo:
https://github.com/muaz-khan/XHR-Signaling
This demo is having following features:
It can be used in any WebRTC ExperimentIt uses MS-SQL for signalingIt supports re-usability of the codeIt can be used with

WebRTC Tips & Tricks

This blog post is added for WebRTC newbies and beginners who wanna learn key-ideas; get code snippets and enjoy WebRTC life!

1. How to mute/unmute media streams?Remember, mute/unmute isn't implemented as a default/native features in either media capturing draft i.e. getUserMedia API also in WebRTC draft i.e. RTCPeerConnection API.

Also, there is no "onmuted" and "onunmuted" event defined or fired in the WebRTC native implementations.

Usually, as per chromium team's suggestions, media-tracks are enabled/disabled to mute/unmute the streams.

Remember, "MediaStreamTrack.enabled=false" NEVER sends silence audio or blank/black video; it doesn't stop packet transmission. Although when you set "MediaStreamTracks.enabled=false", packets are devoid of meaningful data. A solution for this approach is to hold/unhold tracks from SDP and renegotiate the connections. See next section for more information.

MediaStream object is just a synchronous conta…

I want to learn WebRTC!

Are you a newcomer and want to learn WebRTC?

First of all; understand following factors involves in each WebRTC application:
Signalling servers (mandatory)ICE servers (mandatory)Media servers (optional)JavaScript API (or NATIVE API) (mandatory)Signalling Servers

E.g. Socket.ioWebSockets, XMPP, SIP or simplest one i.e. XHR.

A gateway or web service which is capable to exchange some kind of data (e.g. text message) among two or more users.

You can use realtime protocols like WebSockets to exchange data as quickly as possible; or simple POST/GET mechanism to POST to server and share with relevant users.

It is mandatory part of WebRTC; because WebRTC uses Offer/Answer model to setup peer connection. One's offer must be shared with other; and vice versa.

Quick testers don't need to worry about signalling servers. If you don't know any server side language e.g. node.js or PHP, ASP.NET, Python etc. then you can try 3rd party signalling services like Firebase, PubNub or Pusher. T…

What I did in 2012? A review

For the sake of fun and keeping record; I'm sharing today "How I spent the year 2012!".

I developed many programming tools; experimented many new technologies like WebRTC as well as Canvas2D; developed many big private/public projects.

HTML Canvas Designer / try yourself
Canvas Designer is a drawing-tool which lets you draw any shape on a single drawing-surface; also it auto-generates appropriate Canvas 2D API relevant code for you in relative/absolute shortened/unshortened formats!
I designed it in 15-to-20 days....in May 2012.

HTML Curvature / try yourself
Curvature is a designer/tool for curving. It generates Canvas2D APIs relevant code in relative/absolute shortened/unshortened formats! It gives you full control over Bezier curves.
It was my first tool in 2012. I started working on it from 1st January; and I release it at 16 January 2012.

WebRTC Experiments & Demos / try yourself
In the last quarter of 2012; I started experimenting RTCWeb APIs. I did many realtime exp…

Save files on disk using JavaScript or JQuery!

You can save any file, or DataURL, or Blob on disk using HTML5's newly introduced "download" attribute.

Use cases:

1. Force browser to download/save files like PDF/HTML/PHP/ASPX/JS/CSS/etc. on disk
2. Concatenate all transmitted blobs and save them as file on disk - it is useful in file sharing applications

Microsoft Edge? (msSaveBlob/msSaveOrOpenBlob)https://msdn.microsoft.com/en-us/library/hh779016(v=vs.85).aspx

/** * @param {Blob} file - File or Blob object. This parameter is required. * @param {string} fileName - Optional file name e.g. "image.png" */functioninvokeSaveAsDialog(file, fileName){if(!file){throw'Blob object is required.'; }if(!file.type){ file.type ='video/webm'; }var fileExtension = file.type.split('/')[1]; if(fileName && fileName.indexOf('.')!==-1){var splitted = fileName.split('.'); fileName = splitted[0]; fileExtension = splitted[1]; }var fileFullName …