angularface-api

azure-ai-vision-faceanalyzer don't work in Angular app

I tried to integrate Azure Face API (liveness check) into my Angular 18 application. After my try to integrate it, I have the following error codes in console:

DOMException: Failed to execute 'postMessage' on 'Worker': SharedArrayBuffer transfer requires self.crossOriginIsolated.
    at http://localhost:4200/faceanalyzer-assets/js/AzureAIVisionFace_SIMDBundle.js:5:31538

At part:

        worker.postMessage({
            "cmd": "load",
            "handlers": handlers,
            "urlOrBlob": Module["mainScriptUrlOrBlob"] || _scriptDir,
            "wasmMemory": wasmMemory,
            "wasmModule": wasmModule,
            "workerID": worker.workerID
        })

Also I have recurring error logs: still waiting on run dependencies: and dependency: loading-workers

I tried to search some information about this issue on google, but I didn't find anything helpful.

I don't know if this information is important but graphic elements of this component works localhost

Here are part of angular.json that outputs faceanalyzer:

              {
                "glob": "**/*",
                "input": "./node_modules/azure-ai-vision-faceanalyzer/faceanalyzer-assets",
                "output": "/faceanalyzer-assets",
                "followSymlinks": true
              }

I tested it, it creates proper directory

Also here is part of mine PhotoComponent that integrates azure-ai-vision-faceanalyzer

import 'azure-ai-vision-faceanalyzer';

@Component({
  selector: 'app-photo',
  standalone: true,
  imports: [CommonModule, WebcamModule],
  templateUrl: './photo.component.html',
  styleUrl: './photo.component.scss',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class PhotoComponent implements OnInit, AfterViewInit {
....
}

And corresponding template:

  @if (authToken) {
  <azure-ai-vision-faceanalyzer
    [token]="authToken"
  ></azure-ai-vision-faceanalyzer>
  }
Solution

  • About how I resolved this issue:

    1. Big thanks to @UCYT5040 for information about CORS issue, I had to set proper headers:
    Cross-Origin-Opener-Policy "same-origin"
Cross-Origin-Embedder-Policy "require-corp"
    1. It still won't work on Angular dev server but I Dockerized whole thing and run it with NGINX
    FROM node:20.15.1 as build

WORKDIR /app

COPY package*.json ./

COPY .npmrc ./

RUN npm install -g @angular/cli

RUN npm install --force

RUN rm .npmrc

COPY . .

RUN ng build --configuration=production

FROM nginx:latest

COPY nginx.conf /etc/nginx/nginx.conf

COPY --from=build /app/dist/project/browser /usr/share/nginx/html

EXPOSE 80

    In this docker container it runs without any problems