canvas+videoタグで視線情報を可視化

動画を見たときの視線情報をブラウザで可視化したい機会があったので、HTMLのcanvasで可視化しました。
下記のURLでデモが見れます。
https://jsfiddle.net/nakao324/r4epjdmo/16/

視線情報以外にも、動画の上に図形を描画したいときに利用できます。

実装

・HTML

<div class="wrapper">
  <video id="video" src="test.mp4" disablepictureinpicture controls controlslist="nodownload nofullscreen" playsinline></video>
  <canvas id="canvas" class="canvas"></canvas>
</div>

・CSS

.canvas{
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.wrapper{
  position: relative;
}

構造としては、まずはvideoタグで普通に動画を表示します。
そのvideoタグの上にcanvasを作り、canvasに視線情報を描画します。
videoタグとcanvasの位置と大きさがぴったり一致するようにCSSとJavascriptで調整します。
位置に関しては、CSSのpositionsを使って揃えます。

・Javascript

const ctx = document.getElementById("canvas").getContext("2d")
const videoEl = document.getElementById("video")
//1秒毎の視線情報
const trackings = {1: [100,-80],2: [130,20],3: [130,50],4: [-100,30],5: [100,30],6: [-30,-10],
7: [-50,30],8: [100,30],9: [10,35],10: [40,60],11: [150,50],12: [120,70],13: [130,60]}

今回、視線情報のデータ構造は、{時間:[x座標, y座標], ...}としています。
中央の座標は(0,0)、一番右下は(180,90)、x座標は-180~180、 y座標は-90~90としています。

videoEl.addEventListener("timeupdate", function() { 
  const currentTime = Math.round(videoEl.currentTime)   //現在の再生時間
  //ビデオタグの縦横幅を取得し、canvasに代入
  let w = videoEl.clientWidth; 
  let h = videoEl.clientHeight; 
  $('#canvas').attr('width', w)
  $('#canvas').attr('height', h)
  
  //視線の所に赤い丸を描画
  ctx.beginPath()
  ctx.clearRect(0, 0, w, h) 
  if(trackings[currentTime] != null){
  	ctx.arc(trackings[currentTime][0]*w/360 + w/2, trackings[currentTime][1]*h/180 + h/2,  20, 0, Math.PI * 2)
    ctx.strokeStyle = "red"
    ctx.lineWidth = 2
    ctx.stroke()
  }
}, true)

1行目のtimeupdateで、動画の再生時間が変わる毎に処理が実行されます。
4~7行目で、videoタグの縦横の長さを取得しcanvasに渡します。
この処理を入れないと、動画再生中に画面幅が変わった時にcanvasの描画がずれてしまいます。
最後に、現在の再生時間の座標が存在するときに図形を描画します。

[追記]
heatmap.jsを使うと、多人数の視線情報でも見栄え良く描画できます。