Razor-Camera-Library

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

Build

cd RazorCameraLibrary
dotnet build --configuration Release

Visit original content creator repository
https://github.com/yushulx/Razor-Camera-Library

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *