How to Integrate Stagetimer with vMix (Step-by-step Guide)

Introduction

This guide shows how to integrate Stagetimer with vMix, a live video production and streaming software for Windows.

vMix supports various inputs including cameras, video files, and NDI sources. It enables creating, mixing, switching, recording, and live streaming of professional productions.

Combining Stagetimer with vMix allows you to display countdowns and time-based information in your live productions. This integration enhances timing precision in your workflow.

Prefer a video?

This guide walks you through the process of setting up Stagetimer with vMix.

Importing Stagetimer into vMix

To import Stagetimer into vMix, follow these steps:

  1. In your Stagetimer room in your browser, click the “Share” button and select “Copy” to copy the viewer link.
  2. Launch vMix and open or create a scene you want to edit.
  3. In the bottom left corner, click “Add Input” and choose “Web Browser” from the list of input types.
Adding a Web Browser input in vMix
Adding a Web Browser input in vMix
  1. Paste the copied viewer link into the URL section. Set the width to 1280 and height to 720 for optimal display.
Configuring the Web Browser input
Configuring the Web Browser input
  1. Select the latest browser version option and click “OK” to save the browser input.
  2. Click the newly added source to verify that the vMix browser is working correctly.
vMix interface showing Stagetimer countdown display integrated as a browser source
Stagetimer integrated in vMix

Interacting with the Browser Input

To interact with the browser input in vMix:

  1. Right-click on the source to access interaction options for the browser input.
  2. You can enable mouse or keyboard input, navigate back or forward, view another page, or change page properties like the URL.
  3. To keep the settings stable, ensure that the mouse and keyboard are not enabled.
  4. You can now use the Stagetimer display in your vMix production.
Interaction options for browser input
Interaction options for browser input Alt: Context menu showing browser input options in vMix

Pro Tip for Streamlined Displays

For a more efficient setup, you can display Stagetimer on secondary screens without interfering with your primary production flow:

  1. Locate the External Outputs in the bottom left corner of the vMix screen.
  2. Click on External Outputs to view the list of available outputs.
External Outputs menu
External Outputs menu Alt: vMix interface showing the External Outputs menu
  1. Select your preferred Output Number (e.g., Output 2).
  2. From the list of Input Numbers that appears, choose the number corresponding to your Stagetimer Browser Source.
Selecting Output and Input numbers
Selecting Output and Input numbers Alt: vMix interface highlighting the selection of Output and Input numbers for Stagetimer
  1. Now you can access the Stagetimer display on any other screen (like projectors or LED walls) by selecting the configured Output Number.
Stagetimer on external output
Stagetimer on external output Alt: vMix interface showing Stagetimer displayed on an external output

If you don’t want Stagetimer in your primary production view, right-click on the browser source to clear it from your main production activities.

Conclusion

This integration adds real-time countdowns and time-based data to your vMix productions. You can try Stagetimer for free at https://stagetimer.io/r/generate/.