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

なでしこさんでＰＣやスマホのカメラを使うサンプル。getUserMedia() を利用してＰＣやスマホのカメラにアクセスします。最初にユーザーにカメラ使用の許可を求めるダイアログが出ます。

プログラム: (→大)
＃ なでしこさんでＰＣやスマホのカメラを使いたい！ ＃---変数----- 変数 カメラオプション＝{ video: true, audio: false, } # 使うカメラを指定する場合 //カメラオプション.video＝{facingMode: "user"} # 前面カメラ //カメラオプション.video＝{facingMode: { exact: "environment"}} # リアカメラ（モバイルのみ） 変数 [ビデオ幅,ビデオ高さ]＝[0,0]。 ＃--- カメラを起動 ----- # カメラを表示するビデオ要素 ビデオ＝「video」のDOM部品作成。 # カメラを起動 ビデオにカメラ起動。 # ビデオのサイズをカメラの解像度に合わせる ビデオサイズ設定。 ●ビデオサイズ設定 # カメラの解像度取得 ビデオのカメラ設定取得。 ビデオ幅＝それ.width。 ビデオ高さ＝それ.height。 # サイズを設定 ビデオの「幅」にビデオ幅をDOM属性設定。 ビデオの「高さ」にビデオ高さをDOM属性設定。 ここまで。 ＃---UI作成----- # ボタン 改行作成。 カメラボタン＝「カメラ終了」のボタン作成。 撮影ボタン＝「静止画撮影」のボタン作成。 改行作成。 # 撮影した静止画を表示するキャンバス 写真＝[ビデオ幅,ビデオ高さ]のキャンバス作成。 写真へ描画開始。 ＃--- イベント ----- # カメラの起動と終了（トグルボタン） カメラボタンをクリックした時には、 もし、(ビデオのストリーム取得)＝NULLならば、 ビデオにカメラ起動。 カメラボタンに「カメラ終了」をテキスト設定。 違えば、 ビデオのカメラ終了。 カメラボタンに「カメラ起動」をテキスト設定。 ここまで。 ここまで。 # 静止画撮影 撮影ボタンをクリックした時には、 # スマホの向きが変わっていた時のため 写真の「幅」にビデオ幅をDOM属性設定。 写真の「高さ」にビデオ高さをDOM属性設定。 # video要素の内容をそのままキャンバスへ画像描画出来る。画像部分描画もできる。 [0,0]にビデオを画像描画。 ここまで。 # スマホが回転した時はビデオのサイズを再設定する WINDOWの「orientationchange」がDOMイベント発火した時には、 ビデオサイズ設定。 ここまで。 ＃-----関数--------------- # カメラの起動と終了 ●(vに|vへ|vで)カメラ起動 「メディアストリーム取得」を[カメラオプション]でAWAIT実行。 v.srcObject＝それ。 vのカメラ映像再生。 ここまで。 ●(vの)カメラ終了 vのストリーム停止。 v.srcObject＝NULL。 ここまで。 # カメラ映像の再生・停止 ●(vの)カメラ映像再生 vの「play」を[空]でJSメソッド実行。 ここまで。 ●(vの)カメラ映像一時停止 vの「pause」を[空]でJSメソッド実行。 ここまで。 # カメラの設定取得 ●(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メソッド実行。 ここまで。