Linear tv show with 2 presenters , 1 guest, 1 phone line with Twilio , OBS , ndi and a web browser Dimitris Moutsatsos Follow Apr 16 · 4 min read

One of Tychetech’s client is MAD TV (https://mad.tv) a television station in Athens, Greece for the past 20 years.

Due to Covid-19 no personel are in MAD TV premises and all the tv shows are pre-recorded , edited and uploaded to our videoservers (AXEL) in order to go to the “playout queue”.

Then we had a challenge. How we can make a tv show with 2 presenters (video), 1 guest (video) and 1 phone line from the audience. Normally, we would have the presenters on the tv station , guest maybe on skype or on premises and the phone line with an hybrid audio device. Now we had to do something online without any physical presense on premises.

We decided to use Twilio Programmabe video , OBS , Obs-ndi — NewTek NDI™ and a web browser.

Schema

We have create a Twilio video programmable room that will be our “studio”.

Then we have create a custom web page for our presenters to open through their mobile phones and connect with this studio room with a predefined participant name. Another web page has been created for the tv producer and assistant in order to connect to the same room and manage to view and talk with the presenters. In this web page there is a functionality to merge a phone line to the room by using Twilio programmable numbers (more info here) .

So now we have all the people involved inside a video room with custom ids for the presenter and guests and another for the producers. Now it is time to send this to our broadcast video server.

We had the following template with the two presenters in left and right and the guest in middle.

Template

So next plan , was to create a custom web page with this layout and inside the “boxes” put a <video> html with the actual video only from presenters and the guests. With some tweaks in twilio video js sdk this was ready , so now we manage to have the presenters in a web browser inside a computer in MAD TV premises (remote through VPN).

How this will broadcasted as a linear tv program?

OBS come to the rescue . A screen capture of google chrome do the magic and now OBS displays the webpage with the presenters. We have the scene ready in first layer the Chrome screen capture and on the second layer the transparent image. Finally we stream the output to youtube and inside our infrastructure with NDI using OBS-NDI plugin (more info about ndi here).

OBS and Google chrome window

Finally ! on air!

Final composition

Broadcast

Now we are broadcasting on linear TV and Youtube. What about Instagram live?

No problem, now that we have the NDI output on our network , we use another OBS and as a first layer the NDI input. Rotate this 90 degrees and stream to Instagram live (Yellowduck) !

Instagram

Note:

This was a fast and dirty solution.

Currently we are redesign the UI for studio room and some automation in process. Everything will be available on github.

Credits:

Andreas Kouris

Dimitris Moutsatsos

Evridiki Bethani

Christos Theodorou

Asteropi Chaina

Eleni Voulgaraki

Ilenia Williams