LWCでカメラキャプチャコンポーネントの実装

Lightning Web Component（LWC）を使用して、カメラからビデオをキャプチャし、画像をキャプチャするための簡単なカメラキャプチャコンポーネントを実装しています。

1.Start Video : カメラを初期化し、ビデオストリームを取得してビデオエレメントにセットします。navigator.mediaDevices.getUserMedia() メソッドを使用して、ユーザーのメディアデバイスにアクセスします。

2.Stop Video : カメラを停止します。video.srcObject.getTracks().forEach((track) => track.stop()); を使用して、ビデオストリームのトラックを停止します。

3.Capture Image : ビデオからキャプチャした画像を canvas に描画し、そのデータを取得して画像エレメントに表示します。

cameraCapture.html

<template>
    <div class="camera-wrapper">
        <lightning-button label="Start Video" class="slds-m-left_xx-small" onclick={initCamera}></lightning-button>
        <lightning-button label="Stop Video" class="slds-m-left_xx-small" onclick={stopCamera}></lightning-button>
        <lightning-button label="Capture Image" class="slds-m-left_xx-small" onclick={captureImage}></lightning-button>
    </div>
    <div class="slds-grid slds-gutters">
        <div class="slds-col">
            <video class="videoElement" autoplay></video>
            <canvas class="slds-hide canvas"></canvas>
        </div>
        <div class="slds-col">
            <img src="" class="slds-hide imageElement" alt="captured image"/>
        </div>
    </div>
</template>

cameraCapture.js

import {LightningElement} from 'lwc';

export default class CameraCapture extends LightningElement {
    videoElement;
    canvasElement;


    renderedCallback() {
        this.videoElement = this.template.querySelector('.videoElement');
        this.canvasElement = this.template.querySelector('.canvas');
    }


    async initCamera() {
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            try {
                this.videoElement.srcObject = await navigator.mediaDevices.getUserMedia({video: true, audio: false});
            } catch (error) {
                console.error('Error accessing the camera: ', JSON.stringify(error));
            }
        } else {
            console.error('getUserMedia is not supported in this browser');
        }
    }

    async captureImage() {
        if(this.videoElement && this.videoElement.srcObject !== null) {
            this.canvasElement.height = this.videoElement.videoHeight;
            this.canvasElement.width = this.videoElement.videoWidth;
            const context = this.canvasElement.getContext('2d');
            context.drawImage(this.videoElement, 0, 0, this.canvasElement.width, this.canvasElement.height);
            const imageData = this.canvasElement.toDataURL('image/png');
            const imageElement = this.template.querySelector('.imageElement');
            imageElement.setAttribute('src', imageData);
            imageElement.classList.add('slds-show');
            imageElement.classList.remove('slds-hide');
        }
    }

    async stopCamera(){
        const video = this.template.querySelector(".videoElement");
        video.srcObject.getTracks().forEach((track) => track.stop());
        video.srcObject = null;
        this.hideImageElement();
    }

    hideImageElement(){
        const imageElement = this.template.querySelector('.imageElement');
        imageElement.setAttribute('src', "");
        imageElement.classList.add('slds-hide');
        imageElement.classList.remove('slds-show');
    }
}

次の記事で、画像をOCRしてテキストをSalesforceに保存するように実装したいと思います。

上記のコードはこちらの記事を参考にしています。