使用JavaScript和画布进行视频颜色检测

Question

我使用JavaScript和画布来检测网站上的RGB值，但是当我在Chrome/Edge中测试时，包装器Div背景颜色可以匹配视频中的效果很好，但是当我在测试相同的代码中时iPhone X上的Chrome，它们的出现略有不同。

MP4视频文件似乎在这里存在跨域问题，但是该代码在我所描述的PC上正常工作，这是显示我遇到的内容的屏幕截图：

• Chrome/PC 在此处输入图像描述 包装器Div的背景与视频中的背景完全相同。
• Chrome/iPhone X 在此处输入图像描述 现在略有不同。

我不知道如何避免这个问题，请帮助并感谢！

video = document.getElementById('cat_video');
video.muted = true;
video.autoplay = true;
video.loop = true;
video.setAttribute('defaultMuted', '');
video.setAttribute('playsinline', '');

function setVideoBgColor(vid, backgroundElement) {
  const ratio = window.devicePixelRatio || 1;
  const canvas = document.createElement("canvas");
  //size of canvas space to copy pixel onto
  videoWidth = 400;
  videoHeight = 300;
  canvas.width = videoWidth * ratio;
  canvas.height = videoHeight * ratio;
  canvas.style.width = `${videoWidth}px`;
  canvas.style.height = `${videoHeight}px`;
  const ctx = canvas.getContext("2d");
  ctx.scale(ratio, ratio);
  ctx.drawImage(vid, 0, 0, canvas.width, canvas.height);
  const p = ctx.getImageData(0, 0, 100, 100).data;
  const colorBoost = 0;
  const colorR = p[0] + colorBoost;
  const colorG = p[1] + colorBoost;
  const colorB = p[2] + colorBoost;
  //colorLayer.data[pixelPos];
  backgroundElement.style.backgroundColor = "rgb(" + colorR + "," + colorG + "," + colorB + ")";
}
document.getElementById('cat_video').addEventListener("play", function() {
  setVideoBgColor(document.getElementById('cat_video'), this.parentElement);
})

.wrapper {
  display: flex;
  align-item: center;
  justify-item: center;
  width: 100vw;
  height: 500px;
  background: pink;
}

#cat_video {
  width: 400px;
  height: 300px;
}

<div class="wrapper">
  <video id="cat_video" src="https://www.purrfectland.com/wp-content/uploads/2022/04/mouse_playing_cat.mp4"></video>
</div>