CSSで動画合成 mix-blend-mode

CSSで動画を合成できました。

カメラ映像とスクリーン映像のブレンドが、簡単にできることに驚きです。

CSS「mix-blend-mode」を使う

PhotoShopで使われる乗算やスクリーンなどのレイヤーブレンド効果を、CSSで実現することができます。

CSSの「mix-blend-mode」で、指定の画像にブレンド効果を適用できます。

ただ、IE、Edgeが未対応(2019年9月現在)のため、Webページに投入するのは難しいです。

現状ではユーザーが限定されるWebアプリなどで、使用場面があるかもしれません。

mix-blend-modeはVideo要素にも使える

Chromeだけで良いので、Webカメラの映像と動画素材を合成したい。そんな場面がありました。

試しにVideo要素にmix-blend-modeをかけてみたら、あっさりブレンドを実現できるではありませんか!

↓Webカメラの映像

↓合成したいスクリーン映像’(動画素材はこちらから拝借)

この2つをブレンドすると・・・

合成、ブレンドがブラウザで出来ちゃいます!

今回のコード

画面いっぱいのVideo要素を2つ重ねて、前面に「mix-blend-mode: screen;」をかけています。

黒背景の素材を合成するときは「screen」を指定すると良いでしょう。

mix-blend-mode合成動画の使いどころ

私はWebでARコンテンツを作るときに使いましたが、他にもWebRTCと組み合わせ、動画チャットをリアルタイムで映像素材と合成して配信しする・・・など、使えるかもしれません。

使う場面は限定的だと思いますが、不意に役立ちそうな技術です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)