0

I created a video application using chime js SDK with the help of the documentation https://aws.github.io/amazon-chime-sdk-js/index.html

            const indexMap = {};

            const acquireVideoElement = tileId => {
              for (let i = 0; i < 16; i += 1) {
                if (indexMap[i] === tileId) {
                  return videoElements[i];
                }
              }
              for (let i = 0; i < 16; i += 1) {
                if (!indexMap.hasOwnProperty(i)) {
                  indexMap[i] = tileId;
                  return videoElements[i];
                }
              }
              throw new Error('no video element is available');
            };

            const releaseVideoElement = tileId => {
              for (let i = 0; i < 16; i += 1) {
                if (indexMap[i] === tileId) {
                  delete indexMap[i];
                  return;
                }
              }
            };
            const observer = {
              videoTileDidUpdate: tileState => {
                if (!tileState.boundAttendeeId || tileState.localTile || tileState.isContent) {
                  return;
                }

                meetingSession.audioVideo.bindVideoElement(tileState.tileId, acquireVideoElement(tileState.tileId));
              },
                videoTileWasRemoved: tileId => {
                    releaseVideoElement(tileId);
                  }
            };

            meetingSession.audioVideo.addObserver(observer);
            const audioMix = document.getElementById('meeting-audio');
            meetingSession.audioVideo.bindAudioElement(audioMix);
            meetingSession.audioVideo.start();
            meetingSession.audioVideo.startLocalVideoTile();

This is working good and I can see all the attendees who is joined in the meeting. But I need to show my video also in a tag. Is it possible?

Shijin TR
  • 7,516
  • 10
  • 55
  • 122

2 Answers2

0

In your videoTileDidUpdate, for your video tile to show, where are you binding the local tile, I see that if tileState.localTile is true you are returning and the bindVideoElement is not getting called hence your localTile is not showing up. Can you please remove the localTile check and see if that works as the initial step.

Venkatesh Devale
  • 1
0
    videoTileDidUpdate: tileState => {
        // Ignore a tile without attendee ID, a local tile (your video), and a content share.
        const { allUsers } = this.props;
        if (!tileState.boundAttendeeId || tileState.isContent) {
            return;
        }
        if( tileState.localTile ) {
            if( Obj[tileState.boundExternalUserId]['tileId'] === tileState.tileId) {
                return;
            }
        }
        this.meetingSession.current.audioVideo.bindVideoElement( tileState.tileId,document.getElementById(tileState.boundExternalUserId) );
    }
Nishant Garg
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Ethan Jun 03 '22 at 22:03