こんにちは、HTBスタッフのKです。

しばらく更新をサボっていましたが、今日は小ネタを手短に書きたいと思います。

YouTubeやLINE LIVEなどでライブ配信を見たことがある人は多いかと思いますが、その時左下に現在の視聴人数が出ますよね？

先日の「水曜どうでしょうエアキャラバンin 赤平2020」では制作サイドから、同時視聴数を把握したいとの要望があり、実装するに至りました。

エアキャラバンの詳しい話はこちらの記事をご覧ください。

今回は埋め込みプレイヤーで動画ライブ配信を行った際でも、同様のことを無理やりやったよという軽い内容を、なんと・・言葉だけで、短く書きます。

動画プレイヤー

埋め込みの動画プレイヤーにはTHEOplayerを用いました。

簡単に導入出来て、その後のカスタマイズもしやすいので使いやすいです。

興味のある方はClassmethodさんのこちらの記事に導入方法が詳しく書かれていますのでご覧ください。

動画の再生中イベントをキャッチ！

結論から申し上げますと今回は、

addEventListenerで、メディアイベント'timeupdate'をキャッチしてサーバーへ投げました。

timeupdateとは動画の再生時間が変更されたときに発生するイベントです。

・・timeupdate?

え！なんで？playとかplayingじゃないの？とお思いでしょう。

そんなお方は一度、こちらの素敵なページで動画再生中に発生しているメディアイベントをご確認ください。

・・・いかがでしょうか。そうなんです、動画再生中に常に発火しているイベントってtimeupdateしかないみたいなんですよね。

ちなみに、playは再生ボタンを押されたとき、playingは一時停止やロード待ちが解消されたときにイベント発生するようで、動画再生中、常にアクティブという訳ではありませんでした。

なので、一番簡単に手っ取り早くアクティブ状態であることを知るには、timeupdateを一定間隔でポーリングしイベントキャッチして送るのがいいかなぁと素人は思いました。

まとめ

というわけで、かなり強引な方法ではありますが、アクティブ視聴者数を取得できました。

クライアント側からサーバーに送られたイベントは、GASに掃き出してから、設定した間隔内の値を加算してグラフ描画し、そのURLを現場と共有していました。

他のサイトではどうやって確認しているんだろう・・どなたか教えてください。