Full Screen Recorder

Why are we recording again?

Every module needs to output an entertaining video. Capturing this video can be done in a couple of ways:

Screen capture the full screen of the device
Capture the raw camera feed of the device

This page gives the rundown on how to use both recording methods.

Full Screen Recording

Using device native screen capturing, you can create a video file of everything the user sees on the device.

import * as o3h from "/api/o3h.js";

const runtime = o3h.Instance;

runtime.ready(async () => {

  // show module instructions

  const assetManager = runtime.getAssetManager();

  // get an instance of the full screen recorder
  // this may trigger a prompt to ask the user for permission to record
  // this may also cause audio to be re-routed on the device so do not play any audio before doing this
  const fullScreenRecorder = await runtime.getControlManager().getFullScreenRecorder();

  // possible countdown to start recording (if the camera is visible)

  // start recording everything seen on screen
  fullScreenRecorder.startRecording();
  
  // finish module

  // stop the recording
  const videoAsset = await fullScreenRecorder.stopRecording();

  // save the recording to the module output collection
  assetManager.addToOutput("video", videoAsset);
});

Recording UI

If your module needs to give users the ability to start and stop recording, you'll want to use Oooh's Native recording UI controls instead of building your own. UI you build inside your module will show up in screen recording, but Oooh's Native UI is not captured by screen recording.

Check out our Native UI guide for details on implementing the native record button, including a step-by-step recipe.
See our Recording UI design guidelines for additional information and some helpful visual explanations.