无法在 Angular 中将 Amazon Chime VideoTile 绑定到 <video>

如何解决无法在 Angular 中将 Amazon Chime VideoTile 绑定到 <video>

我正在使用 Chime JS SDK 创建 Angular 客户端。我能够创建会议并将与会者添加到会议中。但是，没有关于如何将视频图块绑定到 Angular 上的 UI 的明确文档。我正在 videoTileDidUpdate 活动中尝试此操作：

    const videoContainer = this.renderer.createElement('div');
    // Set the id of the div
    this.renderer.setProperty(videoContainer,'id',"video-" + tileState.tileId);
    this.renderer.setProperty(videoContainer,'class',"p-col");
    const videoTile = this.renderer.createElement('video');
    this.renderer.setProperty(videoTile,"tile-" + tileState.tileId);
    this.renderer.setProperty(videoTile,'autoplay',"1");
  
    this.renderer.appendChild(videoContainer,videoTile);
    this.renderer.appendChild(videoElement.nativeElement,videoContainer);        

    this.meetingSession.audioVideo.bindVideoElement(tileState.tileId,videoTile);

事件被无限触发并创建无限视频元素。然而没有视频。如何让视频显示在视频标签上。

解决方法

我自己想出来的。如果有人正在寻找它，请发布它。

我们需要使用一组视频标签并获取引用并绑定它们，而不是即时创建动态视频元素。

模板：

<div id="tile-container" class="tile-container" #video>
            <div id="tile-area" class="v-grid">
                <div id="tile-0" class="video-tile">
                    <video id="video-0" class="video-tile-video"></video>
                    <div id="attendeeid-0" class="video-tile-attendeeid"></div>
                    <div id="nameplate-0" class="video-tile-nameplate"></div>
                    <!-- <button id="video-pause-0" class="video-tile-pause">Pause</button> -->
                </div>
             </div>
        </div>

在代码中引用它。

@ViewChild('video',{ static: false }) videoElement: ElementRef | undefined;

然后在 tilDidUpdate 观察者中将其绑定到元素上。

videoTileDidUpdate(tileState: any) {

    console.log(`video tile updated: ${JSON.stringify(tileState,null,'  ')}`);
    if (!tileState.boundAttendeeId) {
      return;
    }
    const tileIndex = tileState.localTile
      ? 17
      : this.tileOrganizer.acquireTileIndex(tileState.tileId);

    const tileElement = this.videoElement?.nativeElement.querySelector(`#tile-${tileIndex}`) as HTMLDivElement;
    const videoElement = this.videoElement?.nativeElement.querySelector(`#video-${tileIndex}`) as HTMLVideoElement;
    const nameplateElement = document.getElementById(`nameplate-${tileIndex}`) as HTMLDivElement;
    const attendeeIdElement = document.getElementById(`attendeeid-${tileIndex}`) as HTMLDivElement;

    console.log(`binding video tile ${tileState.tileId}`);

    this.chimeVideoService.meetingSession.audioVideo.bindVideoElement(tileState.tileId,videoElement);
    this.tileIndexToTileId[tileIndex] = tileState.tileId;
    this.tileIdToTileIndex[tileState.tileId] = tileIndex;

    try {
      this.renderer.setProperty(nameplateElement,'innerText',tileState.boundExternalUserId.split('#')[0]);
      this.renderer.setProperty(attendeeIdElement,tileState.boundAttendeeId);
    }
    catch (errr) {
      console.log(errr);
    }
}