Screen Sharing with VideoStream in ACS Communication-Calling SDK

Question

In the Beta versions of the @azure/communication-calling SDK, there was an option to send a media stream as an argument while starting screen sharing in a call. However, this option appears to be missing in the GA versions.

The following code snippet demonstrates the process in the Beta version, where screen sharing is initiated with a video stream:

        await screenShareElement.play();
        const stream = (screenShareElement as any).captureStream();
        screenStream = new LocalVideoStream(stream);

        if (call) {
            await call.startScreenSharing(screenStream); // Start screen sharing
        }

Is there an alternative method available in the GA versions to achieve similar functionality?

Answer 1

Hi @Sandeep Reddy Gomaram ,

In General Availability (GA) versions of the @azure/communication-calling SDK, starting screen sharing has been modified. The new method does not support passing a media stream as an argument when starting screen sharing. You can begin screen sharing by calling the asynchronous startScreenSharing() method on the Call object without an argument of a media stream.

Here is how you can start screen sharing in the GA version:

await call.startScreenSharing(); // Start screen sharing

After the screen sharing is initiated successfully, a LocalVideoStream object of ScreenSharing type is created and subsequently added to the localVideoStreams list of the call object. You can then manage this stream as needed.

Where there is a need to capture and send a video frame, a different solution may be utilized, for instance, VideoStreamRenderer for rendering streams or configuration of a custom video stream.

https://learn.microsoft.com/en-us/azure/communication-services/how-tos/calling-sdk/manage-video?pivots=platform-web#start-and-stop-screen-sharing-while-on-a-call
https://learn.microsoft.com/en-us/azure/communication-services/tutorials/migrating-to-azure-communication-services-calling?tabs=java&pivots=platform-web#starting-and-stopping-video 

If the answer is helpful, please click Accept Answer and kindly upvote it so that other people who faces similar issue may get benefitted from it.

Let me know if you have any further Queries.

Answer 2

Hi @Sandeep Reddy Gomaram ,

I understand that you are facing multiple issues with screen sharing and video rendering in the GA version (1.31.2) of the @azure/communication-calling SDK in the Electron-based desktop application.

• In Beta versions, you can pass a LocalVideoStream to startScreenSharing(stream), but in the GA version, screen sharing is managed internally using SDK. Now, you need to call startScreenSharing() without arguments.

await call.startScreenSharing();

This will prompt the user to select a screen or window for sharing.

• Using Electron, if you want to capture a custom HTMLVideoElement and attach it use this.

const mediaStream = await navigator.mediaDevices.getDisplayMedia({ video: true });
const screenVideoStream = new LocalVideoStream(mediaStream.getVideoTracks()[0]);
await call.startScreenSharing(); // No need to pass a stream manually
// Render preview in your app
const renderer = new VideoStreamRenderer(screenVideoStream);
const view = await renderer.createView();
document.getElementById('localScreenShareContainer').appendChild(view.target);

Error Message:

CallingCommunicationError: Failed to start video, error requesting media stream.

• On macOS, go to System Preferences > Security & Privacy > Screen Recording and allow the Electron app.
• On Windows, check Camera & Microphone permissions are enabled in Privacy Settings.

Check you are using Electron 19+ (earlier versions might not support getDisplayMedia()). Run npx electron -v If outdated, update with npm install electron@latest.

If another app (Zoom, Teams, Google Meet) is already using screen capture, try closing it and retrying. Try Manually Capturing the Stream Before Calling startScreenSharing().

const mediaStream = await navigator.mediaDevices.getDisplayMedia({ video: true });
console.log('Screen share stream acquired:', mediaStream);
await call.startScreenSharing();

If this fails, the problem is system-level (permissions, browser compatibility).

Failed to render video stream, rendering timed out while waiting for video frames. Please try again, if issue persists, contact Azure Communication Services support. (code=408) Check If the Remote Participant Is Sending Video. If isAvailable is false, the participant is not sending video.

if (!remoteVideoStream.isAvailable) {
  console.error('Remote video stream is not available.');
}

Retry Rendering After a Delay Modify the createView() call like this:

async function renderRemoteVideo(remoteVideoStream) {
  try {
    const videoStreamRenderer = new VideoStreamRenderer(remoteVideoStream);
    const view = await videoStreamRenderer.createView();
    
    remoteVideoContainer.hidden = false;
    remoteVideoContainer.style.display = 'block';
    remoteVideoContainer.appendChild(view.target);
  } catch (error) {
    console.error('Retrying video render after timeout...');
    setTimeout(() => renderRemoteVideo(remoteVideoStream), 2000); // Retry after 2 seconds
  }
}

Hope it helps!

---

Please do not forget to click "Accept the answer” and Yes wherever the information provided helps you, this can be beneficial to other community members.

If you have any other questions or still running into more issues, let me know in the "comments" and I would be happy to help you.