[Post]Web 音视频（三）在浏览器中创建视频

[hughfenghen]

https://hughfenghen.github.io/posts/2023/07/31/webav-3-create-video/

[nbutmickey]

求问一下，问什么demo解码mp4视频并利用canvas绘制，会有一种加速的感觉

[hughfenghen]

求问一下，问什么demo解码mp4视频并利用canvas绘制，会有一种加速的感觉

这个 DEMO 目的是为了演示快速解码视频，webcodecs 之前是无法实现的。

[nbutmickey]

@hughfenghen

求问一下，问什么demo解码mp4视频并利用canvas绘制，会有一种加速的感觉

这个 DEMO 目的是为了演示快速解码视频，webcodecs 之前是无法实现的。 我想利用这个库，可以实现原模原样解码视频，然后利用canvas播放吗，且不会卡顿

[nbutmickey]

@hughfenghen 我想利用这个库，可以实现原模原样解码视频，然后利用canvas播放吗，且不会卡顿

[hughfenghen]

@hughfenghen 我想利用这个库，可以实现原模原样解码视频，然后利用canvas播放吗，且不会卡顿

理论上是可以实现的，但你需要解决很多难题，时间（pts） 控制、音画同步、buffer 管理 等等

[nbutmickey]

好的，明白了

[hughfenghen]

@nbutmickey
https://hughfenghen.github.io/WebAV/demo/decode-media.html 这个页面有解码视频、音频的 demo（刚刚优化了音频 demo，解决了卡顿问题），WebAV 项目中有源码。

组合在一起就是你想实现的效果，组合的时候你需要：

1. 修改 demo 代码，控制视频帧的渲染时间（不要快速渲染）
2. 需要一定策略调整音频播放时间，避免长时间播放累积误差，导致音画不同步
3. 如果是流式（比如网络）加载数据，需要预留一定 buffer，避免网络抖动导致播放卡顿