Блог

Я создал простое приложение для сканирования Qr-кодов и штрих-кодов с помощью Blazor. когда я открываю его на мобильном телефоне, в настоящее время я могу получить доступ только к фронтальной камере. но мне нужно повернуть камеру и получить доступ к камере заднего вида. Я использовал библиотеку Zxing js для сканирования QR-кодов и штрих-кодов и получил доступ к этому файлу js с помощью js-взаимодействия. на следующем рисунке показано мое приложение, как оно выглядит на самом деле.

при нажатии кнопки поворота камеры моя передняя камера должна быть повернута, и я должен иметь доступ к задней камере, и если снова нажать кнопку поворота, я должен снова получить доступ к передней камере. это то же самое, что и вращение мобильной камеры.

мой файл QrDialog.razor

 <MudDialog Class="qr-dialog">
<DialogContent>
<input type="hidden" class="form-control mb-2"  @bind-value="outputText"/>

<QrScanner ScanResult="((e) => { outputText=e; })" CodeKey="CodeKey" DialogClose="(()=>{MudDialog.Close(DialogResult.Ok(true));})"/> @*Qr Scaning Component*@



<div class="footer-btn-scan">
 
     <MudIconButton Icon="@Icons.Material.Filled.HighlightOff" Size="Size.Medium"   id="resetButton"></MudIconButton>@* reset button*@
    
     <MudIconButton Icon="@Icons.Material.Filled.Cameraswitch" Size="Size.Medium" id="rotateButton"></MudIconButton>@*camera rotate button*@
 
</div>
     <MudFab ButtonType="ButtonType.Submit"  Icon="@Icons.Material.Filled.QrCodeScanner" Class="scan-btn" id="startButton"/> @*scan button*@

</DialogContent>
 

QrScanner component

 <div class="qr-scanner">

    <div class="box">
        <img src="/img/qr.png"  id="qr-img"/>
        <video id="video" class="d-none"></video>
        <div class="line"></div>
        <div class="angle"></div>
  
    </div>
    
    
</div>
@code{
        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (!firstRender) return;
            await _jsRuntime.InvokeAsync<string>("zxing.start", true, DotNetObjectReference.Create(this));
        }
}
 

I have already included rotate function in the barcode.js file. but is not working.

     (function () { 
    window.zxing = {
        start:function (autostop, wrapper) {

        // some code..

   document.getElementById('rotateButton').addEventListener('click', () => {
     
                        var v = document.getElementById('video');

                        navigator.mediaDevices.getUserMedia({

                            video: {

                                facingMode: {
                                    exact: 'environment'
                                }

                            }
                        }).then(stream => {

                            console.log("camera rotated");

                        }).catch((err) => {
                            console.log(err);
                        });


                    })

      }
    };
    
    })();
 

все остальные функции работают должным образом, хотя мое узкое место находится в этой функции поворота в приведенном выше файле js. если кто-нибудь, пожалуйста, заменит функцию поворота в соответствии с моим требованием, это исправит мою проблему. вся ваша помощь высоко ценится.