使用 globalCompositeOperation 在 IOS 的画布中渲染视频叠加层

Question

这让我发疯。请帮助了解原因。我无法在 iOS（Chrome 和 Safari）的画布中使用蒙面视频。在 iPad 和 iPhone 上进行了测试，也在许多不同的真实设备上与 Sauce Labs 进行了测试。

我使用透明蒙版作为 .png（白色和透明像素）来覆盖带有 globalCompositeOperation 的视频。 Android 和 Windows 设备一切正常。

为了排除 fabric.js 的原因，我使用本机画布函数创建了另一个测试。

用过的.png面具

[预期结果] Mask 仅适用于 android 和桌面浏览器（所有主要浏览器以及外来浏览器）

在所有 IOS 设备上都没有屏蔽 Safari 或 Chrome

另外：使用静止图像而不是图像序列（通过 requestAnimFrame）进行遮蔽非常有效。 当然，这是许多产品配置器中的常见组合。

更改任何内容以使最小测试用例起作用，但没有成功。 即使是视频序列上的简单不透明度值也对 ios 和 ipad-os 设备没有影响。使用不同的视频格式和标签设置进行测试。网络调试未发现错误。无论如何，叠加视频只是在蒙版上渲染。这里发生了什么？

搜索了许多 apple bug trackers 但找不到关于这个特定问题的任何信息。多年来，它自己的每一个标准似乎都有效。

var canvas = new fabric.Canvas('plan', { selection: true});

canvas.objectCaching = false;

var img = "https://www.myselfie.fun/media/collection/templateselfie/frames/jungle_easy_01.png";

fabric.Image.fromURL(img, function(myImg) {
  
  myImg.crossOrigin="Anonymous";
  var img1 = myImg.set({
    originX: 'left',
    originY: 'top',
    left: 0,
    top: 0,
    scaleX: canvas.width / myImg.width,
    scaleY: canvas.height / myImg.height,
    selectable : false,
    evented: false,
  });

  img1.setCoords();
  canvas.backgroundColor = null;
  canvas.bringToFront(img1);
  canvas.add(img1);
  canvas.renderAll();

  const videoEl = document.getElementById('vid');
  videoEl.setAttribute('loop', 'loop');
 
  videoEl.setAttribute('autoplay', 'autoplay');
  videoEl.setAttribute("playsinline", true);
  videoEl.crossOrigin="Anonymous";
  videoEl.addEventListener('loadedmetadata', () => {
    const video = new fabric.Image(videoEl, {});
    video.set({
        globalCompositeOperation: "source-atop",
        originX: 'left',
        originY: 'top',
        left: 0,
        top: 0,
        scaleX: canvas.width / videoEl.width,
        scaleY: canvas.height / videoEl.height,
        lockUniScaling: true,
        centeredScaling: true,
        lockRotation: true,
        //opacity: 0.5
    });
    canvas.add(video);
    canvas.bringToFront(video);
    const render = () => {
      this.canvas.renderAll();
      this.request = fabric.util.requestAnimFrame(render);
    };
    fabric.util.requestAnimFrame(render);
  });

                  videoEl.setAttribute('src','https://www.myselfie.fun/media/collection/templateselfie/frames/test.mov');
  videoEl.load();

});

做了一个测试用例在codepen（用fabric.js）

第二个测试用例仅具有原生画布功能（没有 fabric.js）

我想这是一个时间问题。但是，我还没有找到可行的解决方案。我想知道确切的原因。如果有错误，必须报告。当前实施的解决方法当然也非常令人愉快。