video要素の映像にcanvasを使用してぼかしをかけたい(モザイク処理)

前提・実現したいこと

一つの動画にcanvas要素を被せてモザイクをかけれるようにしたいです。
stackblurというライブラリを使用してコードを書きました。
可能ならHLSの使用、ボタン要素を付けずにモザイクをかけれるようにしたいです。

現在の状況

動画の下に元動画と同じサイズのスタート画面、画像が出てきており元動画も下の画像ももモザイク処理はできていません。

該当のソースコード

＜ライブラリ読み込み＞
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stackblur-canvas/1.4.0/stackblur.min.js"></script>

＜Javascript部分＞
window.addEventListener('DOMContentLoaded',function(){
	var video = document.getElementById("video_sample");
＜動画モザイク機能＞
	function videoToCanvas(){
	　　var canvas = document.getElementById("canvas_sample");
	　　var cw = video.clientWidth;
	　　var ch = video.clientHeight;
	　　canvas.width = cw;
	　　canvas.height = ch;
	　　const blurLevel = 20;
	　　canvas.getContext("2d").drawImage(video, 0, 0, cw, ch);
	　　StackBlur.canvasRGB(canvas, 0, 0, cw, ch, blurLevel);
	　　requestAnimationFrame(videoToCanvas)
　　　　}
　　	videoToCanvas()

});

＜HTML部分＞		
<video width="100%" controls id="video_sample" >
	<source src = "動画url">
</video>

<div id="container_objLectureSWF" class="cntr_cntr_ff">

<canvas width="100%" controls id="canvas_sample"></canvas>
</div>

＜すべて書くと長くなってしまうので省略している個所があります＞