HTML5视频和Canvas

2020年1月29日 294点热度 0人点赞 0条评论



本文是来自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如何处理音频。相关回答可以参考演讲视频。

       
附上演讲视频:

图片

69000HTML5视频和Canvas

这个人很懒,什么都没留下

文章评论