Video Layout

Oden will layout video on top of the rendered website by listening to position update messages. The Oden Layout Client SDK (OdenLayoutClient) provides a WebSocket-based communication layer between your web application and Oden. There are two ways to update the position and size of videos: automatically by connecting them to DOM elements, or manually by sending position updates.

Connect video name to a DOM Element

The most common approach is to register DOM elements with the client. The client will automatically track position changes and send updates to Oden.

const layoutClient = getOrCreateOdenLayoutClient();
const videoElement = document.getElementById('video-container');

if (layoutClient && videoElement) {
    // Register the DOM element with a video name
    layoutClient.registerVideo('Front', videoElement);
}

// Always unregister when done (e.g., when navigating away or cleaning up)
// layoutClient.unregisterVideo('Front');

Manual Position Updates

There is the possibility to manually send position updates.

const odenClient = getOrCreateOdenLayoutClient();

// Send a manual position update
odenClient.sendNamedUserMessage("video_position_update", {
    name: "Front",
    position: {
        x: 100,
        y: 100
    },
    size: {
        width: 1280,
        height: 720
    },
    scale: {
        x: 1.0,
        y: 1.0
    },
    rotation: 0.0,
    crop: {
        left: 0.0,
        right: 0.0,
        top: 0.0,
        bottom: 0.0
    },
    z: 1
});

To see which videos are available for layout, listen to the following message.

const odenClient = getOrCreateOdenLayoutClient();

const handleVideoInfo = (videos) => {
    // videos format:
    // {
    //   "VideoName1": { width: 1920, height: 1080 },
    //   "VideoName2": { width: 1280, height: 720 }
    // }
    console.log("Available videos:", videos);
};

odenClient.registerCallback(handleVideoInfo);

// Clean up when done
odenClient.unregisterCallback(handleVideoInfo);