当图像 src 值来自不同来源时，具有虚拟背景的视频会变黑

Question

我正在尝试加载来自不同来源的图像以将其用作虚拟背景。首先，我获取图像，并且能够在页面中的另一个元素中显示它（看起来 CORS 不是问题？），但不知何故，当在 virtualBackground 中附加图像时，如果我使用来自的图像，视频会变黑相同来源，加载没有问题。

控制台也没有错误。

我正在使用 twilio/video-processors.js v 2.0.0 和 twilio-video v2.28.1。 请检查下面的代码：

const loadImage = (imgSource: string): Promise<HTMLImageElement> =>
      new Promise((resolve, reject) => {
        const img = new Image();
        img.src = imgSource;
        // img.src = '/specificResources/my-bg.jpg'; // When I use this one it works
        img.onload = () => resolve(img);
        console.log('IMAGE', img); // Prints img element
        img.onerror = (e) => {
          console.log('onerror', e);
          reject(e);
        };
      });
    try {
      const imgUri =
        'https://my.domain.com/images/fdef355eb7a7';
      const data = await fetchResource(imgUri);
      const backgroundImage = await loadImage(data.location); // data.location is another url
      console.log('[backgroundImage]', backgroundImage); // Prints img element
      const virtualBackground = new VirtualBackgroundProcessor({
        assetsPath: '/twilioVideoProcessorAssets',
        backgroundImage,
        fitType: ImageFit.Contain,
        pipeline: Pipeline.Canvas2D,
      });
      await virtualBackground.loadModel();
      console.log('Adding processor');
      videoTrack.addProcessor(virtualBackground); 
    } catch (error) {
      console.error('Error loading model', error);
    }

Answer 1

原来是CORS问题，服务器需要在资源的响应头中包含一些属性。

Access-Control-Allow-Origin=<origin> 
Vary: Origin 

不知何故很难弄清楚，因为它没有在控制台中抛出任何 CORS 错误或任何其他类型的错误，并且视频突然变黑，因此可能会误解正在发生其他事情，除非您在图像对象中添加

crossOrigin="anonymous"

会注意到的。

因此，也许还有改进的空间，可以在控制台中抛出一些错误或异常消息。

这里有一些有用的文档：

• https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin