ZOOM Meeting SDKで字幕流したかった

準備

アカウント周り
https://qiita.com/yosuke-sawamura/items/de69e73e47335cd61d68

以下ソースを使っていく

準備ができたらミーティングに参加していくぅ

最初meeting numberにスペースがあって参加できなかったので注意

コピーだけでzoomがうごくなんて・・・すごエンジニアになった気分になれます。自慢しましょう

chatが来たときのリスナを探す

web-sdkのリファレンス見る

inMeetingServiceListenerが怪しいけどEvent定義が4つしかない？

結局chat周りのAPIは探せませんでした

執念でやる

websocketをオーバーライドして自前でやればできるかも？と考えたが怒られそうなのでやめた

DOM監視でやることにした

このポップアップと

このチャット部分から取ろう(reactで操作していると思うので非表示時にはここからはとれない）

ソース追加

public/index.htmlにcss追加

@keyframes scroll{
    from { right: -100%}
    to { right: 100%}
}
.jimaku {
    animation : scroll 5s linear;
    position: absolute;
    top: 50%;
    font-size: 5em;
    word-break: keep-all;
}

public/js/index.jsにソース追加

/** @param {string} text */
function createJimaku(text) {
  const p = document.createElement('p')
  p.classList.add('jimaku')
  p.innerText = text
  const random = Math.random() * (80 - 10) + 10
  p.style.top = random + '%'
  const color = ['red', 'white', 'blue', 'green']
  p.style.color = color[Math.floor(Math.random() * color.length)]
  p.addEventListener('animationend', () => { p.remove() })
  document.body.append(p)
}

function startObserve() {
  let chatObserver;
  // 画面右のチャットタブからコメントを取得する場合
  const containerObserver = new MutationObserver(records => {
    const record = records[0]
    if (record.addedNodes.length) {
      const container = record.addedNodes[0]
      const list = container.querySelector('#chat-list-content')
      chatObserver = new MutationObserver(records => {
        records.forEach(record => {
          if (!record.addedNodes.length) { return }
          record.addedNodes.forEach(el => {
            const textEl = el.querySelector('.chat-message-text-content')
            if (textEl && textEl.id) {
              createJimaku(el.querySelector('.chat-message-text-content').innerText);
            }
          })
        })
      })
      chatObserver.observe(list, { childList: true , subtree: true})
    }
    if (record.removedNodes.length) {
      chatObserver.disconnect()
    }
  })
  const container = document.getElementById('wc-content')
  containerObserver.observe(container, {
    childList: true
  })

  // 通知から取る場合
  const chatIcon = Array.from(document.querySelectorAll('.footer-button-base__button-label')).find(el => el.innerText === 'Chat')
  const chatButton = chatIcon.closest('.footer-button__wrapper')
  const chatPopObserver = new MutationObserver(records => {
    if (chatObserver) { return }
    records.forEach(record => {
      // 文字だけがupdateされた場合（連投）
      if (record.type === 'characterData' && !record.target.parentElement.classList.contains('number-badge')) {
        createJimaku(record.target.data)
        return
      }
      if (!record.addedNodes.length) { return; }
      // ポップアップ表示から取得
      record.addedNodes.forEach(el => {
        const textEl = el.querySelector('.last-chat-message-tip__container > div:last-child')
        if (textEl) {
          createJimaku(textEl.innerText);
        }
      })
    })
  })
  chatPopObserver.observe(chatButton, {childList: true, subtree: true, characterData: true})
}

作成したstartObserveをZoomMtg.joinのsuccessコールバックで呼び出す

            ZoomMtg.join({
              meetingNumber: meetingid,
              userName: name,
              signature: signature,
              sdkKey: sdkKey,
              passWord: meetingpwd,
              success: function (res) {
                console.log("join meeting success", res);
                startObserve()
              },
              error: function (res) {
                console.log(res);
              },
            });

いざ、実食

画面下部のポップアップから取得した場合（長いコメントは途切れる）

チャットタブから取得した場合

自分は何をやっているんだろう

これでchatのリスナあったら照れちゃう(〃ω〃)

おわり

HTMLの構造変わるだけで動かなくなるので真似しないでください

バグもあると思います

他にも楽しそうなAPIがい〜っぱい！Zoom API/SDKでみんなたのしもう!