Issues Rendering Video in VideoGallery on React

Manoj Gavel 0

Stuck on using VideoGallery to render video in a React project. Successfully receiving a call response after joining the call, but unable to render the video optimally. Here’s the method used:

import { VideoGallery } from "@azure/communication-react";

<VideoGallery
            layout={layout}
            localParticipant={MockLocalParticipant}
            remoteParticipants={mockRemoteParticipants}
            localVideoViewOptions={localVideoViewOptions}
            pinnedParticipants={pinnedParticipants}
            onPinParticipant={(communicationUserId) => {
              setPinnedParticipants(pinnedParticipants.concat(communicationUserId));
            }}
            onUnpinParticipant={(communicationUserId) => {
              console.log(pinnedParticipants.filter((u) => u !== communicationUserId));
              setPinnedParticipants(
                pinnedParticipants.filter((u) => u !== communicationUserId)
              );
            }}
            remoteVideoTileMenu={true}
          />

Shree Hima Bindu Maganti 3,130 Reputation points Microsoft Vendor

2024-11-08T05:55:50.9833333+00:00

Hi @Manoj Gavel ,

Following up to see if you have chance to check my previous response and help us with requested information to check and assist you further on this.
Shree Hima Bindu Maganti 3,130 Reputation points Microsoft Vendor

2024-11-11T00:46:27.8966667+00:00

Hi @Manoj Gavel ,

Following up to see if you have chance to check my previous response and help us with requested information to check and assist you further on this.

1 answer

Shree Hima Bindu Maganti 3,130 Microsoft Vendor

Hi @Manoj Gavel ,
welcome to the Microsoft Q&A Platform!
It seems you're encountering an issue with rendering video in the VideoGallery component of your React project while using the Azure Communication Services React SDK.

Ensure Video Streams Are Available

Make sure both the local and remote participants have valid video streams:

const MockLocalParticipant = {
  videoStream: mockLocalVideoStream, // Ensure video stream exists
};
const mockRemoteParticipants = [
  {
    videoStream: mockRemoteVideoStream, // Ensure each remote participant has a video stream
  },
];

Layout Configuration

Ensure the layout is correctly defined for both local and remote videos:

const layout = {
  local: "floating", // Options: "floating", "grid", "stacked"
  remote: "grid",    // Options: "grid", "stacked"
};

Local Video Options

Ensure localVideoViewOptions is correctly set to display the local video:

const localVideoViewOptions = {
  isMirrored: true, // Optional: Mirrors the local video
};

Disable VideoTileMenu for Testing

Temporarily set remoteVideoTileMenu to false for debugging:

<VideoGallery
  layout={layout}
  localParticipant={MockLocalParticipant}
  remoteParticipants={mockRemoteParticipants}
  localVideoViewOptions={localVideoViewOptions}
  pinnedParticipants={pinnedParticipants}
  onPinParticipant={(userId) => setPinnedParticipants([...pinnedParticipants, userId])}
  onUnpinParticipant={(userId) => setPinnedParticipants(pinnedParticipants.filter(id => id !== userId))}
  remoteVideoTileMenu={false} // Disable for testing
/>

Manoj Gavel 0

Hiiii @Shree Hima Bindu Maganti . i got the solution for that and stack on other 2 problems. First one is to add more options on remoteVideoViewOptions like mute the participants and more. Please let me know any solution for it


const VideoStreamOptions = {
        // scalingMode: "Fit",
        isMirrored: true,
    };
 <VideoGallery
                {...videoGalleryProps}
                layout={layout}
                onRenderAvatar={onRenderAvatar}
                remoteVideoViewOptions={VideoStreamOptions}
                pinnedParticipants={pinnedParticipants}
              />

Shree Hima Bindu Maganti 3,130 Reputation points Microsoft Vendor

2024-11-15T06:00:52.5433333+00:00
Hi @Manoj Gavel ,
Thankyou for your Response!
To add more options like muting participants and customizing remoteVideoViewOptions in VideoGallery, follow these exact steps:

Mute Participants

The VideoGallery does not directly support muting, so you manage it using the Azure Communication Services (ACS) SDK by controlling the audio streams of participants.

Use isMuted property to toggle the participant's mute state.

