Transcribing events with FAB Subtitler LIVE

FAB Subtitler LIVE can be used to transcribe live events like conferences or similar. Transcribed texts appear without delay on mobile devices (smartphones, tablets) practically without delay. People interested in reading live transcribed text simply need to open a webpage where this text appears in real time. A QR code can be provided to simplify opening the correct webpage.

A demo with what is displayed on all smartphones which opened the webpage can be seen here:

FAB Live Event Demo (click here to see the demo)

The title line is configurable:

  • You can change the logo and the title text.
  • The “WiFi” symbol is green when FAB Subtitler is transmitting texts (is ONAIR).
  • The “Settings” button allows the viewer of the webpage to change the theme, for example to display bright text on dark background (dark mode) and also change colors and text size.

How it works

  • A webserver hosts the webpage which is displayed on mobile devices.
  • FAB Subtitler LIVE transmits transcribed texts to an internet PubSub server which is used to distribute texts to all connected mobile devices.
  • Mobile devices connect to the webpage and display it. The code contained within the webpage establishes a connection to the PubSub server and receives transcribed texts in real time and displays them on the screen of the mobile device.

Setting up the system

Setting up the PubSub server

A PubSub server is required to distribute transcribed text in real time to hundreds or thousands of mobile devices in real time. FAB currently supports www.ably.com as PubSub server.

  • Create an account on www.ably.com
  • Create a new app and then click on “View App”
  • Click on “API Keys” and write down the “API Key for Publish” and “API Key for Subscribe”

Note that the free account at www.ably.com has some limitations, for example only a limited number of clients can connect simultaneously (in 2024 up to 200). If you will require more than 200 connected mobile devices (for example up to 10.000) then you will have to upgrade to a non-free account at a very moderate price. The subscription can be cancelled as soon as you do not require the additional functionality which is not included in a free account.

For security reasons it is required to renew/change API keys for every new live event so that people watching the previous event cannot watch the new event. It is not necessary to create a new Ably.com app, it is sufficient to change the API keys.

Setting up the webserver

A webserver is required to host the webpage which mobile devices will connect to to display the live transcribed text.

  • Create a new folder on the webserver. Write down the URL under which this new folder is available from the internet.
  • Download the ZIP file with the FAB application here and unpack the content of the file into the folder on the webserver. Make sure to delete the content of the folder before unpacking the ZIP file.
  • Open the file app.config.json in a text editor and enter the following data:
Field Content
apiKey The “Subscribe” API key from www.ably.com
channel Name of the live event, one word, do not use spaces
title Title text that will be displayed in the webpage, can be left empty because it will be overwritten by the text configured in FAB Subtitler LIVE

If you wish to provide a custom logo then you can copy it to this folder and include the name in the file app.config.json.

{
    "title": "",
    "logo": "./FAB_128.png",
    "apiKey": "I1Z0oQ.XXXXXX:04lPQVJ7lmwFCpBbJLuDWGFw8aeXXXXXXXXXXXXXXXX",
    "channel": "myconference2024"
}

Setting up FAB Subtitler

You will have to create a network connection to the PubSub server and enter correct data.

  • Open Options in FAB Subtitler and select System / Network
  • Add a new Network output as “Various protocols” / “FAB transcription on mobile devices”
  • Enter the following data
Keyword Value
APIKey The “Publish” key from www.ably.com
Channel The name of the live event (the same as in the file app.config.json), one word, do not use spaces
Title The name that shall be displayed in the title of the webpage on mobile devices
LineBreak The code that is used to signalize a line break (i.e. ##)
ClearScreen The code that is used to signalize to clear the complete screen (i.e. #*)

Using FAB Subtitler to transcribe live events

After configuring all above the following steps are necessary:

  • Open a new file in FAB Subtitler and select “LIVE” mode.
  • If you prefer, you can open the speech interface for dictation and transcription functionality.
  • To transmit a subtitle simply type the text and press ENTER.

Special functions:

  • To add a line break transmit the characters ## or a different combination that you have configured in FAB Subtitler Options / Network (see above “Setting up FAB Subtitler”)

  • To clear all text which is currently displayed on a mobile device transmit the characters #* or a different combination that you have configured in FAB Subtitler Options / Network (see above “Setting up FAB Subtitler”)

Preparations for a new live event

Make sure that the first configuration was already done and it was working. The following describes only what needs to be done for the following events:

  • Decide for the “name of the event”
  • Login into www.abyl.com, click on “View app”/“API Key” and renew at least the “Subscribe” key
  • Open the file “app.config.json” on the webserver in the event folder and enter the new “Subscribe” apiKey, change the “channel” name (should be one word only) and, if necessary, other fields.
  • Open the webpage with the folder containing the file “app.config.json” in the web browser. You will have to open the file index.html from this folder in the web browser.
  • Open FAB Subtitler, enter Options and modify the “Channel” name and the “Title”. Channel name should be one word only and the Title is the text displayed in the title of the webpage.
  • Perform a test if you can transmit texts from FAB Subtitler and if these are displayed on the webpage.
  • Write down the URL of the webpage available from the internet and decide how it will be made available to people interested in reading the live transcript on a mobile device, possibly create a QR code which will be published.

In case that it does not work then the reason could be:

  • Make sur that “ONAIR” is active in FAB Subtitler.
  • The “Publish” or “Subscribe” key are incorrect or the “Channel” name is not the same in the file “app.config.json” and in FAB Subtitler Options.
  • The Wifi symbol on the webpage is orange if the connection to the PubSub server could not be established. Gray color means that FAB Subtitler LIVE is not ONAIR and Green color means that data from FAB Subtitler LIVE is received.
  • Check the log in FAB Subtitler because it will probably contain the cause of the error.

This page was last updated on 2024-11-28