360-degree (live) adaptive streaming with RICOH THETA S and Bitmovin

Recently I got the RICOH THETA S 360-degree camera and I asked myself how to setup a (live) adaptive streaming session using the Bitmovin cloud encoding and HTML5 player. I quickly found some general guidelines on the internet but before providing step-by-step instructions one has to consider the following:

• Update the firmware of your RICOH THETA S by downloading the basic app, start it (while the camera is connected via USB) and go to File -> Firmware Update... and follow the steps on the screen. It's pretty easy and mine got updated from v1.11 to v1.82.
• Think about a storage solution for your files generated by the Bitmovin cloud encoding and possible options are FTP, Amazon S3, Google Cloud Storage, and Dropbox. I used Amazon S3 for this setup which provides a bucket name, "AWS Access Key", and "AWS Secret Key".
• Setup a basic web site and make sure it works with the Bitmovin HTML5 player for video on demand services with the content hosted on the previously selected storage solution (i.e., avoid any CORS issues). In my setup I used Wordpress and the Bitmovin Wordpress plugin which makes it very easy...

Step 1: Follow steps 1-4 from here.

Follow steps 1-4 from the general guidelines. Basically, install the live-streaming app, register the device, and install/configure OBS. Enable the live streaming on the RICOH THETA S and within OBS use the "Custom Streaming Server" of the "Stream" settings. That basically connects the RICOH THETA S with OBS on your local computer. The next step is forwarding this stream to the Bitmovin cloud encoding service for DASH/HLS streaming.

Step 2: Create a new Bitmovin Output

1. Login to the Bitmovin portal and go to Encoding -> Outputs -> Create Output
2. Select Amazon S3 and use any “Output Profile name”, e.g., ricoh-livestream-test
3. Enter the name of your Bucket from Amazon S3
4. The prefix is not needed
5. Select any “Host-Region” (preferably one close to where you are)
6. Enter the ”AWS Access Key" and the “AWS Secret Key” from Amazon S3
7. Make sure the "Create Public S3 URLs" checkbox is enabled

An example screenshot is shown below.

Finally, click the “+” sign to create it and if everything is correct, the output will be created, otherwise an error message will be shown. In such a case, make sure the bucket name and keys are correct as provided when creating a bucket on Amazon S3.

Step 3: Create a new Bitmovin Livestream

1. Login to the Bitmovin portal and go to Live (beta) -> Create Livestream
2. Select "Encoding-Profile": bitcodin fullHD is sufficient (4K not needed as the device provides only fullHD)
3. Select "Output-Profile": select the output you’ve created in previous step (ricoh-livestream-test)
4. Add a "Livestream-Name" (any string works here), e.g., ricoh-livestream-test
5. Add a "Stream-Key" (any string works here), e.g., ricohlivestreamtest
6. Click "Create Live Stream", an "Important Notice" shows up & click "Create Live Stream"
7. Wait (could take some time, you may reload the page or go to the "Overview") for RTMP PUSH URL to be used in OBS

An example screenshot is shown below which displays the RTMP PUSH URL, Stream Key, MPD URL, and HLS URL to be used in the next steps.

The next step is to start streaming in OBS which provides the live stream from the RICOH THETA S to the Bitmovin cloud encoding.

Step 4: Start Streaming in OBS

1. Go to OBS -> Settings
2. In section "Stream", select "Custom Streaming Server"
3. Enter the RTMP PUSH URL from Bitmovin in the "URL" field of OBS
4. Enter the Stream Key from Bitmovin in the "Stream key" field of OBS
5. Click "OK" and then click "Start Streaming" in OBS

An example screenshot is shown below and if everything works fine OBS will stream to the Bitmovin cloud encoding  service.

The final step is setting up the HTML5 player..

Step 5: Setup the HTML5 Player

Basically follow the instructions here or in my case I simply used Wordpress and the Bitmovin Wordpress plugin.

1. Go to the Bitmovin WP plugin
2. Select "Add New Video"
3. Enter any name/title of the new video
4. In the "Video" section, enter the "DASH URL" and "HLS URL" from the Bitmovin livestream provided in step 3 (i.e., the MPD URL and the HLS URL)
5. In the "Player" section, select latest stable (in my case this was latest version 7)
6. In the "VR" section, select startup mode "2d" and leave the rest as is

An example screenshot is shown below.

Finally, click on "Publish" in Wordpress which will give you a shortcut code to be placed (copy/paste) into your site or post and you're done...!

The setup during the live streaming session is shown in the screenshot below. The RICOH THETA S on the right is mounted on a tripod and connected via USB. My MacBook Pro runs OBS (see display on the right) which streams it to the Bitmovin cloud encoding and also shows the live streaming session within a browser (see display on the left) using the Bitmovin HTML5 player.

A similar approach can be used for video on demand content but in such a case you don't need OBS as you simply encode your content using the Bitmovin cloud encoding, transfer it to your web server, and use the HTML5 player for the actual streaming.