Hiroto's diary

プログラミング関連とイベントの感想を書くかもしれない

JavaScriptの MediaDevices を使ってブラウザ上にカメラの映像をワイプ風に出す。

JavaScriptの試験的な機能の一つにMediaDevicesというのがあり、MediaDevicesを使うとカメラの映像なんかをJavaScriptで取得出来る。

developer.mozilla.org

MediaDevicesを使ってブラウザ上にカメラ映像をワイプ風に出して、テレビ番組みたいにしたら面白いかもと思い、実際にやってみた。

以下のコードをコンソールに貼り付けると左上にカメラ映像が出てくる。注意点としては実験的な機能なので対応していないブラウザがある事。FirefoxGoogle Chromeなどといった主要ブラウザの最新版なら大体動くはず。

圧縮版



YouTubeの動画の上にワイプを出してみる。動画はこれ。

www.youtube.com


FirefoxYouTubeを開き、ワイプを出してみた図。(左上が自分。)

YouTubeでワイプを出した図

…なるほど。

ちょっとだけ面白いかもしれないけど、動画を見てる時に自分が左上に映るのは普通に鬱陶しい。


フルスクリーンにしてもワイプは出てくるので、普通に使える。(何に?)

YouTubeでワイプを出した図


別にワイプじゃなくても、記念撮影なんかにも使える。


推しの安齋由香里さんからツイートをふぁぼされたので記念撮影をした。

他に記念撮影をする方法だとPCの画面と自撮りだったり、別で撮った写真の合成なんかが考えられるけど、この方法だと自分が画面に入り込んで撮影できる。

f:id:Hiroto-K:20181231192809p:plain



もうちょっとだけ考えてみたら、Electron製のアプリのコンソールにコードを打ち込めばワイプを出せるという気づきを得た。

自分が普段使ってるエディタの一つのVisual Studio CodeはElectron製なので、簡単にワイプを出せる。

Visual Studio Codeでワイプを出した図

CSSを少し変えてカメラの場所を動かし、gitのコンソールと撮影。バージョンアップ等でgit commitをする際に、コードやコミットメッセージと一緒に記念撮影が出来て便利かもしれない。

Visual Studio Codeでワイプを出した図

© 2015-2018 Hiroto-K