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でワイプを出した図

Laravelの .env の値はconfig()経由で使う。

結論から言うと…

  • env()は コントローラー, モデル, etc.. 内で直接使わない。
  • config/*.phpenv()の値を入れてconfig()から参照する。

<?php
// config/my-app.php

return [
    // configに.envの内容を入れる。
    'my-env' => env('MY_ENV'),
];
<?php
// コントローラー内など

// config() を使用。
$my_env = config('my-app.my-env');

// これはダメなパターン。
$my_env = env('MY_ENV');

何故 env() を使ってはいけないのか

本番環境でconfig:cacheコマンドを実行した際、.envファイルを読み込まないから。コレに尽きます。

.envファイルはIlluminate\Foundation\Bootstrap\LoadEnvironmentVariablesクラスのbootstrap()で読み込まれるのですが、読み込む前にconfigのキャッシュの有無を確認し、キャッシュがあった場合は.envファイルを読み込まない仕様になっています。

当該部分のLaravelのコードを引用。

<?php
// 省略

    public function bootstrap(Application $app)
    {
        if ($app->configurationIsCached()) {
            return;
        }
        $this->checkForSpecificEnvironmentFile($app);
        try {
            (new Dotenv($app->environmentPath(), $app->environmentFile()))->load();
        } catch (InvalidPathException $e) {
            //
        } catch (InvalidFileException $e) {
            die('The environment file is invalid: '.$e->getMessage());
        }
    }

// 省略

github.com

大体の場合の本番環境では、高速化の為に設定を一纏めにするconfig:cacheコマンドを実行すると思うのですが、前述の通りキャッシュがあると.envが読み込まれないので、env()を直接叩いてると開発時やテスト時には動くけど本番環境で死ぬ。といった事になります。(実際なった)

実際に試す

適当なコントローラーを用意してddを使って値をダンプするだけ。

<?php
class HogeController extends Controller
{
    public function getHoge()
    {
        dd(
            env('MY_ENV'),
            config('my-app.my-env')
        );
    }
}

まずはキャッシュ無しでアクセス。

"Foo"

"Foo"

テスト環境や開発環境と同じ様にキャッシュを作成していないのでどちらも同じ値が取得できます。

次にキャッシュさせてアクセス。artisanconfig:cacheを実行してbootstrap/cache/config.phpを作成します。

php artisan config:cache

で、先ほどと同じ様にアクセスしてみる。

null

"Foo"

.envファイルが読み出されていないのでenv()で取得した所で値が入ってる訳もなくnullを返します。


と言う訳で最初に書いた通り、env()は直接使わずにconfig().envの値を入れて使いましょう

© 2015-2018 Hiroto-K