PixiJSで加工する！リアルタイム・クリエイティブカメラ - ICS MEDIA
スマートフォンの普及によって、カメラやマイク、位置情報などを用いたコンテンツに誰もがアクセスできるようになりました。さらに近頃では、ビデオ会議が盛んに行われるようになったり、カメラと同期して動くバーチャルアバターで遊ぶ人も増え、デバイスを介した面白いコンテンツがどんどん増えています。 フロントエンドの開発者としても、時流に乗っておもしろコンテンツを作りたい、そんな思いでいっぱいです。そこで、今回の記事ではカメラを用いたウェブコンテンツを作成してみます。今回作成するのは、次のようなブラウザで動くクリエイティブカメラです。 サンプルを別ウインドウで開く コードを確認する 本記事を読むことで、以下の知識が身につきます。 ブラウザからウェブカメラにアクセスする方法 デバイスから取得したデータをブラウザに表示する方法 映像とCanvasを組み合わせたクリエイティブ表現の作り方 ブラウザはもはや、ブラ
PixiJS v4が出ていたのでFilterを触っていきます | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、づやです。 気づいたら、PixiJS が v4 になってました。WebGL Filter なるものが追加されていたので、触ってみました。 インストールから v4 自体が初めてなので、インストールからお作法に則って使ってみたいと思います。 インストールは npm 推奨なので、npm から。 npm install pixi.js ※「 npm って何？」って人は、こちらを先に読まれた方がよいかと思います。 npm の基本操作と解説 ※この記事に出てくるコードを、いろんなブラウザで動かすには Babel が必要になります。 「Babelとは一体……」という方は、こちらを見ていただければ。 BlurFilter まず、BlurFilter から使ってみます。 その名のとおり、ブラーがかけれるんだと思います。 今回はこの画像を使います。 最初なので、お作法に則りつつ書いていきます。 /
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
