Integrating WebRTC in Flutter Simplified using Janus Gateway and flutter janus client

Shivansh Talwar
3 min readOct 10, 2020

--

Hey! lovely people out there… I am back again with another story on new tech topic. Although this time instead of guiding you people about how to install drivers(Nvidia Drivers to be specific) on some fancy linux distribution, I decided to enlighten all flutter and webRTC enthusiast about the fact that how easy it is to integrate WebRTC features like video calling, Video Meetings aka video rooms, audio calls, Streaming and much more into your next flutter application, it is so simple that with a single 1Gb Memory & 1 cpu virtual machine you can have your own webRTC architecture and with that being said you can develop your own feature complete whatsApp/Instagram like application using flutter.

For all those people wondering what is WebRTC can Read about webRTC here

How it Looks? (Bigger Picture)

Flow of Data

If you look at Janus Gateway Homepage you will understand what it really is! and why it is so Awesome! still in doubt? Ok never mind let me explain it to you in simple words…

Janus is an Open-Source WebRTC Server developed by Meetecho written in C hence highly performant. For the most part it selectively forwards the stream from one end to another using peer connection so falls under the category of SFU, just like google hangouts. Not only this working with its apis is straightForward, simple and highly customisable, as every aspect of WebRTC can be implemented easily in both browsers and now flutter apps (flutter_janus_client) too using plugin based approach. Plugin based approach is highly effective if you want to provide only specific WebRTC feature like Video Call , Video Room and so on.. instead of bundling all non essential features along with it.

Lights Camera Action.. 📷

So now that you know what is happening, lets now talk about how you can try it and how code works, I won’t describe everything here for sake of brevity. but will give you general idea about the same

Before I show you Video Call example code, we must set our janus server. Now, There are three ways from here.

  1. Using JanusDocker (Recommended)
  2. compile janus server from scratch (bit lengthy process but worth it)
  3. Use Pre-made docker Image/dockerFile

Luckily I already compiled two latest docker image with all possible features enabled. One for 64 bit processors and one for arm 32 bit for those who wants to experiment with janus on raspberry pi, but keep in mind this way you will be running outdated images with outdated janus server version so highly recommend using JanusDocker that is option 1

  1. Janus server 1.5 Docker Image 64 bit(Outdated image)
  2. Janus server 1.5 Docker Image 32bit for Raspberry Pi(Outdated Image)

Onto Video Call Example

initialisation of janusClient object with stun/turn server & janus server details

here we create janus client object nothing fancy ;)

here comments are self explanatory :)

rest everything is janus api specific and ui specific, you can find complete video call code here.

Enough Of Code and Theory, Its Demo Time!

Some Useful Github Repos

  1. flutter_janus_client
  2. flutter_webrtc
  3. janus gateway
  4. Janus Docker

Thanks for Reading, Please hit clap button if you liked this read.

--

--

Shivansh Talwar

Full Stack Web Developer, explorer and wanderer of Technology