OBSとCodepenであなたのビデオ呼び出しのために仮想クレジットシーケンスを作ること

私は、スコットHanselmanが会議の終わりにクレジットを加えることについて先日このツイートを作るのを見ました:



スコット・ハンスマン

私のチーム会議はいつもぎこちない終わります、そして、去るとき、それは明確でありません.それで、私はライブエンドクレジットを作りました.(事後残高)
午後18時41分- 2021年2月03日
私はこのアイデアが大好きで、自分で作ることにしました!

暗号

最初に、私はCodepenに行って、スクロールするテキストの配列を投げました.私は、私がNetlifyブログに書いたa list of blog postsを使いました.

let posts = [
  "An Incredibly Serious Discussion about Next.js at Reactathon",
  "Enabling AMP in your Next.js projects",
  "Adding Babel presets and plugins in Next.js",
  "React Children: The misunderstood prop",
  "Query an API at both build time and runtime with Next.js",
  "How to turn off telemetry in Next.js",
  "Add Web Monetization to your sites with Snippet Injection",
  "Logging in Next.js",
  ...
]

そこから、私は<div>にこれらの各々を加えるために小さな機能を作りました.

(() => {
  posts.map((p) => {
    document.querySelector('.container').innerHTML += `<div>${p}</div>`
  })
})()

CSSではバックグラウンドcontainerを作り、スクロールしてアニメーションをしました.私もカスタムフォントともの、あなたがちょうどあなたの心の願望にすることができるこの部分を加えました.
ここで試してみる最後のペンです.
あなたがそれをカスタマイズしたいならば、これをフォークに自由にしてください!

obs

OBS (Open Broadcaster Software)は、我々が「仮想カメラ」を作るために使うことができるオペレーティングシステムの向こう側に働く無料プログラムです.
OBSをダウンロードし、新しいシーンを作る.アプリの右下にあるシーンパネルがあります.

左下隅にあるlimegreenのサインをクリックしてください.ご覧の通り、私は「シーン」と名付けました.
場面の隣のパネルでは、源パネルがあります.我々は、再び+サインをクリックすることによって、我々の場面に2つの源を加えるつもりです.
まず、ビデオキャプチャデバイスを追加し、あなたのウェブカメラを選択します.

次に、ブラウザを追加し、CodepenのURLに入れます.私は個人的にライブビューで私のペンを使用しますが、また、フルページビューを使用することができます.

おそらくあなたの緑の背景があります.それを取り除きましょう!ソースパネルで、ブラウザを右クリックし、「フィルタ」をクリックします.
効果フィルターの下で、+をクリックし、カラーキーフィルタを追加します.キーカラーを緑色にして、グリーンのすべてがプレビューであなたのペンで透明になるまで、レベルを調節してください

閉じるこの動画はお気に入りから削除されています.
あなたがそれを満足しているまでOBSのメインプレビューウィンドウの内側には、カメラやテキストをドラッグすることができます.例えば、私はブラウザ自体をプレビュー自体より少し広くしました.その結果、スクロールバーはフレームに現れませんでした.

そして、あなたは完了です!をクリックして“スタート仮想カメラ”右下のように、他のアプリケーションで使用することができます:

それを使用！

今、ズームでは、Googleの出会い、会議、LiveStreaming、または何か他の場合は、通常のウェブカメラの代わりに作ったこの仮想カメラを選択することができます!

あなただけでなく、クレジットのシーケンスよりも行うことができます.あなたは、図、楽しいポップアップ、アニメーション、およびMooooreを追加することができます.行くと作成!