Skip to main content

Choose pre-selected screensharing media

· 2 min read
Stefan Benicke

What is this about?​

In version 109, Chrome has rolled out a new media-picker where the order of display surfaces has changed. It has changed from screens/windows/tabs to tabs/windows/screens. Furthermore the pre-selection has changed too - from screens to tabs. Lucky for us, since version 107 of Chrome and Chromium based browsers, like Edge and Opera, there's an option that gives you back the control.

This article is showing how it can be controlled in your custom UI with eyeson-js since v1.8.5.

Cover image

Feature detection​

This will only work in supported browsers. So make sure to combine it with the following detection function.

import { FeatureDetector } from 'eyeson';
FeatureDetector.canChooseDisplaySurface();

Use-cases​

There are many options for your application.

If you leave it, it's up to the browser which display surface is pre-selected.

If your app is going to choose, you can simply set a predefined value when screenshare is started.

It's also possible to let your users choose. When this feature is supported, the start screenshare button might be extended with the options for tabs, windows, or screens.

Show me the code​

Whenever you call screen: true, you can set surface: 'monitor', 'window', or 'browser'.

// start a screenshare presentation
props.eyeson.send({
    type: 'start_screen_capture',
    audio: true,
    screen: true,
    surface: 'monitor',
});

// share screen instead of camera
eyeson.send({
    type: 'start_stream',
    audio: true,
    video: false,
    screen: true,
    surface: 'monitor',
});

Example with user selection:

import { FeatureDetector } from 'eyeson';

const supported = FeatureDetector.canChooseDisplaySurface();

if (supported) {
    document.querySelector('#select-display-surface').display = 'block';
}

const startScreensharing = () => {
    const options = {
        type: 'start_screen_capture',
        audio: true,
        screen: true,
    };
    if (supported) {
        options.surface = document.querySelector('#select-display-surface').value;
    }
    eyeson.send(options);
};

More information​

You can read more about the displaySurface feature and the media-picker order change in these articles: