Draw a border inside video with angular and CSS - html

Question

I am writing a SPA which very simply shows video from webcam, draws a rectangle on it (so you can place a document where the edges align with the drawn box) then I press a button to capture that image.
Everything works except for drawing the box. I want it to be somewhat inside the div, so it's not around the video but actually on the video, aligning the sides but with a, let's say, 25px difference. I now just draw a border with CSS but I'm guessing there's better solutions I just can't seem to find them.
Edit: I tried with the drawImge() - function too, didn't seem to find a way to make it work. Haven't figured out why though.
app.component.ts:
import { Component, ElementRef, OnInit, Renderer2, ViewChild } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
#ViewChild('video', { static: true }) videoElement: ElementRef;
#ViewChild('canvas', { static: true }) canvas: ElementRef;
videoWidth = 0;
videoHeight = 0;
constraints = {
video: {
facingMode: "environment",
width: { ideal: 4096 },
height: { ideal: 2160 }
}
};
constructor(private renderer: Renderer2) {}
ngOnInit() {
this.startCamera();
}
startCamera() {
if (!!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia)) {
navigator.mediaDevices.getUserMedia(this.constraints).then(this.attachVideo.bind(this))
.catch(this.handleError);
} else {
alert('Sorry, camera not available.');
}
}
attachVideo(stream) {
this.renderer.setProperty(this.videoElement.nativeElement, 'srcObject', stream);
this.renderer.listen(this.videoElement.nativeElement, 'play', (event) => {
this.videoHeight = this.videoElement.nativeElement.videoHeight;
this.videoWidth = this.videoElement.nativeElement.videoWidth;
});
}
capture() {
this.renderer.setProperty(this.canvas.nativeElement, 'width', this.videoWidth);
this.renderer.setProperty(this.canvas.nativeElement, 'height', this.videoHeight);
this.canvas.nativeElement.getContext('2d').drawImage(this.videoElement.nativeElement, 0, 0);
}
drawImge(videoHeight, videoWidth){
var video = document.querySelector("#webCamera");
var canvas = document.querySelector("#videoCanvas");
var ctx = this.canvas.nativeElement.getContext('2d');
ctx.rect(0,0,videoWidth,videoHeight);
ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.stroke();
}
handleError(error) {
console.log('Error: ', error);
}
}
app.component.html
<div class="container vh-100">
<div class="d-flex flex-column align-items-center">
<div class="p-1" >
<video #video class="vid" id="canvas1" autoplay></video>
</div>
<div class="pb-2">
<button class="btn btn-primary" (click)="capture()">Capture Image</button>
</div>
<div class="p-1">
<canvas #canvas class="vid"></canvas>
</div>
</div>
</div>
app.component.scss
#canvas1{
border-style: inset;
border-width: 300px;
border: solid 3px green;
}

Answer 1

Ok guys,
I found a really easy solution with CSS, it is however a bit messy as it's hardcoded. Also all the other drawings on screen should be animateable. Meaning i.e. an arrow drawn on screen moving slightly up, resetting and making the motion again untill someone uses the capture button.
This to only say I'm still looking for a solution that's not just CSS if anyone might have one.
As for the solution:
app.component.html:
<div class="container vh-100">
<div class="d-flex flex-column align-items-center">
<div class="p-1 wrapper" >
<video #video class="vid" id="canvas1" autoplay></video>
<div class="trapeziod"></div>
<div class="rect"></div>
</div>
<div class="pb-2">
<button class="btn btn-primary" (click)="capture()">Capture Image</button>
</div>
<div class="p-1">
<canvas #canvas class="vid"></canvas>
</div>
</div>
</div>
So just another div in the div where the video resides, called rect.
Then:
app.component.scss
#canvas1{
border-style: inset;
border-width: 300px;
border: solid 2px black;
}
.trapezoid {
width: 50px;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #7FFF00;
}
.wrapper{
position: relative;
}
.rect{
position: absolute;
left: calc(10% - 90px);
top: calc(20% - 100px);
border: solid 8px #7FFF00;
width: 1060px;
height: 580px;
}
This is perfectly how it should look.