I’m doing an exercise using Angular v-15; it involves capturing video frames from the webcam and rendering them using “getContext” and replicating them with “requestAnimationFrame”.

I have two HTML components; one is the webcam stream, and the other is the canvas that draws what it captures from the video.

The problem I have is that in the “card-header” class div nothing changes; Only the initial dark gray color is visible. It doesn’t even turn black as if it were transmitting something.

This is the HTML file:

<nav class="navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Login - FaceApi</a>
</nav>

<div class="container">
    <div class="row">

        <div class="col-4"></div>
        <div class="col-4" style="margin-top: 150px;">
            <div class="jumbotron" style="text-align: center; border: 1px solid rgb(0, 0, 0);">
                <h3> <i class="fas fa-video-camera"></i> Login - Face</h3>
                <hr>
                <button type="button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#staticBackdrop">Login</button>
            </div>
        </div>
        <div class="col-4"></div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade mt-5" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="staticBackdropLabel">Identificación Facial</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
            <div class="card text-white bg-dark mb-3">
                <div class="card-header bg-dark">Cámara de Identificación</div>
                  <video style="position: absolute; top:0; visibility: hidden; left:0; opacity: 0;" width="640" height="480" autoplay muted #videoContainer></video>
                  <canvas width="640" height="480" #myCanvas></canvas>
              </div>
          
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" (click)="detectar()">Detectar rostro</button>
          <button type="button" class="btn btn-secondary" (click)="removerVideo()">Close</button>
        </div>
      </div>
    </div>
  </div>

and this is the TS file

import { HttpClient } from '@angular/common/http';
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { environment } from 'src/environments/environment';

const URL = environment.urlServer;

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

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

  public context!:CanvasRenderingContext2D;

  constructor(private http:HttpClient){}

  ngOnInit(): void {
    
  }

  detectar(){
    this.main();
  }
  removerVideo(){
    location.reload();
  }
  main = async()=>{
    this.context = this.myCanvas.nativeElement.getContext('2d');
    var video = await navigator.mediaDevices.getUserMedia({ video:true});

    this.videoContainer.nativeElement.srcObjet = video;

    const reDraw = async()=>{
      this.context.drawImage(this.videoContainer.nativeElement, 0, 0, 640, 480);

      requestAnimationFrame(reDraw);
      
    }

    requestAnimationFrame(reDraw);

  }
  

}

It is supposed to use webcam streaming via “getUSerMedia”.
Capture the video context with “getContext”.
And “drawImage” should draw what it has captured from the video div and display it on request of a canvas.

The console doesn’t give me any errors.
The web browser asks me for permissions to use the camera and I accept them; The IR LED on the webcam turns on, a sign that it is capturing.
I have tried in several browsers but the result is always the same.

I’m using VS code and git to write and mount the servers.

–Angular CLI: 15.2.11
–Node v14.21.3
–npm v6.14.18
–VScode v1.90.1