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

本件の実装の一部  
motojapan.hateblo.jp

前回の続き  
motojapan.hateblo.jp

目次

前回は、UserMediaのカメラリソースを切り替えるなどの話をした。
今回は、カメラリソースの切り替えによるVideo要素のサイズ変化を検出したい。
例えばインカムからアウトカムに切り替えるとき、解像度が異なると、Video要素のサイズが変わる。

もう少しわかりやすく具体例を出して説明する。

具体例：Video要素のプレビューの中央に撮影領域を作りたい

例えば、下図のようにVideo要素のプレビューの中央に撮影領域を作りたい。(赤い枠線部分)

これを作る場合、少なくともVideo要素のサイズ変化を検出してレイアウト確定時のサイズを求める必要がある。

実装：Video要素のサイズ変化を検出、確定時のサイズを取得

実は知っていればめちゃくちゃ簡単

//**************** html **********************

<video id="camera" width="720px" autoplay></video>

//************ javascript ********************

//動的に取得する関数
<script type="text/javascript">
function notify_change_size() {
    var video = document.getElementById('camera');
    video_layout_width  = video.clientWidth
    video_layout_height = video.clientHeight
}

var videoElement = document.querySelector('video#camera');
//onresizeメッセージのコールバック関数を設定する
videoElement.onresize = notify_change_size;
</script>

以上。
次回はこの具体例を少し掘り下げてどうやってVideo要素でのプレビュー上に撮影領域を作るか考える。