As the WebRTC has been open to the public, video chats have become easier to develop. A number of APIs and services, servers and frameworks have emerged because of that. Read on to know as we describe the best possible way to develop a video chat SDK between android applications and web browsers.
WebRTC video chats are between browsers that start from Session Description Protocol (SDP) exchange.
You should understand what are codecs, ICE, STUN, TURN, SDP, candidates, and many other words, while you implement a video chat based on native WebRTC API.
WebRTC and Websockets are the terms that can be confused most of the time. Occasionally SIP takes part in this mess too. We can certainly state that WebRTC is not straightly related to neither SIP nor Websockets.
Instead, developers can use plain HTTP for that or send the SDP by e-mail. We can use any protocol to send SDP messages and exchange its signalling information. For browsers, the default protocols to send data are HTTP and Websockets. Therefore, Websockets is mostly used since it is closer to real time compared to HTTP. You can’t transfer video or audio through Websockets by only signalling information such as text and commands.
WebRTC, Websockets and SIP: The Definition
SIP is nothing but a text protocol to exchange messages and WebRTC is usually assumed incorrectly as SIP withinin a browser. Since SIP messages also use SDP to configure codecs while establishing connections, it is misunderstood.
Similarly, SIP telephone is meant as a device that comes along with SIP protocol that supports a dozen of other network specifications and protocols like the RTP, SDP, AVPF, etc.
Therefore, WebRTC uses these as construction bricks parallel to the ones used by a SIP telephone). Thus, both WebRTC and SIP devices use the same technology, yet calling a WebRTC as SIP in a browser is incorrect since browsers do not have SIPs from nowhere.
Three main audio or video transmission functions of WebRTC:
- Playback, receiving and decoding
- Sending, Capturing, and encoding
- Overcoming Firewall and NAT
Additionally, a number of auxiliary functions including adaptive bitrate, network overload control jitter compensation, and so on.
To transmit media through WebRTC, developers must exchange SDP containing information on build a live video chat app formats, packeting and other factors that specify on how the SDP sender will obtain video.
A TURN-server may be required in addition to an exchanging SDP. If the peer-to-peer connection is not being established, this server will pass the video traffic through.
Now, in case if you want to add a third participant to chat, or merely another viewer. The best experiment would be debates as two participants converse while others watch. Another one will be the chat for three or more participants.
Things get more complex when a third participant arrives and now each participant needs to capture and compress two video streams instead of one. It thus establishes mutual connections to overcome NAT. Here, the time required to launch a connection surges while the stability of this connection decreases. Two or more video streams compressed and sent concurrently generates a serious load to CPU and network, thus affecting the quality on mobile devices.
Tasks such as,
- recording of the video chat
- connection of added subscribers in video chat
- connection of three or more participant
- Are beyond the possibility of peer-to-peer and involve a centralized WebRTC server to manage all the connections well.
As mentioned above, there are servers and service APIs above the WebRTC APIs which can allow working with handier abstractions and also speed up development of video chats including Stream, Subscriber, Room, Publisher, and so on.
For instance, to create video chats, exchanging names of the streams is more than enough.
Illustration of a video chat in a web browser
To know how a streaming API works with Web Call Servers, here is a demonstration of WebRTC server for video chats and online broadcasts.
The video chat portray is demonstrated on the succeeding two screenshots. The first subscriber Mike perceives the video chat corresponding to this:
In this example a few instances happen:
- Mike sends the video stream named Paul from the browser to the server.
- Louis sends the video stream named Louis from the browser to the server.
- Mike fetched and played the video stream named Louis.
- Louis fetched and played the video stream named Mike.
As stated in the sample, developers built a video chat depending on the assumption that both Mike and Louis know each other’s stream names. They didn’t really used NAT, SDP, Peer Connection, TURN, etc.Consequently, video chats are being implemented by just passing names of the streams to the users who must play them.
It allows using any front-end or back-end technologies such as Bootstrap, React, Angular, PHP, Jquery, Net, Java, and goes on. Embedding support for video chat and video streams does not affect the existing applications. You can control the video chat by simply allowing or denying the given subscribers to play the specific video streams.
Source code of the video chat in a browser
Let’s get into how a corresponding code appears to be as an HTML page with video chats comprises of two main div elements:
- localVideo –videos captured via web camera
- remoteVideo –video played in the form of server
The arbitrary identifiers can be assign to this divs, for instance both div elements like id==”playbackVideo” or id ”captureVideo” must be present on the page.
Thus, HTML page with remoteVideo and localVideo blocks looks and let us examine the codes responsible for sending and playing the videos:
Sending stream from webcam:
To send, developers should use the code session.createStream().publish() for the API method. For stream from webcam, developers specify the HTML div element that should play in the video captured, localVideo, and the video stream, so that any connected client that knows the name can play the stream.
Playing stream from server:
For playing the stream from server, developers should specify the name of the stream that needs to play with the HTML div element, remoteVideo, displayed in the stream received by the server. Hence, use the session.createStream().play() for the API method.
The HTML page will receive various statuses from the server while working with it such as PLAYING or STOPPED for playback and PUBLISHING or UNPUBLISHED for publishing. Consequently, the basic thing developers need to work on a video chat is to place two div blocks on the web browser and consist of the corresponding scripts that will execute stream.publish() and stream.play() for the specified stream name.
WebRTC video chat in Android application sample:
WebRTC video chat for Android works similarly to the video chats in a web browser. Android application creates the connection to the server and in turn sends a video stream from the camera of the Android device. And as it receives, it sends to play the other video stream from the server. A mobile version of the Two Way Streaming sample for video chats in web browser in the Android app Streaming Min is mentioned below, that allows the exchanging video streams.
As you can examine the screenshots, nothing much has changed. We have two video windows where the left one displays the video captured from the webcam, and the right one displays the video received from the server. Exchanging this video stream is also depending on stream names as developers publish one stream and play the other one.
Source code of video chats:
To create video chats in a browser, developers must use Web SDKs that includes the flashphoner.js API scripts. For a full-featured Android application, developers must have to import the aar-file of the Android SDK to the project. To apprehend how this works, it is recommend building and executing the Streaming Min sample based on the Android SDK.
To do this, download all the examples and then download the SDK. After that, link the SDK to the aar-file to samples
Note, the export.sh script path to the downloaded file – wcs-android-sdk-1.0.1.25.aar – Android SDK
Nevertheless, you will find a completely configured project in the export/output folder which you can open with Android Studio
After that, you just have to build the samples using gradle.
1 – Create new run configuration
2 – Select Gradle script
3 – Then, Build
Therefore, developers will receive apk-files, which can be installed to the Android device. In this, developers can exchange the video streams with a browser.
The video stream is sent from the Android device to the server and ends up play in a browser. Similarly, the video stream is sent by the browser and play on the Android device. Consequently we ended up with a two-way video and audio communication amid the browser and the Android application.
In the Web version of the video chat, developers used HTML div elements for video, whereas on Android, they use renderers.
- RemoteRenderer shows the video received from the server
- LocalRenderer exhibits the video captured from Android device camera.
Establish a connection to the server and set renderers. Then, create a stream with an arbitrary name and publish the stream to the server. After that, specify the name of the stream to play and fetch the stream from the server.
Web Call Servers
As it’s demonstrat on how to create a simple exchange of video streams between an HTML page in web browsers and Android applications. Video streams go through Web Call Servers which is both the signalling server and a video-audio proxy.
Web Call Server (WCS) is server software that can be install on Linux, whether be it a virtual server or dedicated server. It can manage video streams from browsers, iOS and Android devices as the WCS is a streaming video WebRTC server.
Takeaway
Developing a video chat between a web browser and android application deals with a lot of time-consuming tasks. Instead, you can buy the real-time communication product and own it completely.
Nevertheless, deciding on the right video chat platform might seem like a challenge, but with CONTUS MirrorFly, you will easily find the right tools and strategy that are tailor for you.
Get start with CONTUS Mirrorfly and enable your own video chat solution with customis features now!
