Skip to main content

The Screen Can Be Your Cam

· 3 min read
Stefan Benicke

Sending the screen capture is usualy only possible when displayed in the presentation view. This means, that only the presentation can be seen, but not the other participants.

With Screen Cam you can share your screen capture stream in a simple way instead of the camera stream. This way you can share your desktop, your browser or a browser tab (depending on the browser the client is using) as part of a meeting.

Cover image

Usage​

In the stream control section of the docs you have options to start or change stream with audio and/or video. Now there's a new option to use the screen instead.

eyeson.send({ type: 'start_stream', screen: true });
info

change_stream event is only used to mute/unmute your cam/mic or screen by its given parameters.

Switching back and forth​

To switch temporarily between cam and screen, one would usually start with cam, switch to screen, and then return to cam.

eyeson.start(<access_key>, { audio: true, video: true });

// […]
eyeson.send({ type: 'start_stream', audio: true, screen: true });

// […]
eyeson.send({ type: 'start_stream', audio: true, video: true });

In this example audio: true enables the microphone and automatically accompanies any detected screen-audio capture.

Mute video during screen cam​

Use the change_stream event to mute and unmute the video.

let showScreen = true;

eyeson.send({ type: 'start_stream', audio: true, screen: showScreen });

function toggleVideo() {
  showScreen = !showScreen;
  eyeson.send({ type: 'change_stream', audio: true, screen: showScreen });
}

Stop sharing screen…​

When the screen capture was stopped from outside like for example by hitting the browser's button "Stop sharing screen", the eyeson.onEvent() handler will receive an event type "screen_video_ended". Now your app can react to it.

eyeson.onEvent(event => {
  if (event.type === 'screen_video_ended') {
    eyeson.send({ type: 'start_stream', audio: true, video: true });
  }
});
eyeson.start(<access_key>, { audio: true, video: true });

// […]
eyeson.send({ type: 'start_stream', audio: true, screen: true });

Error handling​

Any error related to screen cam will raise the screen_capture_error event. Note that this is different from the capture_error that is thrown by the start_screen_capture event.

Both error events will deliver more detailed information in the name attribute.

const phrases = {
  'error_Screen_NotAllowedError': 'Allow screen access in your browser.'
};

eyeson.onEvent(event => {
  if (event.type === 'screen_capture_error') {
    const message = phrases[event.name] || 'Unable to start screen capture';
    alert(message);
  }
});

// […]
eyeson.send({ type: 'start_stream', audio: true, screen: true });

What about screen audio?​

The browser's screen share dialog will offer share audio where possible. So it is up to the meeting participant to enable it. Whenever screen audio is detected, it will be sent along with the screen's video and accompanies the microphone.

More about this can be found in our help center "sharing browser tab with audio".