[ 📌文法] [ 🎨命令一覧]

[編集モード] なでしこさんでＰＣやスマホのカメラを使いたい！

なでしこさんでＰＣやスマホのカメラを使うプラグイン。getUserMedia() を利用してＰＣやスマホのカメラにアクセスします。最初にユーザーにカメラ使用の許可を求めるダイアログが出ます。「撮影」という命令は作っていませんが、video要素の内容は、そのまま普通にキャンバスへ画像描画・画像部分描画できます。

/*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*
＃ なでしこさんでＰＣやスマホのカメラを使いたい！

※　取り込み文
！『https://n3s.nadesi.com/plain/camera.nako3』を取り込む。

作者:雪乃☆雫　／　ライセンス:CC0　／　制作時のナデシコバージョン: 3.7.3
*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*/

＃---変数-----
変数 カメラオプション＝{
        video: true,
        audio: false,
    }
# 使うカメラを指定する場合
//カメラオプション.video＝{facingMode: "user"}  # 前面カメラ
//カメラオプション.video＝{facingMode: { exact: "environment"}}  # リアカメラ（モバイルのみ）

＃-----関数---------------
# カメラの起動と終了
●(vに|vへ|vで)カメラ起動
    「メディアストリーム取得」を[カメラオプション]でAWAIT実行。
    v.srcObject＝それ。
    vのカメラ映像再生。
ここまで。

●(vの)カメラ終了
    vのストリーム停止。
    v.srcObject＝NULL。
ここまで。

# カメラ映像の再生・停止
●(vの)カメラ映像再生
    vの「play」を[空]でJSメソッド実行。
ここまで。

●(vの)カメラ映像一時停止
    vの「pause」を[空]でJSメソッド実行。
ここまで。

# カメラの設定取得
●(vから|vの)カメラ設定取得
    v.srcObjectの「getVideoTracks」を[空]でJSメソッド実行。
    それ[0]の「getSettings」を[空]でJSメソッド実行。
ここまで。

●(vの)ストリーム取得
    v.srcObjectを戻す。
ここまで。

# 起動と終了の下請け
●(optで)メディアストリーム取得
    ASYNC
    NAVIGATOR.mediaDevicesの「getUserMedia」を[opt]でJSメソッド実行。
ここまで。

●(vの)ストリーム停止
    v.srcObjectの「getTracks」を[空]でJSメソッド実行。
    それを反復:
        対象の「stop」を[空]でJSメソッド実行。
ここまで。

＃以下はサンプル
もし、プラグイン名＝「メイン」ならば、
    
＃--- カメラを起動 -----
# まずカメラを表示するビデオ要素を作成する。
ビデオ＝「video」のDOM部品作成。
変数 [ビデオ幅,ビデオ高さ]＝[0,0]

# 作成したビデオ要素にカメラを起動。
ビデオにカメラ起動。

# ビデオのサイズをカメラの解像度に合わせ、解像度を取得する（カメラ起動後に行う）
ビデオサイズ設定。

●ビデオサイズ設定
    ビデオのカメラ設定取得。
    ビデオ幅＝それ.width。ビデオ.width＝ビデオ幅。
    ビデオ高さ＝それ.height。ビデオ.height＝ビデオ高さ。
ここまで。

＃---UI作成-----
# ボタン
改行作成。
カメラボタン＝「カメラ終了」のボタン作成。
撮影ボタン＝「静止画撮影」のボタン作成。
改行作成。

# 撮影した静止画を表示するキャンバス
写真＝[ビデオ幅,ビデオ高さ]のキャンバス作成。
写真へ描画開始。

＃--- イベント -----
# カメラの起動と終了（トグルボタン）
カメラボタンをクリックした時には、
    もし、(ビデオのストリーム取得)＝NULLならば、
        ビデオにカメラ起動。
        カメラボタンに「カメラ終了」をテキスト設定。
    違えば、
        ビデオのカメラ終了。
        カメラボタンに「カメラ起動」をテキスト設定。
    ここまで。
ここまで。

# 静止画撮影
撮影ボタンをクリックした時には、
    # スマホの向きが変わっていた時のため
    写真の「幅」にビデオ幅をDOM属性設定。
    写真の「高さ」にビデオ高さをDOM属性設定。
    # video要素の内容をそのままキャンバスへ画像描画出来る。画像部分描画もできる。
    [0,0]にビデオを画像描画。
ここまで。

# スマホが回転した時はビデオのサイズを再設定する
WINDOWの「orientationchange」がDOMイベント発火した時には、
    ビデオサイズ設定。
ここまで。

ここまで。

デバッグ × キャンバス: 幅 × 高

🍯 なでしこ3貯蔵庫

[編集モード] なでしこさんでＰＣやスマホのカメラを使いたい！

素材のアップロード