Custom UI - Cast to Device

We're excited to announce a brand-new feature available in EyesonJS starting with version v2.1.0 - Cast to Device .

This utility enables developers to stream an ongoing eyeson meeting directly to any Chromecast-enabled TV or compatible device, such as a smart TV or external monitor. The goal? To provide a distraction-free, video-only experience that's perfect for demos, presentations, or team meetings where visual clarity matters most.

Whether you're showcasing a product, joining a town hall, or presenting to a mix of in-room and remote participants, the Casting Manager simplifies getting your meeting session onto the big screen - with just a few lines of code.

Why Cast?

Sometimes, less is more. By casting only the meeting video to an external screen, your audience stays focused on the speaker and shared visuals - without UI overlays or local controls getting in the way. This is ideal for:

• Presentations with both in-room and remote participants
• Displaying meetings on a screen in a conference room
• Passive viewing for team members who just need to watch
• Streaming remote demos to a TV or external monitor

Available in Prebuilt UI

If you're using the eyeson Prebuilt UI, you're all set - Cast to Device is built in and ready to use. Simply open the three-dot menu during a meeting, select "Cast to Device", and click the Start button in the popup to begin casting to a compatible screen.

Browser and Device Support

The Cast to Device feature is supported in Chromium-based browsers such as Google Chrome, Microsoft Edge, and Opera on desktop platforms.

Casting works with any connected display and supports wireless streaming to Chromecast or Cast-enabled devices, including:

• Google Chromecast
• Chromecast built-in devices
• Devices with a Google Cast receiver

Android TV and some smart TVs have built-in Cast functionality, but support and performance may vary depending on the device manufacturer and software implementation.

note

For the best experience, we recommend using a standard Chromecast device or a certified Cast-enabled display.

Getting Started

Here's a quick example of how you can use the new casting feature:

<button type="button" id="button-cast" disabled>Start</button>

<script type="module">
import eyeson, { FeatureDetector } from '@eyeson/js';

const { castingManager } = eyeson;
const buttonCast = document.getElementById('button-cast');

if (FeatureDetector.canCast() === true) {
  buttonCast.disabled = castingManager.blocked;
  
  castingManager.onUpdate((event) => {
    const { type } = event;
    if (type === 'connected') {
      buttonCast.textContent = 'Stop';
    }
    else if (type === 'terminated') {
      buttonCast.textContent = 'Start';
    }
    else if (type === 'error') {
      alert(event.error.toString());
    }
    else if (type === 'change_blocked') {
      buttonCast.disabled = castingManager.blocked;
    }
  });

  buttonCast.addEventListener('click', () => {
    if (castingManager.connected) {
      castingManager.stop();
    }
    else {
      castingManager.start();
    }
  });
}
</script>

Once start() is called, the browser will display a popup with a list of available casting devices. As soon as a device is selected, the meeting video will begin streaming to it.

Calling stop() will end the casting session.

Read more about all available functions in EyesonJS in the documentation.

Final Thoughts

The new Cast to Device feature adds a whole new dimension to presenting and participating in eyeson meetings. Whether you're embedding EyesonJS into your app or using our prebuilt UI, you can now extend your video stream to any Chromecast-enabled display with ease.

Try it out today and let us know what you think - we'd love to hear from you! If you have any questions or feedback, don’t hesitate to create a ticket on GitHub.

Happy casting!