Closed2021/12/06にクローズ7

Amazon Chime SDKの公式Amplifyデモを改造していく

ゴール

チャット機能
参加者名簿
複数チャネル
テーマ切り替え
帯域情報の表示

useMediaStreamMetricsで取得できる中のvideoStreamMetricsの中にvideoDownstreamGoogFrameHeightとかvideoDownstreamGoogFrameWidthっていうのがあるけど、このGoogっていうのは何なんだ・・・

とんがり

videoUpstreamFrameHeight
videoUpstreamFrameWidth
videoUpstreamGoogFrameHeight
videoUpstreamGoogFrameWidth

の４種類を出力してみたら、Googがついてる方しか表示されなかった
無印の方は今は使われてないやつなのかな？

とんがり

チャットの件、ここにほぼ答えが載っていた（）
素晴らしい記事をありがとうございます。

とんがり

オンラインホワイトボードも同じ方が実装していた

これすごい
Amazon Chimeのシグナリングサーバーを間借りしてる？みたいな感じらしいけど
これ使ったらリアルタイムなんちゃらとかオンラインなんちゃらは大体実装できるのでは！

とんがり

複数チャネルを実装するために・・・

デモだと↓のようにindex.tsx(一番上のコンポーネント)でMeetingProviderで囲っているが、MeetingProvider１つにつきミーティング１つしか作れないようなので、複数のミーティングを並行で立てることができなかった

src/index.tsx

  <ThemeProvider theme={lightTheme}>
    <MeetingProvider>
      <MeetingForm />
      <Meeting/>
    </MeetingProvider>
  </ThemeProvider>

ちなみにMeetingProviderはamazon-chime-sdk-component-library-reactで提供されているいろんなProviderをラップしたもの
この下でhooksを呼び出すことができる

Story BooksによるとMeetingProviderに同じMeetingManagerインスタンスを渡せばミーティングを別の場所で同じミーティング情報を参照できる

と記載されているので、それの逆でMeetingManagerインスタンスを複数作ってそれぞれMeetingProviderに渡せば複数チャンネルを実現できるんじゃないかと思ってやってみたらできた

src/pages/MeetingView/index.tsx


const  MeetingView:FC = () => {
  const meetingManager1 = new MeetingManager({ logLevel: LogLevel.INFO });
  const meetingManager2 = new MeetingManager({ logLevel: LogLevel.INFO });

  return (
     <>
       <MeetingProvider meetingManager={meetingManager1}>
          <MeetingForm />
          <Meeting/>
       </MeetingProvider>
       <MeetingProvider meetingManager={meetingManager2}>
          <MeetingForm />
          <Meeting/>
       </MeetingProvider>
    </>
  )
}

当たり前だけどこのやり方の場合それぞれChimeミーティングが作られるので値段は倍

とんがり

ミーティングを作った時に返却されるexternalUserIdはuseRosterとかで使うのでapp全体でstoreしといたほうが良さそう

このスクラップは2021/12/06にクローズされました