关于glfx.js实时处理视频

使用glfx.js实时处理视频

glfx.js网址：https://evanw.github.io/glfx.js/docs/

这篇博客主要是针对刚刚接触 glfx.js 的老板,个人建议先看官方文档

一、先将glfx.js下载到本地，放入项目下

<script type="text/javascript" src="glfx.js"></script>

二、body中创建video标签、canvas标签

<video id="video1" autoplay src="video.mp4" width="800" height="600" controls></video>
<canvas id="myCanvas" width="800" height="600"></canvas>

三、js中代码

<script>
			var video = document.getElementById("video1");
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext('2d');
			//创建 WebGL 画布
			var canvas = fx.canvas()
			var texture= canvas.texture(c)
			function abc() {
				texture.loadContentsOf(video)
				//这是glfx.js中处理图像饱和度的方法
				let img = canvas.draw(texture).hueSaturation(0, -1).update()
				ctx.drawImage(img, 0, 0, 800, 600)
				
				window.requestAnimationFrame(abc)
			}
			video.addEventListener('play', function() {
				window.requestAnimationFrame(abc);
			}, false);
		</script>

end…

当然，这是glfx.js对视频的处理，想了解glfx.js对图片的处理的：
链接: https://blog.csdn.net/weixin_41196185/article/details/80735828