{"id":13807980,"url":"https://github.com/sabitertan/BlazorBarcodeScanner","last_synced_at":"2025-05-14T02:31:02.829Z","repository":{"id":38065517,"uuid":"286023404","full_name":"sabitertan/BlazorBarcodeScanner","owner":"sabitertan","description":"Barcode Scanner component for Blazor using zxing-js Interop","archived":false,"fork":false,"pushed_at":"2024-02-14T13:05:48.000Z","size":63551,"stargazers_count":91,"open_issues_count":4,"forks_count":35,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-08-04T01:09:05.643Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sabitertan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-08T10:39:36.000Z","updated_at":"2024-07-29T19:50:20.000Z","dependencies_parsed_at":"2024-06-21T16:58:50.028Z","dependency_job_id":"cba44c43-3d6e-4066-bfb2-3940df314181","html_url":"https://github.com/sabitertan/BlazorBarcodeScanner","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sabitertan%2FBlazorBarcodeScanner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sabitertan%2FBlazorBarcodeScanner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sabitertan%2FBlazorBarcodeScanner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sabitertan%2FBlazorBarcodeScanner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sabitertan","download_url":"https://codeload.github.com/sabitertan/BlazorBarcodeScanner/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273206,"owners_count":17448069,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T01:01:33.165Z","updated_at":"2024-11-19T00:30:29.732Z","avatar_url":"https://github.com/sabitertan.png","language":"C#","funding_links":[],"categories":["Libraries \u0026 Extensions"],"sub_categories":["2D/3D Rendering engines"],"readme":"![Nuget](https://img.shields.io/nuget/v/BlazorBarcodeScanner.ZXing.JS?style=flat-square)\n![build](https://github.com/sabitertan/BlazorBarcodeScanner/actions/workflows/main.yml/badge.svg)\n# BlazorBarcodeScanner\nBarcode Scanner component for Blazor using [zxing-js](https://github.com/zxing-js/library) Interop\n\n## Demo\n[https://sabitertan.github.io/BlazorBarcodeScanner/](https://sabitertan.github.io/BlazorBarcodeScanner/)\n\n## Prerequisites\n\nBefore you continue, please make sure you have the latest version of Visual Studio and .NET 6+ installed. Visit official [Blazor](https://dotnet.microsoft.com/apps/aspnet/web-apps/client) site to learn more.\n\n## Installation\n\n### 1. NuGet packages\n\n```\nInstall-Package BlazorBarcodeScanner.ZXing.JS\n```\n\nor\n\n```\ndotnet add package BlazorBarcodeScanner.ZXing.JS\n```\n\n### 2. Refence to JS libraries\n\nAdd following lines to `wwwroot\\index.html` (for server side `_Host.cshtml`) before `\u003c/body\u003e` tag.\n\n```html\n    \u003cscript src=\"_content/BlazorBarcodeScanner.ZXing.JS/zxingjs.index.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"_content/BlazorBarcodeScanner.ZXing.JS/BlazorBarcodeScanner.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nAdd reference to your `.razor` page/component for this library\n\n```cs\n@using BlazorBarcodeScanner.ZXing.JS\n```\n\nAdd following component ( with `default parameters `) to anywhere you want in your page/component\n\n```html\n\u003cBlazorBarcodeScanner.ZXing.JS.BarcodeReader /\u003e\n```\n\nor with `custom parameters` ( below shows default values of parameters)\n\n```html\n\u003cBlazorBarcodeScanner.ZXing.JS.BarcodeReader\n    Title=\"Scan Barcode from Camera\"\n    StartCameraAutomatically=\"false\"\n    ShowStart=\"true\"\n    ShowReset=\"true\"\n    ShowToggleTorch = \"true\"\n    ShowVideoDeviceList=\"true\"\n    VideoWidth=\"300\"\n    VideoHeight=\"200\"\n /\u003e\n\n```\n\nNote that `ShowToggleTorch` is an experimental feature.\n\n### Receiving callbacks\n#### OnBarcodeReceived\nThe library raises a custom event, whenever the barcode scanner sucessfully decoded a value from video stream. You can attach to that event using the component's Blazor `EventCallback` named `OnBarcodeReceived`.\n\nSee the corresponding fragments in the code blocks below:\n\n```html\n\u003cBlazorBarcodeScanner.ZXing.JS.BarcodeReader\n    ...\n    OnBarcodeReceived=\"LocalReceivedBarcodeText\"\n /\u003e\n```\n\n```cs\n    private string LocalBarcodeText;\n\n    private void LocalReceivedBarcodeText(BarcodeReceivedEventArgs args)\n    {\n        this.LocalBarcodeText = args.BarcodeText;\n        StateHasChanged();\n    }\n```\n\n#### OnDecodingChanged\nIn case you need to react on changed decoding states (e.g. hide and display the camera view in your page), you can hook up to this callback.\n#### OnErrorReceived\nLibrary raises this event when there is a generic error happens, for example no video source available or user didn't give permissions.\n#### OnNotFoundReceived\nLibrary raises this event when an error happens while decoding.\n#### VideoInputDevicesChanged\nLibrary raises this event when the list of available input devices changes.\n#### SelectedVideoInputIdChanged\nLibrary raises this event when the selected video device changes.\n\n### Capturing a picture from the stream\n#### Direct capture\nIn some applications it might be useful to take a still image of the video stream while decoding.\nTherefor the component features an API call to capture such an image as base64 encoded JPEG image.\n```html\n    \u003cBlazorBarcodeScanner.ZXing.JS.BarcodeReader @ref=\"_reader\"\n        ...\n    /\u003e\n    \u003cbutton @onclick=\"OnGrabFrame\"\u003eGrab image\u003c/button\u003e\n    \u003c!-- If there is no source URL, we hide the image to avoid he \"broken image\" icons... --\u003e\n    \u003cimg src=\"@_img\"  style=\"@(string.IsNullOrWhiteSpace(_imgSrc) ? \"display:none;\" : \"\")\" /\u003e\n```\n\n```cs\n    ...\n    private BarcodeReader _reader;\n    private string _img = string.Empty;\n\n    private void OnGrabFrame(MouseEventArgs args)\n    {\n        _imgSrc = await _reader.Capture();\n        StateHasChanged();\n    }\n```\n\n##### Retrieving the picture for the last code decoded\nIn some applications it might be useful to take a still image of the frame that just decoded the last barcode.\nThis functionality can be enabled by setting the `DecodedPictureCapture` attribute to `true`. This will cause the component to store last image successfully decoded.\nUpon sucessful deciding (e.g. reception of `OnCodeReceived`), the picture can be accessed by invoking `CaptureLastDecodedPicture`.\n\n**Warning**: Bear in mind that capturing those pictures might impair performance, CPU load or battery life.\n\n### Setting stream quality\nWhile keeping resolution low speeds up image processing, it might yield poor detection performance due to the limited image quality.\n\nIn order to allow the application to trade speed for quality, the stream resolution can be set by the application through the following `custom parameters`:\n  - StreamWidth\n  - StreamHeight\n\nIf set to `null` or `0`, a default (browser dependent?) resolution is applied (e.g. 640px by 480px). If set to any number `\u003e0`, the camera stream is requested with the given setting. The settings are used as `ideal` constraint for `getUserMedia` (see [constraints doc](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints#specifying_a_range_of_values). Doing so allows for achieving highest resolution by requesting rediculous high numbers for either dimension, causing  the browser to fall back to the maximum feasable for the device of choice.\n\n**Warning**: While increasing the stream resolution might improve your application's code reading performance, it might greatly affect the over all user experience (e.g. through a drop of the frame rate, increased CPU usage, bad battery life, ...)\n\n### Supported Formats\nThis library uses auto-detect feature of zxing-js library. It supports variety of barcode types. For more information: [zxing-js supported types](https://github.com/zxing-js/library#supported-formats)\n\n### ImageCapture Support\nThis library uses Media API's ImageCapture, this is an experimental feauture on Firefox. You may want to implement [ImageCapture Polyfill](https://github.com/GoogleChromeLabs/imagecapture-polyfill) in order to use image capturing feature.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsabitertan%2FBlazorBarcodeScanner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsabitertan%2FBlazorBarcodeScanner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsabitertan%2FBlazorBarcodeScanner/lists"}