const handleMuteParticipant = (participantId) => { const participant = remoteParticipants.find(p => p.userId === participantId); if (participant) { participant.isMuted = !participant.isMuted; // Toggle mute state setRemoteParticipants([...remoteParticipants]); // Update state } };

Customize remoteVideoViewOptions

Use remoteVideoViewOptions to adjust video display settings for remote participants.

isMirrored: To mirror the video stream.

scalingMode: To adjust video scaling ("Crop" or "Fit").

const VideoStreamOptions = { isMirrored: true, // Enables video mirroring scalingMode: "Crop", // Adjusts the scaling };

Add Custom Buttons for Participants

Use a custom menu for remote participants to add actions like muting or other options.

Add a button in the participant tile to toggle mute.

<VideoGallery {...videoGalleryProps} layout={layout} onRenderAvatar={onRenderAvatar} remoteVideoViewOptions={VideoStreamOptions} pinnedParticipants={pinnedParticipants} remoteParticipantMenu={(participantId) => ( <button onClick={() => handleMuteParticipant(participantId)}> {participant.isMuted ? 'Unmute' : 'Mute'} </button> )} />

With these steps, you can extend the functionality of VideoGallery to include muting participants and enhancing video view options.
Let me know if you have any further assistances.
Manoj Gavel 0 Reputation points

2024-11-15T06:57:06.43+00:00
@Shree Hima Bindu Maganti The given solution for add more options in remote participants on video gallery is not working on my azure communication react. Please let me know if any option available

"@azure/communication-react": "^1.20.0",

Shree Hima Bindu Maganti 3,130 Microsoft Vendor

Hi @Manoj Gavel ,

Thankyou for your Response!
In version 1.20.0, muting or unmuting participants is not directly managed via the VideoGallery component.
Access the RemoteParticipant:

Muting and unmuting are done using the mute() and unmute() methods on the RemoteParticipant object.

Mute/Unmute

const muteParticipant = (participantId) => {
  const participant = call.remoteParticipants.find(
    (p) => p.identifier.communicationUserId === participantId
  );
  if (participant) {
    participant.mute(); // Mute the participant
  }
};
const unmuteParticipant = (participantId) => {
  const participant = call.remoteParticipants.find(
    (p) => p.identifier.communicationUserId === participantId
  );
  if (participant) {
    participant.unmute(); // Unmute the participant
  }
};

Trigger Mute/Unmute:

You can trigger these functions through button clicks or any UI interaction.

<button onClick={() => muteParticipant(participantId)}>Mute</button>
<button onClick={() => unmuteParticipant(participantId)}>Unmute</button>

Customizing remoteVideoViewOptions::

remoteVideoViewOptions allows customization for how the remote videos are displayed, such as mirroring the video and setting the scaling mode.

const remoteVideoViewOptions = {
  isMirrored: true,   // Mirror the video for better user experience
  scalingMode: "Crop" // Options: "Fit", "Crop"
};
<VideoGallery
  remoteVideoViewOptions={remoteVideoViewOptions}
  remoteParticipants={remoteParticipants}
/>

Adding Buttons for Remote Participant Control:

VideoGallery does not have built-in support for adding custom buttons for actions like mute/unmute. You can achieve this by rendering custom UI elements for each remote participant.

const onRenderRemoteParticipant = (participant) => (
  <div key={participant.identifier.communicationUserId}>
    <VideoTile participant={participant} />
    <button onClick={() => muteParticipant(participant.identifier.communicationUserId)}>
      Mute
    </button>
    <button onClick={() => unmuteParticipant(participant.identifier.communicationUserId)}>
      Unmute
    </button>
  </div>
);
<VideoGallery
  remoteParticipants={remoteParticipants}
  onRenderRemoteParticipant={onRenderRemoteParticipant}
/>

If these solutions still doesn't help you, consider upgrading to the latest version of @azure/communication-react.
Check the official Azure Communication Services React SDK documentation for any version-specific features.

Manoj Gavel 0

@Shree Hima Bindu Maganti onRenderRemoteParticipant={onRenderRemoteParticipant} is not working but i got an idea we can apply

onRenderRemoteVideoTile={onRenderRemoteVideoTile}

  const subscribeToRemoteVideoStream = async (remoteVideoStream) => {
    
    let renderer = new VideoStreamRenderer(remoteVideoStream);
    let view;
    const createView = async () => {
      view = (await renderer.createView()).target;
    } });
    if (remoteVideoStream.isAvailable) {
      
      try {
     await   createView();
      }
      catch (error) {
        console.error(error);
      await  createView();
      }
    }
    console.log(view,'view subscribeToRemoteVideoStream');
    return view;
  };

const onRenderRemoteParticipant =async (participant) => {
    let participantVideoStream = call.remoteParticipants.find((p) => p.identifier.communicationUserId === participant.userId).videoStreams[0];
    let  view = await subscribeToRemoteVideoStream(participantVideoStream)
    return (
      <div key={participant.userId}>
        <VideoTile
          participant={participant}
          displayName={participant.displayName}
          renderElement={
            participantVideoStream.isAvailable  ? <StreamMedia videoStreamElement=	{view} /> : ""
          }
          isVideoReady={participantVideoStream.isAvailable} 
        />
      </div>
    );
  };

  const renderVideoGallery = () => {
    try {
      if (videoGalleryProps) {
        return (
          <VideoGallery
            {...videoGalleryProps}
            layout={layout}
            onRenderAvatar={onRenderAvatar}
            remoteVideoViewOptions={VideoStreamOptions}
            pinnedParticipants={pinnedParticipants}
            onPinParticipant={(communicationUserId) => {
              //console.log([...pinnedParticipants, communicationUserId]);
              setPinnedParticipants([...pinnedParticipants, communicationUserId]);
            }}
            onUnpinParticipant={(communicationUserId) => {
              //console.log(pinnedParticipants.filter((u) => u !== communicationUserId));
              setPinnedParticipants(
                pinnedParticipants.filter((u) => u !== communicationUserId)
              );
            }}
            onRenderRemoteVideoTile={onRenderRemoteParticipant}
          />
        );
      }
    } catch (error) {
      console.error("Error rendering VideoGallery:", error);
      // Optionally, you can display an error message or fallback UI here
      return <div>Error loading video gallery.</div>;
    }
    return null;
  };

But not getting the response please let me know if this work and the wokring code

Shree Hima Bindu Maganti 3,130 Microsoft Vendor

Hi @Manoj Gavel ,

Thankyou for your Response!
The approach you're trying with onRenderRemoteVideoTile is a valid way to customize the rendering of remote participants in the VideoGallery component for your Azure Communication Services (ACS) React app.
Use onRenderRemoteVideoTile to Customize Remote Participant Rendering.

Replace onRenderRemoteParticipant with onRenderRemoteVideoTile in VideoGallery.

Code to Subscribe to Remote Video Streams

import { VideoStreamRenderer } from '@azure/communication-calling';
const subscribeToRemoteVideoStream = async (remoteVideoStream) => {
    if (remoteVideoStream.isAvailable) {
        const renderer = new VideoStreamRenderer(remoteVideoStream);
        const view = await renderer.createView();
        return view.target; // DOM element for video
    }
    return null;
};

Custom onRenderRemoteVideoTile

const onRenderRemoteVideoTile = async (participant) => {
    const participantVideoStream = participant.videoStreams.find((stream) => stream.mediaStreamType === 'Video');
    const videoElement = participantVideoStream ? await subscribeToRemoteVideoStream(participantVideoStream) : null;
    return (
        <div>
            <div>{participant.displayName}</div>
            {videoElement ? <div>{videoElement}</div> : <div>No Video Available</div>}
        </div>
    );
};

Pass onRenderRemoteVideoTile to VideoGallery

<VideoGallery
{...videoGalleryProps}
layout={layout}
onRenderAvatar={onRenderAvatar}
onRenderRemoteVideoTile={onRenderRemoteVideoTile}
/>

Debugging Checklist:

Ensure videoGalleryProps.remoteParticipants contains valid videoStreams.

Log participant and videoStreams to verify data availability.

Required Dependencies:

@azure/communication-calling: Ensure it's compatible with your @azure/communication-react version.

Shree Hima Bindu Maganti 3,130 Reputation points Microsoft Vendor

2024-11-21T01:31:28.9633333+00:00

Hi @Manoj Gavel ,

Following up to see if you have chance to check my previous response and help us with requested information to check and assist you further on this.

Manoj Gavel 0

hi @Shree Hima Bindu Maganti Finally i got the desired solution for the sam. Here i am sharing the code.


import { StreamMedia, VideoGallery, VideoTile, usePropsFor } from "@azure/communication-react";


  const [views, setViews] = useState({});

const onRenderRemoteParticipants = async (participant) => {
    let participantVideoStream = call.remoteParticipants.find((p) => p.identifier.communicationUserId === participant.identifier.communicationUserId)?.videoStreams[0];
    let view = await subscribeToRemoteVideoStream(participantVideoStream);

    setViews((prevViews) => ({
      ...prevViews,
      [participant.identifier.communicationUserId]: view,
    }));
  };

  useEffect(() => {
    const handleRemoteParticipantsUpdated = (e) => {
      e.added.forEach((remoteParticipant) => {
        remoteParticipant.videoStreams.forEach(async (remoteVideoStream) => {
          remoteVideoStream.on("isAvailableChanged", async () => {
            if (remoteVideoStream.isAvailable) {
              if (remoteVideoStream.mediaStreamType === 'ScreenSharing' && remoteVideoStream.isAvailable) {
                console.log(`User is sharing their screen.`);
                setRemoteIsScreenSharingOn(!isRemoteScreenSharingOn);
              }
              if (remoteVideoStream.mediaStreamType === 'Video' && remoteVideoStream.isAvailable) {
                onRenderRemoteParticipants(remoteParticipant);

              } else {
                setViews((prevViews) => {
                  let newViews = { ...prevViews };
                  delete newViews[remoteParticipant.identifier.communicationUserId];
                  return newViews;
                });
              }
            }
            else {
              setRemoteIsScreenSharingOn(false);
            }
          });
        });
        onRenderRemoteParticipants(remoteParticipant);
      });
    };
    call.on("remoteParticipantsUpdated", handleRemoteParticipantsUpdated);
    return () => {
      call.off("remoteParticipantsUpdated", handleRemoteParticipantsUpdated);
    };
  }, [call]);
 


  const onRenderRemoteParticipant = (participant) => {
    return (
      <div key={participant.userId}>
        <VideoTile
          displayName={participant.displayName}
          userId={participant.userId}
          renderElement={
            participant.videoStream.isAvailable && views[participant.userId] ? <StreamMedia videoStreamElement={views[participant.userId]} /> : ""
          }
          isVideoReady={participant.videoStream.isAvailable}
          isMuted={participant.isMuted}
          contextualMenu={getContextualMenu(participant)}
          onRenderPlaceholder={onRenderPlaceholder}
          isPinned={pinnedParticipants.includes(participant.userId)}
          isMirrored={true}
        />
      </div>
    );
  };
  
  const renderVideoGallery = () => {
    try {
      if (videoGalleryProps) {
        return (
          <VideoGallery
            {...videoGalleryProps}
            layout={isRemoteScreenSharingOn ? "focusedContent" : layout}
            onRenderAvatar={onRenderAvatar}
            remoteVideoViewOptions={VideoStreamOptions}
            pinnedParticipants={pinnedParticipants}
            onPinParticipant={(communicationUserId) => {
              setPinnedParticipants([...pinnedParticipants, communicationUserId]);
            }}
            onUnpinParticipant={(communicationUserId) => {
              setPinnedParticipants(
                pinnedParticipants.filter((u) => u !== communicationUserId)
              );
            }}
            onRenderRemoteVideoTile={onRenderRemoteParticipant}
          />
        );
      }
    } catch (error) {
      console.error("Error rendering VideoGallery:", error);
      return <div>Error loading video gallery.</div>;
    }
    return null;
  };
        />

Shree Hima Bindu Maganti 3,130 Reputation points Microsoft Vendor

2024-11-21T05:53:42.2666667+00:00

Hi @Manoj Gavel ,
Thankyou for your Response.
I'm glad that you were able to resolve your issue and thank you for posting your solution so that others experiencing the same thing can easily reference this! Since the Microsoft Q&A community has a policy that "The question author cannot accept their own answer. They can only accept answers by others .
Manoj Gavel 0 Reputation points

2024-11-21T07:53:12.6566667+00:00

hiii @Shree Hima Bindu Maganti thanks for the response. I am implementting the mode in which if i want to off the incoming audio of any particular participant. But i am not getting any solution for it please let me know any posible solution.
Thanks for this long support

Shree Hima Bindu Maganti 3,130 Microsoft Vendor

Hi @Manoj Gavel ,

Thankyou for your Response.
Azure Communication Services provides the ability to manage remote participants and their media streams. To mute the incoming audio for a specific participant, we can access their remoteParticipants and use the audioStreams API.

const toggleParticipantAudio = async (participantId, mute) => {
  const participant = call.remoteParticipants.find(
    (p) => p.identifier.communicationUserId === participantId
  );
  if (participant) {
    participant.audioStreams.forEach((audioStream) => {
      if (audioStream.isAvailable) {
        if (mute) {
          // Mute: Stop playback
          audioStream.stop();
          console.log(`Muted audio for participant: ${participantId}`);
        } else {
          // Unmute: Resume playback
          audioStream.start();
          console.log(`Unmuted audio for participant: ${participantId}`);
        }
      }
    });
  } else {
    console.error(`Participant with ID ${participantId} not found.`);
  }
};
// Usage Example
toggleParticipantAudio("participant-id", true); // To mute
toggleParticipantAudio("participant-id", false); // To unmute

call.remoteParticipants retrieves all remote participants in the current call.

Each participant has audioStreams, which represents their incoming audioStream.stop() stops the playback of audio locally.

audioStream.start() resumes the playback of audio.

Shree Hima Bindu Maganti 3,130 Reputation points Microsoft Vendor

2024-11-26T04:52:24.8233333+00:00

Hi @Manoj Gavel ,

Following up to see if you have chance to check my previous response and help us with requested information to check and assist you further on this.
Shree Hima Bindu Maganti 3,130 Reputation points Microsoft Vendor

2024-11-28T13:19:27.91+00:00

Hi @Manoj Gavel ,

Following up to see if you have chance to check my previous response and help us with requested information to check and assist you further on this.

Share via

Issues Rendering Video in VideoGallery on React

1 answer

Your answer