[Post]Web 音视频（六）图像素材处理

[hughfenghen]

https://hughfenghen.github.io/posts/2023/08/19/webav-6-process-image/

[whi-sper]

有一个问题可否请教一下：最近在研究H265转码H264的耗时影响因素，得到结论在控制分辨率和帧率不变的情况下，码率对耗时影响几乎很小，这正常吗😂

[hughfenghen]

@whi-sper 我没做过相关统计，你想得到严谨的数据就多测一些用例就行了

[nbutmickey]

想问下，在实际生产过程中，有时候会遇到多条轨，如视频轨，图片轨，音频轨，有什么比较好的方式组合这些轨道，从而实现视频合成吗

[hughfenghen]

想问下，在实际生产过程中，有时候会遇到多条轨，如视频轨，图片轨，音频轨，有什么比较好的方式组合这些轨道，从而实现视频合成吗

这里有混合音视频的 DEMO：https://hughfenghen.github.io/WebAV/demo/concat-media.html 源码在 WebAV 项目中：https://github.com/hughfenghen/WebAV

原理：

1. 使用 Canvas 混合图像；
2. 快速混合音频（PCM）使用加法即可
3. AudioContext 可以混合多路实时的音频流（MediaStream）

[nbutmickey]

其实我想要了解的是如果有三个轨道，如视频轨，图片轨，音频轨，每个轨道里面有多个clip，且每个clip标记了当前的star和end，在生成新视频的时候，是否是先生成视频stream，然后在视频stream的基础之上加上图片，得到视频图片流，最后再加上音频流，这样各个轨道依次叠加的过程

[hughfenghen]

这里有混合音视频的 DEMO：https://hughfenghen.github.io/WebAV/demo/concat-media.html 源码在 WebAV 项目中：https://github.com/hughfenghen/WebAV

这里有你想要的答案，建议先体验 DEMO，找到感兴趣的 DEMO 再去看看源码。 你要的功能已经在 DEMO 中实现了，但很难用一两句话讲清楚。