问题描述
我正在使用 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);
}
}