Ajustar uma página para orientar a selfie e envio de documento - bootstrap 5, Css, Js ou jquery

Olá! Estou montando uma prova de conceito de prova de vida digital e não entendo muito de web design.
Gostaria que a tela que ajudasse o usuário a fazer uma selfie e uma foto do documento, por isso pensei em 2 estapas:
a primeira é uma elipse para o usuário encaixar o rosto e essa elipse deve ser consistente em diversos dispositivos e orientações (responsiva), para que o usuário consiga fazer uma selfie na posição correta.  Caso precise de mais referências de tela seria algo semelhante as de captura de selfie usadas no mercado, por exemplo facetec.

Após fazer a selfie, o usuário vai revisar a foto e ao confirmar, a página deve se ajustar para a coleta do documento de identificação com foto, ajustando o retângulo para ser mais responsivo. Esta parte da revisão da foto não precisa fazer, apenas a orientação da selfie e depois do envio de documentos.

Solicito alterar o .html para ter este comportamento e a responsividade da elipse e do retângulo.

Adicionei 2 arquivos html, um que transmite o stream da camera e outro que tem uma imagem estática para referencia. Não é enviada a selfie ou video para nenhum lugar, eu reduzi o html ao mínimo para ficar mais fácil o trabalho e depois eu faço o merge.

Obrigado.