MotoJapan's Tech-Memo

技術めも

javascript

【Javascript】非同期実行を実装し、ボタンを押したフィードバックを全画面に行う 【お家IT#16】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 そもそもの問題 非同期にする方法 実装 前回までで、javascript/CSSを用いて撮影画面を作成した。 最後にUIの完成度を高めたいので撮影ボタンを押したらバックグラウンド全体が青…

【Javascript / CSS】divタグでcanvas等のレイアウトを重ねる方法 【お家IT#13】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 完成イメージ 基本方針 div要素で重ねわせ方法と実装 ポイント 実装 結果 前回は、カメラ撮影枠を作成するために、カメラリソースの切り替えによるVideo要素のサイズ変化を検出し…

【Javascript】カメラ起動前後のvideoタグのサイズ変化を検出する 【お家IT#12】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 具体例:Video要素のプレビューの中央に撮影領域を作りたい 実装:Video要素のサイズ変化を検出、確定時のサイズを取得 前回は、UserMediaのカメラリソースを切り替えるなどの話…

【Javascript】カメラ(インカメラ/アウトカメラ)を切り替える方法 【お家IT#11】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp 目次 参考資料 MediaDeviceInfoの解説とUserMediaの使い方手順 前回からWebカメラ周り(Video要素やwebRTC, UserMedia)の操作を進めていたが、カメラリソース周りを今回進める。 やり…

【Javascript】video/canvasを上下180度反転(回転)させる方法 【お家IT#10】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 Videoの回転 Canvasの回転 参考資料 前回までの投稿でバックエンドとフロントエンドの通信周りは整理した。 ここからはWebカメラの操作を進める。今回は、video/canvasを上下180…

【flask to Javascript】jsonデータを送信/受信する方法(jsonify) 【お家IT#9】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 送信側実装 (python:flask) 受信側実装 (javascript) 前回までで、javascript->flaskへbase64を送信した。 これを画像処理して、その結果を返信するときjsonだと汎用性も高い。 …

【Javascript to flask】base64で画像を送信/受信する方法 【お家IT#7】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 base64とは 送信側実装(Javascript) 受信側実装(python : flask) 参考資料 前々回、ChromeでWebカメラを起動/撮影した後、Canvasに書き出すところまで進めた。 前回は、Ajaxを利…

【Javascript to flask】FormDataを送信/受信する方法 【お家IT#6】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 送信側実装(Javascript) 受信側実装(python : flask) 対応関係 前回まででWebカメラで撮影した画像をCanvas領域にコピーするところまで終えた。 が、根本的にJavascript - python…

【Javascript】Webカメラを起動&撮影する 【お家IT#3】

本件の実装の一部 motojapan.hateblo.jp カメラ起動 参考にした記事① 参考にした記事② カメラ撮影 Webアプリ上でHTML+JSでWebカメラを動作させたい。 私の場合、それほど特殊なWebカメラの使い方をするわけでもないし、こういった類の記事は山のようにあるの…