将从相机拍摄的图像转换为画布侧面呈灰色

Question

我使用vanilla javascript从相机捕捉图像并进入画布。它适用于Chrome Android，但不适用于iOS Safari。如屏幕截图所示，图像上有灰色区域。有没有我需要做的事情才能得到渲染？

相机的JavaScript

navigator.mediaDevices.getUserMedia({
    'audio': false,
    'video': {
        facingMode: 'environment'
    }
}).then(stream => {
    this.VIDEO.srcObject = stream;
    this.VIDEO.addEventListener('loadeddata', async () => {
        this.VIDEO.width = this.VIDEO.videoWidth;
        this.VIDEO.height = this.VIDEO.videoHeight;
        this.CANVAS.width = this.VIDEO.videoWidth;
        this.CANVAS.height = this.VIDEO.videoHeight;
        resolve();
    }, false);
}).catch(error => {
    console.error(error);
    self.MESSAGE.textContent = error;
});

用于在画布和预览窗口上绘图的JavaScript

self.CONTEXT.drawImage(self.VIDEO, 0, 0, self.VIDEO.width, self.VIDEO.height);

let imgDataURL = self.CANVAS.toDataURL('image/png');
self.PLANT.src = imgDataURL;
self.POLAROID.style.backgroundImage = `url(${imgDataURL})`;