经过简单测试，这是一个很棒的项目！速度超快！
但我在拼接某两个mp4文件时，发生错误，给作者反馈一下，以便能更好地完善这个优秀的项目。
以下是我的示例代码：
html
<video id="video" controls></video>

javascript

import {
    MP4Clip,
    ImgClip,
    createChromakey,
    Combinator,
    OffscreenSprite,
    fastConcatMP4,
} from '@webav/av-cliper';
const videoList = [
    'https://aisort.net/video/f1.mp4',
    'https://aisort.net/video/f2.mp4'
];
const width = 1920;
const height = 720;
async function start() {
    const coms = (await Promise.all(videoList.map(async (vurl) => (await fetch(vurl)).body)))
        .map((sbody) => {
            return new MP4Clip(sbody);
        })
        .map((clip, idx) => new OffscreenSprite(`spr${idx}`, clip))
        .map(async (spr, idx) => {
            const com = new Combinator({ width, height });
            await spr.ready;
            //spr.rect.x = idx * spr.rect.w;
            spr.rect.x = 0;
            //await com.add(imgSpr);
            await com.add(spr, { main: true });
            return com.output();
        });
    return await fastConcatMP4(coms);
}
start().then(async res => {
    const buffer = await new Response(res).arrayBuffer();
    const blob = new Blob([new Uint8Array(buffer)], {type: 'video/mp4'})
    const video = document.getElementById('video');
    video.src = URL.createObjectURL(blob);
});

错误截图：

这可能是由于视频编码导致的问题吗？如尝试使用demo中的 123.mp4、223.mp4、323.mp4 视频进行拼接，它是可以跑通的，但换了其它视频，就跑不通了。

作者你好，感谢你的贡献，这是一个非常超前的项目，我简单地尝试过WebCodecs API的性能，它的性能不是wasm可比的，相信您的项目能解决许多问题。
我想提一个可能很愚蠢的问题，您的这个用ts编写的项目如何打包为js项目，以在浏览器中运行呢？（我从来没有接触过ts开发）。
例如我希望使用贵项目中的“fastConcatMP4”模块，我应该如何将它导出为js呢？

HI 我想问下av-cliper中decode-media.html的播放速率如何控制

// 最快速度渲染视频所有帧 while (true) { const { state, video: videoFrame } = await clip.tick(time) if (state === 'done') break if (videoFrame != null && state === 'success') { ctx.clearRect(0, 0, cvs.width, cvs.height) // 绘制到 Canvas ctx.drawImage(videoFrame, 0, 0, videoFrame.codedWidth, videoFrame.codedHeight) // 注意，用完立即 close videoFrame.close() } // 时间单位是 微秒，所以差不多每秒取 30 帧，丢掉多余的帧 time += 33000 } clip.destroy()
这里你提到了时间单位是 微秒，所以差不多每秒取 30 帧，丢掉多余的帧
如果我只是想按照正常速度播放这个视频 这里的time应该取多少 或者有什么公式来计算
如果我想要按照可变速率来播放视频，又要增加什么参数呢

编码器初始化报错

因为 WebAV 写死了 codec（avc1.4D0032'）
设备不支持默认编码 avc1.4D0032， 但支持 avc1.42E01F;

是否可以支持 mov,苹果设备很多

会议场景，使用electron方案录制窗口

const stream = await navigator.mediaDevices.getUserMedia({
			audio: false,
			video: {
				mandatory: {
					chromeMediaSource: 'desktop',
					chromeMediaSourceId: sourceId,
					minWidth: 1280,
					maxWidth: 1280,
					minHeight: 720,
					maxHeight: 720
				}
			}
		});

当窗口无内容变更时，通过outputStream读取数据时，无数据返回。

const recorder = new AVRecorder(stream, {
			width: this.resolution.width,
			height: this.resolution.height,
			expectFPS: 30
		});
