Matt首先介绍了关于Canvas的简单视频操作。提取视频元素和Canvas,在Canvas中创建环境,然后启动请求动画框架,画出之前设置的视频元素(把X、Y设置为0,然后将环境的高度和宽度设为和视频相同)。这样的结果是播放一个和原视频相同的视频。
接着Matt介绍了如何从视频元素中复制视频帧到Canvas元素,并把视频稍加变形。这需要对图像数据进行一些操作,首先把视频放在画布的背景上,再从图像中得到图像数据,一个RGB数组。这里的操作是对RGB三个值进行平均。我们渲染被更改后的图像数据,再次播放视频,得到黑白视频。
Matt分析了其在实际项目中的应用。例如做大数据相关的动画,需要使用Javascript渲染动画,但是动画颜色和背景颜色不太匹配。一个解决方案是把视频图像放到背景中,从视频边缘选取一个像素点,得到返回的RGB值,将主题风格设置为背景颜色。这样得到和背景颜色完全匹配的动画。
Matt最后举的一个例子是机器学习问题。在环境中画出视频图像,并取出图像数据。将数据返回Tensorflow模型中,得到模型预测结果。我们取出视频每一帧传递给Tensorflow模型,进行目标检测,并返回轮廓函数(每个预测包括一个X、Y值和高度宽度)。通过在屏幕中画出目标检测的矩形,说明预测模型的结果。该模型在每一帧进行对象检测,但不是实时的,因此在播放中不太流畅。
QA环节的问题:
1、在不同浏览器上的表现如何;
2、canvas如何处理音频。相关回答可以参考演讲视频。
文章评论