kiyuka

Clusterみたいなブラウザ上で会話ってどうやってるんだろう？WebRTCとか前調べたんだけど難しくてよく分かんなかたんだよな。と思って調べていたらちょうどQiitaでイベントやっていたのでちょっとどんなものか触ってみる作業ログ。

kiyuka

個人的に最近流行りのVite+React+Typescriptでやろうと思ったけど、とりあえずなにも考えずにチュートリアルをコピペする

kiyuka

これ出来てるかどうかどうやってローカルで確認すればいいんだ？PC2台ないとできなくない？
タブ2つ開いてイヤホンつけて自分の声が聞こえればいいのか。

kiyuka

チュートリアルメモ

(async () => {
  const localVideo = document.getElementById('local-video');
  const buttonArea = document.getElementById('button-area');
  const remoteMediaArea = document.getElementById('remote-media-area');
  const roomNameInput = document.getElementById('room-name');

  const myId = document.getElementById('my-id');
  const joinButton = document.getElementById('join');

  // 音声と映像の取得。音声だけなら `const { audio } = ...` にすればOK。
  const { audio, video } =
    await SkyWayStreamFactory.createMicrophoneAudioAndCameraStream();

  // 画面に映像を表示
  video.attach(localVideo);
  await localVideo.play();

  joinButton.onclick = async () => {
    if (roomNameInput.value === '') return;

    // 呪文
    const context = await SkyWayContext.Create(token);

    // room作成。すでにあれば取得。
    const room = await SkyWayRoom.FindOrCreate(context, {
      type: 'p2p',
      name: roomNameInput.value,
    });

    // room に join
    const me = await room.join();

    myId.textContent = me.id;


    // 音声・映像の配信
    await me.publish(audio);
    // await me.publish(video);

    const subscribeAndAttach = (publication) => {
      if (publication.publisher.id === me.id) return;

      const subscribeButton = document.createElement('button');
      subscribeButton.textContent = `${publication.publisher.id}: ${publication.contentType}`;
      buttonArea.appendChild(subscribeButton);

      subscribeButton.onclick = async () => {

        // 配信されているデータの取得
        const { stream } = await me.subscribe(publication.id);

        let newMedia;
        switch (stream.track.kind) {
          case 'video':
            newMedia = document.createElement('video');
            newMedia.playsInline = true;
            newMedia.autoplay = true;
            break;
          case 'audio':
            newMedia = document.createElement('audio');
            newMedia.controls = true;
            newMedia.autoplay = true;
            break;
          default:
            return;
        }

        // audio or video 要素に設定
        stream.attach(newMedia);
        remoteMediaArea.appendChild(newMedia);
      };
    };

    // `room.publications` が現在 publish されている音声や映像
    room.publications.forEach(subscribeAndAttach);

    // publish が 実行されると呼ばれる処理
    room.onStreamPublished.add((e) => subscribeAndAttach(e.publication));
  };
})();

kiyuka

SkyWay要素抜き出し

自分の音声・映像の取得、設定

  // 音声と映像の取得。音声だけなら `const { audio } = ...` にすればOK。
  const { audio, video } =
    await SkyWayStreamFactory.createMicrophoneAudioAndCameraStream();

  // 取得したデータ . attach (DOM) でデータ反映
  video.attach(localVideo);

ルーム作成

    // 呪文
    const context = await SkyWayContext.Create(token);

    // room作成。すでにあれば取得。
    const room = await SkyWayRoom.FindOrCreate(context, {
      type: 'p2p',
      name: roomNameInput.value,
    });

room に join

// room に join
const me = await room.join();

// room ID
me.id

room に映像音声の配信

   // 音声・映像の配信
   await me.publish(audio);
   await me.publish(video);

room にpublish されている音声や映像の処理

// `room.publications` が現在 publish されている音声や映像 のリスト
room.publications.forEach((publication) => {
  // 配信されているデータの取得
  const { stream } = await me.subscribe(publication.id);

  // video or audio
  stream.track.kind

  // `SkyWayStreamFactory.createMicrophoneAudioAndCameraStream()`
  // で取得した自分の音声・映像と同じように処理できる
  stream.attach(newMedia);
});

// publish が 実行されると呼ばれる処理
room.onStreamPublished.add((e) => subscribeAndAttach(e.publication));

kiyuka

開きっぱなしだったのでClose。ひとまず基本的な使い方はチュートリアル見ながらやればできたということで。

このスクラップは2023/11/19にクローズされました