How to Implement a Mechanism like QR code scanning of WhatsApp Web with angular?

I want a way to enable me to move to another page by scanning the QR code like the mechanism of WhatsApp Web, i use firebase Realtime Database to verify (ipAddress – date) in my case this is the source code

app.component.html

<div class="scanner">

<qr-code [value]="qrInfo" size="270" level="H"> </qr-code>

app.component.ts

    import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  item: any;
  
  qrInfo: any;

  today = new Date().getTime()

  ipAddress = '';

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.getIPAddress();
  }

  getIPAddress() {
    this.http.get("http://api.ipify.org/?format=json").subscribe((res: any) => {
      this.ipAddress = res.ip;
      this.item = {
        ip: this.ipAddress,
        date: this.today
      }

      this.qrInfo = JSON.stringify(this.item);
    });
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularFireModule } from '@angular/fire';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireStorageModule } from '@angular/fire/storage';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { QRCodeModule } from 'angular2-qrcode';
import { HttpClientModule } from '@angular/common/http';
import { YoutubePlayerComponent } from './youtube-player/youtube-player.component';

const config = {
  apiKey: "........",
  authDomain: "project-name.firebaseapp.com",
  projectId: "project-name-1c8sd",
  storageBucket: "project-name-1c8sd.appspot.com",
  messagingSenderId: "10105233566",
  appId: "1:1010524625566:web:dd52e06ba3m4n5bb658f",
  measurementId: "A-8YY779MYYY"
  
};

@NgModule({
  declarations: [
    AppComponent,
    YoutubePlayerComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule,
    QRCodeModule,
    HttpClientModule,
    AngularFireModule.initializeApp(config),
    AngularFirestoreModule, 
    AngularFireAuthModule, 
    AngularFireStorageModule 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

after sccaning the QR code this is the page how i want to go

video.component.html

<iframe width="560" height="315" src="https://www.youtube.com/embed/uYhAfgEwNWA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>