Zenn
🐙

OBS Studio のオーバレイを Web アプリで簡単に作って、ブロックチェーンからの情報をリアルタイムで表示する方法

2022/05/11に公開
Vue.js
Solidity
tech

はじめに

こんにちは、Anman です。Scalably 株式会社、 JPYC 株式会社、Everscale Japan 共催の日本円ハッカソンをきっかけに Solidity 等のブロックチェーン関連技術に触れ、@Yuuuu_ くんと一緒に JPYC を使ったライブ配信連動型投げ銭サービス「推しサポ」を開発しました。
光栄にも賞をいただけましたので、「推しサポ」の技術的な部分に関する記事を Zenn にまとめています。
前回の記事はこちら
ソースコードはこちら

今回は「推しサポ」の OBS Studio での配信者チャット画面に関して解説していきたいと思います。

OBS Studio とは

映像のストリーミング配信や、録画が可能な OSS で、主に YouTube や Twitch の配信者が映像をミキシングするために使用しているソフトウェアです。
今回は、OBS Studio の Browser Source という機能を用いて、以下のようなページの背景を透過にし、チャット部分のみをオーバレイとして配信者の映像の上に重ねています。

配信者ページ

配信者用 Web アプリ

配信者自身の Wallet アドレスを入力すると、「推しサポ」のプールへのメッセージ付き投げ銭の内容がリアルタイムで表示される Web アプリになっています。
仕組み自体はシンプルで、以下の Javascript にある通り、投げ銭の MoneySent が emit した際に、そのデータを data 引数に push しています。
data は Vue.js にて更新が監視されており、data が push された場合には、チャットの要素が追加されるように構成しています。

getContractEvent.js
const throwMoneyFactoryAddress = "0x6d837f431d7592F36e4b3146256eB301D017af4a"

let throwMoneyFactoryContract
let signerPool
let PoolContract
let filter
let chatCounter = 0
let chatData

let streamerAddress
let _amountEther

async function getContractEvent (_streamerAddress, _data) {
    // チェーン参照のために、デフォルトの Provider を使用
    provider = await ethers.getDefaultProvider("rinkeby", {etherscan: "<etherscan の API キー>"})

    // プール作成用スマートコントラストのインターフェースを取得
    throwMoneyFactoryContract = await new ethers.Contract(throwMoneyFactoryAddress, abi_ThrowMoneyFactory, provider)
    signerPool = await throwMoneyFactoryContract.getPool(_streamerAddress)

    // プールのスマートコントラストのインターフェースを取得
    PoolContract = await new ethers.Contract(signerPool, abi_ThrowMoneyPool, provider)
    filter = PoolContract.filters.MoneySent(null, signerPool, null, null, null)

    // MoneySent のイベントリスナーを作成
    PoolContract.on(filter, (_senderAddr, _reciveAddr, _message, _alias, _amount) => {
      chatCounter++
      _amountEther = Math.round(ethers.utils.formatEther(_amount))

      chatData = {
        Id: chatCounter,
        alias: _alias,
        amount: _amountEther,
        message: _message,
        effect: null,
      }

      _data.value.push(chatData)
    })
}

また、画面右上の QR コードをスマートフォンで読み込むことによって、MetaMask Mobile で投げ銭用の Web アプリ (Chrome Extension と同じ画面) を開き、そこからも投げ銭が可能です。
この際、自動的に送り先の Wallet アドレスが自動的に入力されるプチ便利仕様です！

Mobile 投げ銭ページ

簡単ですが今回の解説以上となります！！
現在「推しサポ」は Rinkeby ネットワークにデプロイしていますが、ちょっとした変更を加えることで、 Matic ネットワークへもデプロイが可能であると考えています。
今後も少しずつアップデートをかけて、JPYC を広く使っていただけるように改良をしていければと思います。(もちろん Pull Request 等していただけると幸いです)
最後までご覧いただきありがとうございました。

Discussion