はじめに

ライブ配信イベントで視聴者との一体感を高めたいと考え、オリジナルのリアクション機能を追加しました。視聴者の反応を可視化することで、より盛り上がるライブ配信を目指します。

実現イメージ

システム構成

視聴者がWEBアプリ①でリアクションボタンをタップすると、サーバーへデータが送信されます。サーバーはタップ数を集計し、WEBアプリ②へリアルタイムにデータを送信します。
OBS StudioはWEBアプリ②の画面を取り込み、ライブ映像に合成してYouTube Liveへ配信します。

OBS StudioとYouTube Liveの設定

OBS StudioとYouTube Liveの設定はこちらを参照ください。

WEBアプリ①

YouTubeからiframeのタグを取得し、コードに埋め込みます。
横幅いっぱいのレスポンシブ表示するためにiframeタグからwidthとheightを削除し、cssで設定しています。
リアクションボタンタップ時の処理は適時実装してください。

index.html

<!DOCTYPE html>
<style>
  .youtube-ratio iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  }
</style>
<html lang="jp">
  <head>
    <meta charset="UTF-8" />
    <title>WEBアプリ①</title>
  </head>
  <body>
    <div class="youtube-ratio">
      <iframe src="https://www.youtube.com/XXXXXX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    </div>
    <br>
    <img id="heart" width="200" src="./heart.png">
    <script>
      /*①クリック時に実行する関数*/
      function clickListener (e) {
        /*ここにサーバーへの通知処理を追記 */
      }
      /*②IMG要素を全てセレクト*/
      document.querySelectorAll("img").forEach((imgElm) => {
        /*③要素のクリックイベントにイベントリスナーを紐づける*/
        imgElm.addEventListener('click', clickListener);
      })
    </script>
  </body>
</html>

WEBアプリ②

1秒周期でサーバーから取得したタップ数をpタグに表示させます。
ライブ画像と重ねたときに見やすいようにcssで文字に白枠を付けています。

heart_num.html

<!DOCTYPE html>
<html lang="jp">
  <style type="text/css">
    p {
      margin-top: 0px;
      color          : #ffffff;            /* 文字の色 */
      font-size      : 10pt;               /* 文字のサイズ */
      letter-spacing : 4px;                /* 文字間 */
      text-shadow    : 
           2px  2px 1px #003366,
          -2px  2px 1px #003366,
           2px -2px 1px #003366,
          -2px -2px 1px #003366,
           2px  0px 1px #003366,
           0px  2px 1px #003366,
          -2px  0px 1px #003366,
           0px -2px 1px #003366;        /* 文字の影 */
    }
  </style>
  <head>
    <meta charset="UTF-8" />
    <title>WEBアプリ②</title>
  </head>
  <body>
    <img width="50" src="./heart.png">
    <p id="count">0</p>
    <script>
      var counter = 0;
      var elem = document.getElementById("count");
      const intervalId = setInterval(function() {
        /*ここにサーバーからタップ数を取得しcounterへセットする処理を追記 */
        elem.innerHTML = counter;
      }, 1000);
    </script>
  </body>
</html>

OBS StudioにWEBアプリ②を追加

ソースにブラウザを追加し、下記を設定します
・WEBアプリ②のURL
・幅、高さ
・表示座標

ブラウザソースの幅と高さは、WEBアプリ②の表示領域に合わせて設定してください。表示座標は、ライブ映像上でタップ数を表示したい位置に設定してください。

実行結果

視聴者がリアクションボタンをタップすると、リアルタイムにタップ数が増加し、ライブ映像に合成されています。これにより、視聴者の反応を可視化し、ライブ配信の盛り上がりを演出することができました。

今後の課題としては、リアクションボタンの種類を増やしたり、アニメーションを追加したりすることで、さらに視聴者を楽しませることができると考えています。

最後に

今回の記事では、YouTube LiveとOBS Studioを組み合わせ、オリジナルのリアクション機能をライブ映像にリアルタイム合成するシステム構築について解説しました。このシステムを活用することで、視聴者とのインタラクティブなライブ配信を実現し、より一体感のある体験を提供できるでしょう。

今回紹介した方法はあくまで一例であり、サーバーサイドの実装やリアクションボタンのデザインなど、様々なカスタマイズが可能です。読者の皆様も、ぜひこの記事を参考に、独自のアイデアを加えて、オリジナリティ溢れるライブ配信に挑戦してみてください。

ライブ配信は、視聴者とのコミュニケーションを深め、熱狂的なコミュニティを形成するための強力なツールです。この技術が、あなたのライブ配信をさらに盛り上げる一助となれば幸いです。