const streamReader = recorder.outputStream!.getReader();
const readFrameStream = () => {
    streamReader?.read().then(({ done, value }) => {
      console.log('read record stream: ', done, value);
      if (done) {
         return;
      }
      readFrameStream();
     // .... save value to blob for write
    }）

}

Hello,
thanks for the project.
After some testing I noticed that memory is increasing in chrome (without being gced). I suspect it is because releaseUsedSamples is not being called and all the the chunks stay in mp4boxjs.
More info here:
https://github.com/gpac/mp4box.js/wiki/Memory-managment-in-MP4Box.js

目前只看到了合成完整的mp4的功能，以及再canvas上展示的这样的功能。

大佬能不能将插入的素材，如：video，image和text只保留按原比例缩放。因为一不小心比例变了弄不回去只能删了再添加。

谢谢！

在worker 环境下使用，这一行代码会报错：
await clip.ready;
645 av-utils.ts:11 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'length') at av-utils.ts:11:25 at Array.map (<anonymous>) at xt (av-utils.ts:11:10) at mp4-clip.ts:104:26 at u (mp4-clip.ts:255:5) at h (mp4-clip.ts:249:12) at mp4-clip.ts:267:21

如题

实际场景中存在基于webm的透明通道视频，视频中有人物形象以及透明背景，想基于该视频在其之上加上背景图，生成一个完整的带背景的视频，目前看WebAv应该还暂时不支持这种格式的解复用和最后的封装，想问下有什么比较好的解决思路

除了删除和恢复以外。对于添加的素材，如：image，text，video等可否增加复制粘贴功能，从而提高工作效率。

谢谢！

这个问题会导致在windows上的media player播放器播放失败

Hi, @hughfenghen

I used your latest demo to record an mp4, but the recorded mp4 file lacks duration information, which makes it impossible to seek in some players.
I couldn't find any information in your code or in the mp4box.js API on how to write duration information. I'm new to audio and video and would appreciate your guidance. Thank you!

Here is the recorded mp4:

在使用tick方法的时候，由于time < VideoFrame.timestamp，导致图片帧缺失，期望可以对外提供一个图片帧的方法

如图 视频信息的 duration 为 0

duration 为 0，无法显示时长和预览图片
https://hughfenghen.github.io/WebAV/demo/1_4-mp4-previewer

如何使用本地文件作为素材？

目前手头有个项目需要模仿类似剪映，腾讯智影等在线视频编辑，实现一个简易版在线视频编辑项目，要求是“纯前端“。
仓库项目中类似av-canvas的功能，但是目前av-canvas最终导出mp4的时候，需要从头到尾播放一遍，这个有些慢了，作者能否有快速一些导出mp4的方案实现

难道只能用 ffmpeg 了吗？😭

目前看demo是只解码一次

WebAV网站用的是什么theme？真不错，能否分享下哈

长时间（>5分钟）录制偶现dec reclaimed due to inactivity.提示，后续调用encode失败，无法录制，未能找到出现规律。
可能限制电脑一段时间会出现（未息屏）

请教一下大佬，webav能解决下面的问题么

1. 这是一个图片播放器，是一个div元素包含了图片，select等元素，需要录制成视频
2. 但是WebCodecs API貌似支持录制canvas元素或者整个窗口
3. 现在是先html2canvas，再用Whammy生成webm，但视频清晰度会比较低

类似 MediaRecorder 这样

Run the demo under the av-canvas directory, record the video, and use Windows media player to play without sound. Use other players to play normally (such as: vlc).

The file is as follows:
WebAv-export-1686045983537.zip

This issue can be reproduced using the demo at https://hughfenghen.github.io/WebAV/demo/record-usermedia.html

During the recording process, the memory usage keeps increasing. Although the browser's garbage collector runs, it is not able to completely free up the memory.

By debugging the code and temporarily disabling certain lines, the memory leak issue is mostly resolved. The problematic code seems to be related to the following line:

mp4File.addSample(trackId, s.data, s) 

The specific code location is as follows:

我们的场景：
下载到完整的mp4资源，用mp4clip解码出音视频，
video 切片播放就行，
音频获取到完整的pcm数据直接播放更加流畅简洁

AudioClip貌似不太合适，循环播放的话，音频不流畅
期望比较流畅的播放音频，请问有什么方法推荐吗？

Safari报错Unhandled Promise Rejection: Error: Cant create gl context

手机上报：Can`t find variable : VideoDescder

https://hughfenghen.github.io/WebAV/demo/record-avcanvas.html

demo录制mp4无数据输出，

Win11平台
Chrome 117.0.5938.150

I use av-recorder and av-canvas modules in electron, av-recorder works fine, but av-canvas reports an error.
(1) The error is as follows

(2) The relevant codes are as follows
index.js.zip