Media Sources

Overview

Media sources on Oooh allow you to display and control multimedia elements, such as video and camera, within your module.

How it works

Implementation

Camera Source

Camera Source Example

import * as o3h from "/api/o3h.js";
const runtime = o3h.Instance;

// Global variables
let layout;
let cameraMediaSource;

// Module functions
async function setupModule() {
    // Get the runtime managers
    const mediaSourceManager = runtime.getMediaSourceManager();
    const layoutManager = runtime.getLayoutManager();
    
    // Camera media source configuration
    const cameraConfig = {
        "requestedResolutionScale": o3h.CameraResolutionScale.Full,
        "cameraType": o3h.CameraType.FrontFacing
    }
    
    // Create a camera media source
    cameraMediaSource = await mediaSourceManager.createCameraSource(cameraConfig);

    // Creating a full-screen camera layout
    const layoutConfig = {"id": "main"};
    const mediaSources = {"main": cameraMediaSource};
    layout = await layoutManager.createLayout(layoutConfig, mediaSources);

    // Wait for the camera to start before removing the loading screen
    await cameraMediaSource.startCamera();
}

async function startModule() {
    // Show the layout when the loading screen is removed
    await layout.show();

    // Create a media source recorder with the camera media source
    const cameraRecorder = await cameraMediaSource.createVideoRecorder();

    // Start recording the camera
    cameraRecorder.startRecording();
    
    // Stop the camera recording after a delay of 5 seconds and get the video asset
    const videoAsset = await cameraRecorder.stopRecording(5);
    
    // Add the video asset to the module output
    const assetManager = runtime.getAssetManager();
    assetManager.addToOutput("recording", videoAsset);
    
    // Complete the module
    runtime.completeModule({"score": 0});
}

// Setup module then display the module to the player
setupModule().then(() => runtime.ready(startModule));

Configuring the camera

Recording from the camera can use a lot of resources (CPU, GPU, memory) and it's very important to limit the resolution of the camera and camera video. For instance, if your camera is going to display in a small frame, don't capture the camera at full resolution (usually 1080p+).

You can use properties of CameraMediaSourceConfig to set up the camera, choosing a resolution scale. Use Half for a video that should be half the screen and half of full resolution, and so on.

Video Player Source

Video Player Source Example

import * as o3h from "/api/o3h.js";
const runtime = o3h.Instance;

// Global variables
let layout;
let videoPlayerSource;

// Module functions
async function setupModule() {
    // Get the runtime managers
    const mediaSourceManager = runtime.getMediaSourceManager();
    const layoutManager = runtime.getLayoutManager();
    
    // Video player media source configuration
    const videoPlayerConfig = {
        "url": "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8" // Big Buck Bunny
    }
    
    // Create a video player media source
    videoPlayerSource = await mediaSourceManager.createVideoPlayerSource(videoPlayerConfig);

    // Creating a full-screen video layout
    const layoutConfig = {"id": "main"};
    const mediaSources = {"main": videoPlayerSource};
    layout = await layoutManager.createLayout(layoutConfig, mediaSources);
}

async function startModule() {
    // Show the layout when the loading screen is removed
    await layout.show();

    // Start playing the video in the video player media source
    videoPlayerSource.play();
}

// Setup module then display the module to the player
setupModule().then(() => runtime.ready(startModule));