RazorCameraLibrary 1.0.1

Razor Camera Library

A Razor Class Library built using the Dynamsoft JavaScript Camera Enhancer SDK, which provides a simple way to integrate camera access into Blazor applications.

Online Demo

https://yushulx.me/Razor-Camera-Library/

Quick Usage

• Import and initialize the Razor Camera Library.

  @using RazorCameraLibrary
  
  <div id="videoContainer"></div>
  
  @code {
      private CameraJsInterop? cameraJsInterop;
      private CameraEnhancer? cameraEnhancer;
  
      protected override async Task OnInitializedAsync()
      {
          cameraJsInterop = new CameraJsInterop(JSRuntime);
          await cameraJsInterop.LoadJS();
  
          cameraEnhancer = await cameraJsInterop.CreateCameraEnhancer();
          await cameraEnhancer.SetVideoElement("videoContainer");
      }
  }
  

• Get a list of available cameras.

  List<Camera> cameras = await cameraEnhancer.GetCameras();
  

• Set the camera resolution.

  await cameraEnhancer.SetResolution(640, 480);
  

• Open a camera.

  await cameraEnhancer.OpenCamera(cameras[0]);
  

• Acquire a camera frame for image processing.

  IJSObjectReference canvas = await cameraEnhancer.AcquireCameraFrame();
  

• Draw shapes on the camera overlay.

  await cameraEnhancer.DrawLine(0, 0, 100, 100);
  await cameraEnhancer.DrawText("Hello World", 0, 0);
  

• Clear the camera overlay.

  await cameraEnhancer.ClearOverlay();
  

API

Camera Class

Represents a camera device with its device ID and label.

CameraJsInterop Class

• Task LoadJS(): Loads and initializes the JavaScript module.
• Task<CameraEnhancer> CreateCameraEnhancer(): Creates a new CameraEnhancer instance.

CameraEnhancer Class

• Task<List<Camera>> GetCameras(): Gets a list of available cameras.
• Task SetVideoElement(string elementId): Sets a div element as the video container.
• Task OpenCamera(Camera camera): Opens a camera.
• Task CloseCamera(): Closes the current camera.
• Task SetResolution(int width, int height): Sets the resolution of the camera.
• Task<IJSObjectReference> AcquireCameraFrame(): Acquires a frame from the camera and returns a JavaScript canvas object reference.
• Task DrawLine(int x1, int y1, int x2, int y2): Draws a line on the camera overlay.
• Task DrawText(string text, int x, int y): Draws text on the camera overlay.
• Task ClearOverlay(): Clears the camera overlay.

Example

• Blazor Barcode Scanner

  

Build

cd RazorCameraLibrary
dotnet build --configuration Release