Chime SDK 使用 Vue JS 顯示所有視訊圖塊和即時與會者清單顯示
<p><em>我在分享視訊會議時多次聽說過本地圖塊和遠端圖塊。我正在嘗試顯示所有與會者視訊圖塊,但在使用 Vue JS 從頭開始製作應用程式時面臨困難,因為我剛開始使用 AWS Chime SDK。我有以下幾個問題。 </em></p>
<p><code>本地圖塊(getAllVideoTiles)和遠端圖塊(getAllRemoteVideoTiles)有什麼不同? </code></p>
<p><code>如何顯示所有與會者的視訊圖塊及其姓名? </code></p>
<p><code>如何加上與會者的姓名?我應該在哪裡傳遞它? createAttendee 還是 createMeeting API? </code></p>
<p><code>如何辨識主機? </code></p>
<p><code>如何新增會議中的即時聊天和已連接的與會者清單? </code></p>
<p><code>React 函式庫可用。 Javascript 演示也是大量的程式碼,我認為對於新手來說理解起來幫助不大。 Vue JS 及其 Demo 有機會嗎? </code></p>
<p><em>您的回答對於不久的將來的任何新開發人員都會非常有幫助和值得讚賞。非常感謝。 </em></p>
<p>目前,我有一個觀察者,只顯示我自己和一個與會者圖塊。 </p>
<pre class="brush:php;toolbar:false;">videoTileDidUpdate: tileState => {
const audioElement = this.$refs.audioElement;
const isDefaultVideo = tileState.tileId === 1;
this.audioVideo.bindAudioElement(audioElement);
this.audioVideo.bindVideoElement(
tileState.tileId,
isDefaultVideo ? this.$refs.defaultVideoElement : this.$refs.attendeeVideoElement
);
}
<audio ref="audioElement"></audio>
<video ref="defaultVideoElement"></video>
<video ref="attendeeVideoElement"></video></pre></p>