1

我正在使用 Chime JS SDK 创建角度客户端。我能够创建会议并将与会者添加到会议中。但是，没有关于如何将视频图块绑定到 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, 'id', "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);

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

4

1 回答 1

2

我自己想通了。如果有人正在寻找它，请发布它。

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

模板：

<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, 'innerText', tileState.boundAttendeeId);
    }
    catch (errr) {
      console.log(errr);
    }
}
于 2021-08-05T05:08:08.450 回答