I am very sorry for the UI of the question, I do not know why images are so huge. Please accept my apologies.

I am doing a QrCodeScanner with browser's getUserMedia and up to now have got this.

Please do not pay attention to buttons [SCAN QR, STOP QR], the camera is between them.

What I want is something like this

Does anyone know what the way of doing it is?