HTML5视频和Canvas

本文是来自SFVideo Technology 2019年7月的演讲，演讲者是Matt McClure，演讲题目是"HavingFun with HTML5 Video and Canvas"，关于HTML5视频和Canvas的使用。

Matt首先介绍了关于Canvas的简单视频操作。提取视频元素和Canvas，在Canvas中创建环境，然后启动请求动画框架，画出之前设置的视频元素（把X、Y设置为0，然后将环境的高度和宽度设为和视频相同）。这样的结果是播放一个和原视频相同的视频。

接着Matt介绍了如何从视频元素中复制视频帧到Canvas元素，并把视频稍加变形。这需要对图像数据进行一些操作，首先把视频放在画布的背景上，再从图像中得到图像数据，一个RGB数组。这里的操作是对RGB三个值进行平均。我们渲染被更改后的图像数据，再次播放视频，得到黑白视频。

Matt分析了其在实际项目中的应用。例如做大数据相关的动画，需要使用Javascript渲染动画，但是动画颜色和背景颜色不太匹配。一个解决方案是把视频图像放到背景中，从视频边缘选取一个像素点，得到返回的RGB值，将主题风格设置为背景颜色。这样得到和背景颜色完全匹配的动画。

Matt最后举的一个例子是机器学习问题。在环境中画出视频图像，并取出图像数据。将数据返回Tensorflow模型中，得到模型预测结果。我们取出视频每一帧传递给Tensorflow模型，进行目标检测，并返回轮廓函数（每个预测包括一个X、Y值和高度宽度）。通过在屏幕中画出目标检测的矩形，说明预测模型的结果。该模型在每一帧进行对象检测，但不是实时的，因此在播放中不太流畅。

QA环节的问题：

1、在不同浏览器上的表现如何；

2、canvas如何处理音频。相关回答可以参考演讲视频。

附上演讲视频：