Blazor组件自做三 : 使用JS隔离封装ZXing扫码

import '/lib/zxing/zxing.min.js';
var codeReader = null;
export function init(autostop, wrapper, options) {
    console.log('autostop' + autostop);

    let selectedDeviceId;
    //const codeReader = new ZXing.BrowserBarcodeReader()
    codeReader = new ZXing.BrowserMultiFormatReader()
    console.log('ZXing code reader initialized')
    codeReader.getVideoInputDevices()
        .then((videoInputDevices) => {
            const sourceSelect = document.getElementById('sourceSelect')
            selectedDeviceId = videoInputDevices[0].deviceId
            console.log('videoInputDevices:' + videoInputDevices.length);
            if (videoInputDevices.length > 1) {
                videoInputDevices.forEach((element) => {
                    const sourceOption = document.createElement('option')
                    sourceOption.text = element.label
                    sourceOption.value = element.deviceId
                    sourceSelect.appendChild(sourceOption)
                    selectedDeviceId = element.deviceId;
                })

                sourceSelect.onchange = () => {
                    selectedDeviceId = sourceSelect.value;
                    codeReader.reset();
                    StartScan();
                }

                const sourceSelectPanel = document.getElementById('sourceSelectPanel')
                sourceSelectPanel.style.display = 'block'
            }

            StartScan(autostop);

            document.getElementById('startButton').addEventListener('click', () => {
                StartScan();
            })

            function StartScan(autostop) {
                codeReader.decodeOnceFromVideoDevice(selectedDeviceId, 'video').then((result) => {
                    console.log(result)
                    document.getElementById('result').textContent = result.text

                    var supportsVibrate = "vibrate" in navigator;
                    if (supportsVibrate) navigator.vibrate(1000);

                    if (autostop) {
                        console.log('autostop');
                        codeReader.reset();
                        return wrapper.invokeMethodAsync("invokeFromJS", result.text);
                    } else {
                        console.log('None-stop');
                        codeReader.reset();
                        wrapper.invokeMethodAsync("invokeFromJS", result.text);
                    }

                }).catch((err) => {
                    console.error(err)
                    document.getElementById('result').textContent = err
                })
                console.log(`Started continous decode from camera with id ${selectedDeviceId}`)
            }

            document.getElementById('resetButton').addEventListener('click', () => {
                document.getElementById('result').textContent = '';
                codeReader.reset();
                console.log('Reset.')
            })

            document.getElementById('closeButton').addEventListener('click', () => {
                document.getElementById('result').textContent = '';
                codeReader.reset();
                console.log('closeButton.')
                wrapper.invokeMethodAsync("invokeFromJSClose");
            })

        })
        .catch((err) => {
            console.error(err)
        })
}
export function destroy(options) {
    if (undefined !== codeReader && null !== codeReader && options.id == codeReader.element.id) {
        codeReader.destroy();
        console.log(codeReader.element.id, 'destroy');
    }
}

@implements IAsyncDisposable
@namespace Blazor100.Components
@inject IJSRuntime JS


    

        

            
            


                @ScanBtnTitle
                @ResetBtnTitle
                @CloseBtnTitle

                

                    @SelectDeviceBtnTitle:
                    
                    
                
                

                    
                

            
        
    

@Result


@code {
    /// 

    /// BarcodeScanner 条码扫描
    /// 

    /// 

    /// 扫码按钮文本/Scan button title
    /// 
    [Parameter]
    public string ScanBtnTitle { get; set; } = "扫码";

    /// 

    /// 复位按钮文本/Reset button title
    /// 
    [Parameter]
    public string ResetBtnTitle { get; set; } = "复位";

    /// 

    /// 关闭按钮文本/Close button title
    /// 
    [Parameter]
    public string CloseBtnTitle { get; set; } = "关闭";

    /// 

    /// 选择设备按钮文本/Select device button title
    /// 
    [Parameter]
    public string SelectDeviceBtnTitle { get; set; } = "选择设备";


    /// 

    /// 扫码结果回调方法/Scan result callback method
    /// 
    [Parameter]
    public EventCallback ScanResult { get; set; }

    /// 

    /// 关闭扫码框回调方法/Close scan code callback method
    /// 
    [Parameter]
    public EventCallback Close { get; set; }


    /// 

    /// 扫码结果/Scan result
    /// 
    [Parameter]
    public string? Result { get; set; }

    /// 

    /// 显示扫码框/Show scan box
    /// 
    [Parameter]
    public bool ShowScanBarcode { get; set; }

    private IJSObjectReference? module;

    // To prevent making JavaScript interop calls during prerendering
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        try
        {
            if (!firstRender) return;
            module = await JS.InvokeAsync("import", "./lib/zxing/zxingjs.js");
            await module.InvokeVoidAsync("init", true, DotNetObjectReference.Create(this), null); //组件实例封装：DotNetObjectReference.Create(this)
        }
        catch (Exception e)
        {
            if (OnError != null) await OnError.Invoke(e.Message);
        }

    }

    [JSInvokable("invokeFromJS")]
    public async Task ChangeValue(string val)
    {
        Result = val;
        StateHasChanged();
        await ScanResult.InvokeAsync(val);
    }

    [JSInvokable("invokeFromJSClose")]
    public async Task CloseScan()
    {
        await Close.InvokeAsync(null);
    }

    /// 

    /// 获得/设置 错误回调方法
    /// 
    [Parameter]
    public Func? OnError { get; set; }

    async ValueTask IAsyncDisposable.DisposeAsync()
    {
        if (module is not null)
        {
            //await module.InvokeVoidAsync("destroy", Options);
            await module.DisposeAsync();
        }
    }

}

@page "/barcodescanner"

条码扫描 BarcodeReader

扫描条码/QR码。


    扫码


@if (ShowScanBarcode)
{

    

}

@message

@code{

    /// 

    /// 显示扫码界面
    /// 
    bool ShowScanBarcode { get; set; } = false;

    /// 

    /// 条码
    /// 
    public string? BarCode { get; set; }

    private string? message;

    private Task OnError(string message)
    {
        this.message = message;
        StateHasChanged();
        return Task.CompletedTask;
    }

}