Error: node_modules/twilio-video/tsdef/VideoProcessor.d.ts:2:34 - error TS2304: Cannot find name 'OffscreenCanvas'.

[jrayga]

• [✔️] I have verified that the issue occurs with the latest twilio-video.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 verified that the Quickstart application works in my environment.
• [✔️] I am not sharing any Personally Identifiable Information (PII) or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Code to reproduce the issue:

![image](https://user-images.githubusercontent.com/38303930/140604855-61a5c7e2-6dcb-4536-86d9-9ad6bed29c93.png)

Error: node_modules/twilio-video/tsdef/VideoProcessor.d.ts:2:34 - error TS2304: Cannot find name 'OffscreenCanvas'.
2   processFrame(inputFrameBuffer: OffscreenCanvas, outputFrameBuffer: HTMLCanvasElement): Promise<void> | void;

Expected behavior:

Complete the ng build process

Actual behavior:

Build failing because of the error.

Software versions:

• [✔️] Browser(s): Chrome
• [✔️] Operating System: Windows 11
• [✔️] twilio-video.js: 2.18.1
• [✔️] Third-party libraries (e.g., Angular, React, etc.): Angular 13

[charliesantos]

@jrayga thanks for the report. This seems to be happening on your Angular 13 setup correct? Can you please provide a simple Angular 13 project where I can run the build commands that shows this error? And as workaround for now, can you please try installing @types/offscreencanvas and see if it helps?

npm install --save-dev @types/offscreencanvas

[ankitkaushik24]

@charliesantos even I'm getting the same problem in Angular-v13 and installing @types/offscreencanvas doesn't help either.

[ankitkaushik24]

for now excluding the file in tsconfig.app.json would do the work like:

"exclude": ["node_modules/twilio-video/tsdef/VideoProcessor.d.ts"]

[charliesantos]

@ankitkaushik24 do you have a simple Angular 13 project where I can reproduce this?

[nsmithdev]

It was removed from the auto generated lib.dom.d.ts in 4.4 https://github.com/microsoft/TypeScript/issues/45745#issuecomment-916440817 https://github.com/microsoft/TypeScript/commit/9d443b76aac0832d7f3c890441264d39307fe31a#diff-796971dc74a3f3cd77ca0a3a776d6fe27ab224cd501d9652dbeffcf45ba0f058

They are going to try and decouple the dom definitions from the typescript version in 4.5 so the can be versioned independently. https://github.com/microsoft/TypeScript/pull/45771

You can probably duplicate the problem by just targeting typescript 4.4 it's not specific to Angular.

I was able to fix it with a slightly more targeted method since I don't use OffscreenCanvas directly. The code below was added to src\typings.d.ts to fix my Angular 13 project.

// Temp fix for OffscreenCanvaswas removed from lib.dom.d.ts in Typescript 4.4
// https://github.com/twilio/twilio-video.js/issues/1629
// https://github.com/microsoft/TypeScript/issues/45745#issuecomment-916440817
declare type OffscreenCanvas = any;

[ghulamb]

I'm having the same problem and none of the above recommendations work for me.

[charliesantos]

Thanks everyone for the information. I added an internal ticket to investigate further.

[sir-captainmorgan21]

Any word on this? This is a big show stopper. Will use @nsmithdev work around for now, but not ideal.

[charliesantos]

We are currently working on other higher priority items. Please bear with us. Please use @nsmithdev 's workaround for now.

[sir-captainmorgan21]

@nsmithdev and @jrayga I found a slightly cleaner workaround too. So like @charliesantos suggested. You install @types/offscreencanvas, but you have to make sure you add it to your tsconfig.json compilerOptions like so (if you are working with buildable libs in angular, like me, you need to put it in the library's tsconfig.lib.json:

"types": [
      "offscreencanvas"
    ]

[DaniTwilio]

Hi... I am trying to create an Angular Project, but I am not sure if I am adding the types properly. Is it like this?

"compilerOptions": {
    "types": [
      "offscreencanvas"
    ],
    "baseUrl": "./",

[tarendra1128]

I have to use Twilio video chat and currently working on Angular 13+ and getting--- Cannot find name 'OffscreenCanvas'.

3 inputFrameBuffer: OffscreenCanvas | HTMLCanvasElement | HTMLVideoElement, this error can u please suggest me what to do next???

[manjeshbhargav]

@jrayga , @tarendra1128 , @DaniTwilio , @sir-captainmorgan21 , @ghulamb , @nsmithdev ,

Sorry for the late response. Apart from the workaround mentioned by @charliesantos , you can also upgrade to any version of Angular with TypeScript version in the range 4.9.3 - 4.9.5. This will also fix the type error.