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

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 前回は、ボタンの透過度を設定した。 今回は、基礎的な話でなんとなく使っていたCSSの接頭句の違いを書く。 前々回のコードをコピーしたのが下記。"."で開始するstyleは、classに…

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 完成イメージ 実装 結果 前回は、レイアウトの重ね合わせを実装した。 今回は、ボタンの透過度を設定したい。 完成イメージ 前回からの続きだが、ボタンが透過して下レイヤーの映…

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

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

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

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

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