Description
- I have verified that the issue occurs with the latest twilio-video-processors.js release and is not marked as a known issue in the CHANGELOG.md.
- I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
- I am not sharing any Personally Identifiable Information (PII)
or sensitive account information (API keys, credentials, etc.) when reporting this issue.
Our Sentry logs show that multiple users are encountering the following errors when using @twilio/video-processors version 3.0.0.
- ReferenceError: Can't find variable: OffscreenCanvas
- ReferenceError: Can't find variable: document
The ReferenceError: Can't find variable: OffscreenCanvas occurs when instantiating the BackgroundProcessor in:
@twilio/video-processors/lib/processors/background/BackgroundProcessor.ts in BackgroundProcessor at line 84:61
private readonly _inputFrameCanvas: OffscreenCanvas = new OffscreenCanvas(1, 1);
The ReferenceError: Can't find variable: document occur in twilio-virtual-background-processor-pipeline-worker.js and twilio-gaussian-blur-background-processor-pipeline-worker.js in:
function getCanvas() {
return typeof OffscreenCanvas !== 'undefined' ? new OffscreenCanvas(1, 1) : document.createElement('canvas');
}
We are using the const isSupported from '@twilio/video-processors' to prevent non-supported browsers from using this feature, so these user agents are supposed to be supported.
- On macOS, the errors occur on Safari <= 16.3.
- On iPad, the errors occur on iOS / iPadOS <=16.3.1
This is probably related to the fact that Safari started supporting OffscreenCanvas only in version 16.4.
If document.createElement('canvas'); is called from within a web worker, then the document won't be available, hence the ReferenceError: Can't find variable: document
- Browser(s): Safari <=16.3, any browser using WebKIT while iOS <=16.3.1.
- Operating System: macOS - Safari <=16.3, iOS / iPadOS <=16.3.1
- twilio-video-processors.js: 3.0.0
- Third-party libraries (e.g., Angular, React, etc.): Angular