requestAnimationFrame not work´s

[BtoGarciaHdz]

Is this a bug report or a feature request?

• Bug Report
• Feature Request

Please provide the steps to reproduce the issue [Bug Report only]

Hello Community.
I'm doing an exercise using Angular v-22; it involves capturing video frames from the webcam and rendering them using "getContext" and replicating them with "requestAnimationFrame".

The fact is that I have already consulted the documentation and everything seems to be in order, but I can't get the webcam video to show.

Excuse me in advance if the content is in order; It's my first query.

-Angular v18

• CS code v1.90.0
• Firefox for developers v127.0b9 (64-bit)
• Microsoft Edge v125.0.2535.92

Please provide the expected behavior vs the actual behavior you encountered [Bug Report only]

No response

Please provide a screenshot if possible [Bug Report only]

No response

Please provide the exception or error you saw [Bug Report only]

No response

Is this a browser-specific issue? If so, please specify the device, browser, and version. [Bug Report only]

No response

Description [Feature Request only]

I attach the .component.html:

Login - FaceApi

    <div class="col-4"></div>
    <div class="col-4" style="margin-top: 150px;">
        <div class="jumbotron bg-dark" style="color:white; text-align: center;">
            <h3> <i class="fa fa-video-camera"></i> Login - Face</h3>
            <hr class="my-4">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">Login</button>
        </div>
    </div>
    <div class="col-4"></div>
</div>

Identicicación facial

×

Cámara de identifiación

      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-primary" (click)="detectar()">Detectar rostro</button>
      <button type="button" class="btn btn-danger" (click)="removerVideo()">Close</button>
    </div>
  </div>
</div>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

and I attach the .comonent.ts:

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import * as faceapi from 'face-api.js'

@component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrl: './login.component.scss'
})
export class LoginComponent implements OnInit {

@ViewChild('videoContainer', {static: true}) videoContainer!: ElementRef;
@ViewChild('myCanvas', {static: true}) myCanvas!: ElementRef;

public context!:CanvasRenderingContext2D;

constructor(){}

ngOnInit(): void {

}

main = async()=>{

this.context = this.myCanvas.nativeElement.getContext('2d');
var video = await navigator.mediaDevices.getUserMedia({video: true});

let stream = this.videoContainer.nativeElement;


stream.scrcObjet = video;

const reDraw = async()=>{
  this.context.drawImage(stream, 0, 0, 640, 480);
  requestAnimationFrame(reDraw);
}

requestAnimationFrame(reDraw);

}

detectar(){

this.main();

}

removerVideo(){}

}

Proposed solution [Feature Request only]

No response

Alternatives considered [Feature Request only]

No response

[JoostK]

Hello, we reviewed this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.