Docs

😄 Getting Started

Quickly get up and running with making your first module

Suggest Edits

What's a module?

Modules on Oooh give creators and their fans a way to create and share videos together. On our platform, your module can use features like face-cam, gallery uploads, leaderboards, machine learning and more to create unique experiences that connect communities. Players can then submit the video they record in your module to their favourite creators for the chance to get featured! 🤩

**Examples of modules and their gameplay videos on the feed** Daily Gratitude, Draw Upon, Basketball Blitz

Examples of modules and their gameplay videos on the feed
Daily Gratitude, Draw Upon, Basketball Blitz

As a developer, you can create a module like any other web application or game using HTML5 and JavaScript. By integrating with our JavaScript API, your project can take advantage of the unique set of functionality provided to you by the Oooh Engine.
The Oooh Engine runs in our app and allows you to display camera and video components behind your web module, full-screen record gameplay, show UI in front of your module that's hidden in recordings and access other device features like machine learning APIs. 🤓

640

The layers of a module running in the Oooh app

In this quickstart guide, we'll show you everything you need to get started developing with Oooh. Let's go! 🚀

1. Install o3h-module-server

First, setup your local development environment by installing our o3h-module-server utility. When you run o3h-module-server, the files in your current directory will be served from a simple HTTP server on your local network.

npm install -g ooohtv/o3h-module-server

The o3h-module-server also proxies the request for our API, so local development mode is enabled and you're always using the most up-to-date version. Learn more about setting up your local development server

2. Create your first module

Next, let's create a simple HTML page to try out the basics of loading a module in Oooh. Add the following snippet to the <body> of a webpage you want to show in the app.

<script type="module">
    // Import the o3h API using absolute path
    import * as o3h from "/api/o3h.js";

    // Export the o3h API globally
    window.o3h = o3h;

    // Gets the instance of the Oooh runtime, the entry point for all interactions with our API
    const runtime = o3h.Instance;

    // Tell Oooh to hide its loading screen and show your module
    runtime.ready(() => {
        // At this point, you can see your module!
    });
</script>

This snippet imports our o3h JavaScript module, sets it as a global variable, and then calls Runtime.ready() to tell the app your module is ready to show. Your module should be in a paused state, with no music or animations playing, until the ready callback is fired.

Now, save your HTML file as index.html, and run the o3h-module-server command in the directory. When you run the server, you'll see a message with your local IP address and the server port. We'll need these for the last step!

3. Run your module in the SDK

Finally, it's time to run your first module in the Oooh SDK app! When you open the app, you'll want to do the following steps to set it up to connect to your local server.

  1. Select the === Custom Settings === module from the Module dropdown menu
  2. Select the Creator play type from the PlayType dropdown menu
  3. Enter your local web server's IP address in the URL field
  4. Tap Load Module!
2999

Setting up the SDK app for the first time
Select play type, Enter local server address, Load module

Haven't got the app yet? Learn more about how to install and use the Oooh SDK app

🚧

Common gotchas

  • Seeing a pink screen? 😳 That's to warn you about showing empty space in the layer behind your module. Add a background colour to your webpage to cover it up.
  • Everything looking a bit... small? 🧐 You can adjust the size of the viewport using Runtime.adjustViewport().
  • Getting a manifest validation error? 🤨 Don't worry about it for now. When you're ready to learn more about manifests on Oooh, check out Manifest Configuration.

What's next?

Congrats, you've made your first module! 🎉 Now you know how to load a module in the SDK, why not check out more of our platform features like camera and video, or functional examples in our recipes?

To help you get started with your module project, we have a collection of starter projects and samples for you to try. These include the full user flow of a module, as well as integrating many of our platform features and building with Webpack.

Good luck out there, module developer! 🙌

📘

We love feedback!

As you use these docs, let us know which pages are helpful to you by voting 👍 or 👎 at the bottom of each page. If you see an error or want to suggest an addition, check out the Suggest Edits button on the top-right of most pages.

Updated almost 2 years ago