Presenting

Dolby.io Communications APIs offer three options that allow the conference participants to enhance collaboration during a conference by sharing media with the rest of the participants. The participants can share their screens, files, or videos. This guide informs how to use the mentioned presenting options.

Share a screen

The screen-share option allows a presenter to share the contents of the presenter's screen with other conference participants. The following procedure presents a workflow that explains how to use the screen-share option.

1. The presenter calls the startScreenShare method to start sharing the screen.

await VoxeetSDK.conference.startScreenShare();

2. The rest of the conference participants receive the streamAdded event that includes the "ScreenShare" stream.type. The event informs that the screen-share stream was successfully added.

VoxeetSDK.conference.on("streamAdded", (participant, stream) => {
  if (stream.type == "ScreenShare") {
    /* The screen-share stream is added. */
  } else {
    /* The video stream is added. */
  }
});

3. The presenter calls the stopScreenShare method to stop sharing the screen.

await VoxeetSDK.conference.stopScreenShare();

4. The rest of the conference participants receive the streamRemoved event that includes the "ScreenShare" stream.type. The event informs that the screen-share stream was successfully removed.

VoxeetSDK.conference.on("streamRemoved", (participant, stream) => {
  if (stream.type == "ScreenShare") {
    /* The screen-share stream is removed. */
  } else {
    /* The video stream is removed. */
  }
});

Share a file

The following procedure describes the workflow that allows a presenter to share a file during a conference. The Dolby.io Communications APIs service converts the user-provided file into multiple pages, as images, accessible through the image method.

1. The presenter calls the convert method to upload and convert a file.

await VoxeetSDK.filePresentation.convert(file);

2. The presenter receives the conversionProgress event that informs that the file conversion is in progress. Then, the presenter receives converted event when the file conversion is finished.

VoxeetSDK.filePresentation.on(
  "conversionProgress",
  (fileConversionProgress) => {}
);
VoxeetSDK.filePresentation.on("converted", (e) => {});

4. When the file is converted, the presenter calls the start method to start presenting the file.

await VoxeetSDK.filePresentation.start(filePresentation);

5. The presenter and the viewers receive the started event that informs that the file presentation starts. Upon receiving the started event, call the image method to get the converted file images URLs and display the proper page of the file by retrieving the individual images.

VoxeetSDK.filePresentation.on("started", (e) => {
  VoxeetSDK.filePresentation.getImage(e.fileId, e.position).then((image) => {});
});

6. The application is responsible for coordinating the page flip between the local and the presented files. The presenter calls the update method to inform the service to send the updated page number to the participants.

await VoxeetSDK.filePresentation.update(position);

7. The presenter and viewers receive the updated event with the current page number. Receiving the updated event should trigger calling the image method to display the proper page of the file by retrieving the individual images.

VoxeetSDK.filePresentation.on("updated", (e) => {
  VoxeetSDK.filePresentation.getImage(e.fileId, e.position).then((image) => {});
});

8. The presenter calls the stop method to end the file presentation.

await VoxeetSDK.filePresentation.stop(filePresentation);

9. The presenter and the viewers receive the stopped event to inform about the end of the file presentation.

VoxeetSDK.filePresentation.on("stopped", (e) => {});

Share a video

The following procedure describes the workflow that allows a presenter to share a video during a conference.

1. The presenter calls the start method to start the video presentation. This method automatically starts playing the shared video file. All participants receive the started event.

await VoxeetSDK.videoPresentation.start(url);
VoxeetSDK.videoPresentation.on("started", (e) => {});

2. The presenter can call the pause method to pause the shared video. All participants receive the paused event.

await VoxeetSDK.videoPresentation.pause(timestamp);
VoxeetSDK.videoPresentation.on("paused", (e) => {});

3. The presenter can call the play method to resume the paused video. All participants receive the played event.

await VoxeetSDK.videoPresentation.play();
VoxeetSDK.videoPresentation.on("played", (e) => {});

4. The presenter can call the seek method to navigate to a specific section of the shared video. All participants receive the sought event and watch the video from the specified timestamp.

await VoxeetSDK.videoPresentation.seek(timestamp);
VoxeetSDK.videoPresentation.on("sought", (e) => {});

5. The presenter calls the stop method to stop the video presentation. All participants receive the stopped event.

await VoxeetSDK.videoPresentation.stop();
VoxeetSDK.videoPresentation.on("stopped", () => {});