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

なでしこさんでＰＣやスマホのカメラを使うプラグイン。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イベント発火した時には、 ビデオサイズ設定。 ここまで。 ここまで。