先週のエントリーのつづきです。
microserverにOBS Studioを入れて、しばらくYouTube Liveの終日運転をしてみました。
丸５日くらいずっと稼働させていますが、システムが不正終了したり、Windows Updateのよる自動再起動がかかったり、なぞの挙動をしたりということもなく、安定して配信システムが動作しています。
最初は音声だけ、おとといくらいから小さくウェブカメラのライブ画像を加えて表示させていますが、特に問題なさそう。
あとは動画のデコード／エンコードが絡むとちょっと重たくなってしまうところがあるので、グラボを挿せばなんとかなるのかな？っというところですね。
ハードウェアレベルでの変更は特にしていませんが、今回ははてなブログでライブ表示をするにあたり、いくらかソフトウェアレベルの修正をしました。
YouTubeチャンネル登録ボタンの設置
パソコン版では、画面右側に常にYouTube Live動画が表示されるようにしているのですが、はてなブログがデフォルトでサポートしているtwitterのフォローボタンに加えて、YouTubeのチャンネル登録ボタンも表示するようにしました。
チャンネル登録ボタンの作成は、下記のGoogleオフィシャルの埋め込みボタン作成ページから行います。
▼チャンネル登録ボタン作成ページ（Google）
▼チャンネルID確認ページ（YouTube）
１．チャンネルID確認ページにアクセスすると、自身のチャンネルIDを確認できるので、これをコピーします。
２．チャンネル登録ボタン作成ページにアクセスすると、以下の画面が表示されるので、「チャンネル名またはID」のところに、コピーしたチャンネルIDを貼り付けます。
３．画面下にコードが表示されるので、これをはてなブログのHTML編集や、デザイン設定画面から、ボタンを設置したい場所に貼り付けます。
以上で完了です。カンタンですね(´･ω･｀)
ブラウザごとに自動再生やミュートの設定をする
はてなブログって、HTML編集でのカスタマイズの自由度もけっこう高いんですね。
JavaScriptのWebStorageを使った、ブラウザごとの設定の記憶もできるし、チェックボックスボタンのようなフォームも設置できました。
Yahoo!ブログを使っていたころとは段違いのカスタマイズ性ですね。すごい(´･ω･｀)
くっそ昔、まだJavaScriptをいじっていたころに、WebStorageもさわっていたので、その時の知識を使いつつ、ブラウザごとに「デフォルトでミュート」と「自動再生」ができるような設定を追加しました。
使い方もクソもないので(´･ω･｀)
上のページを参考にしつつ、チェックボックスがクリックされたときに、チェックボックスの状態をWebStorageのキーに追加してあげます。
ページを表示したときには、キーを参照して設定値をフォームとYouTubeプレイヤーに反映させます。
iframeだとちょとめんどくなるかもしれませんが、私の場合は前回の記事にもあるように、ミュート設定のためにYouTubeがサポートしているJavaScriptのiframe APIを使って埋め込んだので、キーの設定値をみて自動再生やミュートの実行を条件式(if)で制御します。
重要なのは、デフォルトだとキーが存在しないということですね。
また、実装次第では設定値をいじるまでWebStorageにキー／値は書き込まれません。
デフォルトでミュート、かつ自動再生がサポートされる実装になるように、キーが存在しない、undefinedの場合の条件を見落とさないようにします。
それと、もしかしたらWebStorageを別の用途にも使うかもしれないので、キー名もちょっと考えて設定した方がいいかもしれませんね。
WebStorageは、ブラウザごとにローカルに記憶されるデータのため、別のブラウザや端末からアクセスしたり、あるいはシークレットタブを使ったりすると、WebStorageの内容は当然反映されません。
開発中は、WebStorageにキーがある状態で何かと作業しがちですが、リリース時には他のブラウザからアクセスしてみて、最初にブログを訪れた人と同じ目線で表示がどうなるかを確認してあげる必要があります。
デフォルトで音が出るようにすると、かつてよくあった、ウェブページにアクセスすると突然MIDI BGMが流れるくそ寒いサイト（ぉぃ と変わらないので、ちょっと配慮してみてもいいかもしれません。
まぁ、そのためにJavaScriptのiframe APIを使っているわけですが。（URLのクエリーではミュートの指定ができないので。）
ボタンと設定値の対応付け、デフォルトの表示状態のチェックが終わったらOKです。
これで、ブラウザを閉じたり、PCを再起動したりしても、最後に設定した設定値は記憶されているので、ユーザー好みの設定で、次回アクセス時にページを表示することができます。
YouTube Live URLを固定する
YouTube Liveは、配信ごとにvideoidが変わります。
たとえばサーバーの再起動などで配信が途切れてしまったときに、新しい配信のURLと、その前の配信のURLとが別物になってしまうため、今現在のURLをそのまま貼り付けてしまうと、今のライブ配信が表示されない状態になってしまいます。
１つのチャンネルごとに、ライブ配信できるURLを１つだけ持っているので、一番新しいライブ配信が必ず表示されるURLをページに設定してあげる必要があります。
普通にGoogleで検索すると、いくつかヒットします。
基本的には、上記などで紹介されているやり方で大丈夫です。
ただ・・・
JavaScript のiframe APIを使っている場合、カンタンにはいきません(´･ω･｀)
先ほど取り上げた「デフォルトでミュート」を実装しつつ、ライブURLを固定するためには、くっそめんどい回り道をする必要があるのです。
私が知らないだけかもしれませんが(´･ω･｀)
<iframe>タグを使って埋め込む場合は、上のページの方法でOKです。
ただ、iframe APIを使って、YT.Player()から表示する場合、URLを直接参照できず、video idを使った動画URLの参照しかできないため、上のページの方法は使えません。
iframeでプレイヤーの状態をミュートにすることができればOKなんですが、埋め込まれたオブジェクトの参照方法やイベントトリガーの設定方法もわかりません(´･ω･｀)
詰んだ(´･ω･｀)
正規の方法では無理っぽいので、ここは荒技で乗り切ります(´･ω･｀)
えぇ、はてなブログが実に自由度の高いJavaScriptのサポートをしてくれていることもあって、まぁなんとか回り道はできそうです。
それで考えたのが、以下の構成です。
せっかくロリポップでサーバーを借りているので、これを使います。
microserverからライブ配信を行い、同時に定期的に「何らかの方法」で最新のライブ配信のvideoidを取得します。
取得したvideoidを、ロリポップのサーバーにFTPでアップロードします。
任意のテキストファイルに、常に最新のvideoidが書き込まれるので、このテキストファイルを参照することで、クライアント側は最新のvideoidからライブ配信にアクセスできるようにします。
テキストファイルの参照は、JavaScriptのXMLHttpRequestを使います。
ただし、気を付けたいのは、これを使った参照は、別ドメインには基本的に通用しないということです。
どこでもかしこもこの関数を使ってデータを受信することはできません。
ロリポップのウェブサーバーは「.htaccess」に以下のコードを追加することで（またはからっぽの.htaccessファイルを追加して、以下のコードを追加することで）、別ドメインからのデータ参照を許可することができます。
Header set Access-Control-Allow-Origin *
「*」の部分は、はてなブログのドメイン（独自ドメイン）を指定することで、そのドメインからのみアクセスを許可することができるみたいです。「*」にすると、ドメイン関係なく、ファイルにアクセスできるようになります。
はてなブログで使っているドメインに、任意のサブドメインを掘って、テキストファイル置き場の確保と、.htaccessファイルの追加・編集を行います。
これで、XMLHttpRequestを使ってテキストファイルの中身を参照できるので、テキストファイルに書かれているvideoidを使って、iframeのYT.Playerにvideoidを渡して、最新のライブ配信URLを表示できるようにします。
もちろん、自動再生は当然、デフォルトでミュートもサポートしています。
あとは定期的に「何らかの方法」で最新のライブ配信のvideoidを取得するところですが・・・
とりあえず、YouTube Data API v3を使って、C#でURL更新ツールを作ります。
YouTube Data API v3の使い方、始め方は、上の公式ページに書かれています。
で、どうにかすれば最新のライブ配信URLを取得できるかもしれないし、取得できないかもしれない（ぇ
えっと・・・まだ実装の確認中です(´･ω･｀)
どうやればええんやろ。。。
この辺は、次回に持ち越しです(´･ω･｀)
とりあえず、少なくともロリポップのウェブサーバーに置いてあるテキストファイル越しに、最新のライブ配信URLを参照できる環境は整えてあり、現在右側にあるプレイヤーはそうした実装の中でライブ映像を表示しています。
ブラウザごとのデフォルトでミュート・自動再生の設定も生きています。
チャンネル登録ボタンも配置しました。
そんなところです(´･ω･｀)
次回は、video idの取得・・・だけだと、完全に見えないところでおもんないので、microserverにグラボをのっけて、動画配信確認を始めるところまでやってみます。
おわり。
中途半端でごめんね(´･ω･｀)
