0

我使用 Blazor 创建了一个简单的 Qr 和条形码扫描应用程序。在手机上打开时，目前只能访问前置摄像头。但我需要旋转摄像头并访问后置摄像头。我使用 Zxing js 库扫描二维码和条形码，并使用 js-interop 访问了这个 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 组件

<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));
        }
}

我已经在barcode.js 文件中包含了旋转功能。但不工作。

    (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 文件中的这个旋转功能。如果有人请根据我的要求更换旋转功能，它将纠正我的问题。非常感谢您的所有帮助。

4

0 回答 0