fix: resolve size mismatch issue in MediaStreamClip during tab recording#343

[Dramalf]

修复了#343

• 当前问题：
  在未指定sharing tab的尺寸时，videoTrack会有默认尺寸，这不一定会和tab的实际尺寸匹配，导致clip有透明边缘
• 解决方法：
  通过创建了一个video标签来确保metadata loaded后再触发ready事件，确保getSettings()获取的是实际width, height

[changeset-bot]

🦋 Changeset detected

Latest commit: a6b088d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@webav/av-cliper	Patch
@webav/av-canvas	Patch
@webav/av-recorder	Patch
WebAV-Doc-Site	Patch
@webav/internal-utils	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[hughfenghen]

感谢勇士的贡献，但该方案略显复杂。

可以试试能不能从 frame 中获取到正确分辨率。

如果存在 videoTrack，则等 onFirstFrame 触发后，再 resolve clip.ready

function renderVideoTrackToCvs(
  cvsCtx: OffscreenCanvasRenderingContext2D,
  track: MediaStreamVideoTrack,
  onFirstFrame: () => void
) {
  let emitFF = false
  return autoReadStream(
    new MediaStreamTrackProcessor({
      track,
    }).readable,
    {
      onChunk: async (frame) => {
        if (!emitFF) {
          onFirstFrame(frame)
          emitFF = true
        }
        cvsCtx.drawImage(frame, 0, 0);
        frame.close();
      },
      onDone: async () => {},
    },
  );
}

[Dramalf]

感谢勇士的贡献，但该方案略显复杂。

可以试试能不能从 frame 中获取到正确分辨率。

如果存在 videoTrack，则等 onFirstFrame 触发后，再 resolve clip.ready

function renderVideoTrackToCvs(
  cvsCtx: OffscreenCanvasRenderingContext2D,
  track: MediaStreamVideoTrack,
  onFirstFrame: () => void
) {
  let emitFF = false
  return autoReadStream(
    new MediaStreamTrackProcessor({
      track,
    }).readable,
    {
      onChunk: async (frame) => {
        if (!emitFF) {
          onFirstFrame(frame)
          emitFF = true
        }
        cvsCtx.drawImage(frame, 0, 0);
        frame.close();
      },
      onDone: async () => {},
    },
  );
}

你的思路确实更清晰，我已经按照这种思路进行了实现, 对renderVideoTrackToCvs的参数进行了一些修改