MotoJapan's Tech-Memo

技術めも

camera

【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)の操作を進めていたが、カメラリソース周りを今回進める。 やり…