bbb-playback

Clone this repository, install the dependencies and deploy

git clone https://github.com/bigbluebutton/bbb-playback.git
cd bbb-playback
npm install
./deploy.sh

You will be able to play your recordings using the following URL

https://<domain>/playback/presentation/2.3/<recordId>

Development proxy

The development proxy allows you to test the playback player locally against recordings hosted on a remote BigBlueButton or Scalelite server (e.g. a production instance). This is useful when you want to develop or debug the player using real session data without having to download the recording files. It works with any publicly accessible recording that is not behind authentication.

The proxy forwards all /presentation requests from the local dev server to the remote host, avoiding browser CORS restrictions.

Start the dev server with the proxy enabled:

npm run start:proxy

The script will prompt you for the remote host URL:

Remote host URL (e.g. https://scalelite.example.com):

Then open the recording in your browser:

http://localhost:<port>/playback/presentation/2.3/<recordId>

When no URL is provided, the dev server starts normally without any proxy.

Note: The proxy uses secure: false so it works with self-signed certificates commonly found on development and staging servers. This setting only affects the local development proxy and has no impact on production builds.

URL query strings

• frequency:

  • f=<value>: renders per second (e.g., 5)

• layout:

  • l=content: focus on content
  • l=disabled: disabled interactive elements
  • l=media: focus on media
  • l=swapped: content/media swapped

• style: custom style

  • s=<name>

• time:

  • t=HhMmSs (e.g., 1h10m5s)
  • t=MmSs
  • t=Ss

• path:

  • p=path/to/recordings

• locale:

  • locale=locale-CODE (e.g., pt-BR)

• log:

  • debug

Configuration

• chat:

  • scroll: automatic scroll [true|false]
  • align: scroll align [top|middle|bottom]

• controls:

  • about
  • fullscreen
  • search
  • section
  • swap
  • thumbnails

• locale:

  • default: fallback [en]

• player: primary media configuration

  • rps: renders per second
  • rates: speed rates

• shortcuts: alt + shift

  • fullscreen: K
  • play/pause: Enter
  • section: L
  • seek:
    • backward: ArrowLeft
    • forward: ArrowRight
    • seconds: 15
  • skip:
    • next: ArrowUp
    • previous: ArrowDown
  • swap: M

• styles: custom styles

  • default: default style
  • url: styles host
  • valid: valid style names

• thumbnails:

  • scroll: automatic scroll [true|false]
  • align: scroll align [left|center|right]

Standalone recordings

bbb-playback can be used to create a self-contained recording - a single directory that contains all of the recording media files as well as the playback html and javascript code. To do this, use the following build command:

PUBLIC_URL=. REACT_APP_NO_ROUTER=1 npm run-script build

And then copy all of the files from the bbb-playback build directory and the files from /var/bigbluebutton/published/presentation/<recordid> together into a single directory.

External recordings

bbb-playback can play recordings hosted somewhere other than the default location. To do this, build the bbb-playback with the following options:

REACT_APP_MEDIA_ROOT_URL=/different/relative/path/to/presentation/files npm run-script build

You can also play medias from an external server. Note that you will need to have the Access-Control-Allow-Origin header returned on the medias for that to work.

REACT_APP_MEDIA_ROOT_URL=https://my-media-server.example.com npm run-script build

Playing old recordings

At /etc/bigbluebutton/nginx/presentation.nginx:

• v2.0, v2.1 and v2.2

location /playback/presentation/2.0/playback.html {
  return 301 /playback/presentation/2.3/$arg_meetingId?$query_string;
}

• [experimental] v0.9, v1.0 and v1.1

location /playback/presentation/0.9.0/playback.html {
  return 301 /playback/presentation/2.3/$arg_meetingId?$query_string;
}

Reload nginx service

sudo systemctl reload nginx