【OBSで使える！】背景を透過できるデジタル時計

ダウンロード内容物

・clock.html(本体)

・readme.txt(説明書)

----------------------------------------------------------

[追記]

readme.txt、# 使い方 でウィンドウキャプチャでのやり方を記述していますが、OBSのブラウザで表示する方がもっと手軽でブラウザも選ばないのでそちらのやり方を追記します。

1. OBSのソースで「ブラウザ」を新規作成

2. 「ローカルファイル」にチェックを入れる

3. 「ローカルファイル」欄の参照でダウンロードしたclock.htmlを指定する

4. デフォルトのカスタムCSSで背景が透過されるのでこれでOK！

----------------------------------------------------------

現在時刻表示プログラムについて

これはPCの現在時刻を取得してリアルタイムに表示するHTMLファイルです。

OBSでクロマキーをかけることで背景を透過でき、フォントや縁取り等をCSSで変更できます。

動作確認済み環境

OS: Windows 10

ブラウザ: Firefox (82.0.2)、Microsoft Edge(86.0.622.61)

※Google Chromeではブラウザ表示中に、ウィンドウが前面でなくなると表示処理が止まって時刻が更新されない現象を確認しています。

使い方

1. ブラウザ(Firefox)でclock.htmlを開く

2. OBSで「ウィンドウキャプチャ」を追加→「ウィンドウ」で時刻表示のウィンドウを選択

3. タブ等が見えないように表示領域をトリミング

4. ウィンドウキャプチャを右クリックして「フィルタ」→「エフェクトフィルタ」で「クロマキー」を追加

5. 「色キーの種類」: 「緑」、「類似性」は「200」あたりにすると縁取りが綺麗に表示されます。

フォント等の変更

clock.html内のソースコードのCSS(<style>タグ内)を変更することで表示を変えられます。

とりあえず以下を変更できます。

・全体の背景色

・フォントサイズ

・フォント

・文字色

・縁取り

著作権等について

・本プログラムの著作権は製作者である天傘ている(@AmagasaTale: Twitter)にあります。

・非商用または商用利用に当たってクレジット表記などは必要ありません。

・本プログラムの二次配布はおやめください。

免責事項

・製作者は、本ソフトウェアを使用したことに起因するあらゆる損害について一切の責任を負いません。

・製作者は、本利用規約を事前の告知なしに変更できます。

----------------------------------------------------------

上記は同梱のreadme.txtにも書いてあります。