How to use a webcam/camera?

[JaneX8]

Have you read the Documentation Contribution Guidelines?

• I have read the Documentation Contribution Guidelines.

Description

Only barely mentioned here:

• #2997 (comment)
• https://wails.io/docs/guides/signing/#macos

How to use the webcam/camera feed in a Wails app?

Self-service

• I'd be willing to address this documentation request myself.

[hughie21]

Hi, how about using navigator.mediaDevices, a front-end API, this works on the Wails app.

A simple exmple like:

function handleMediaStream(MediaStream) {
    console.log('MediaStream Object：', MediaStream)
    const video = document.createElement('video');
    video.controls = true;
    video.srcObject = MediaStream;
    video.onloadedmetadata = function () {
        video.play();
    };
    var container = document.getElementById('videoContainer');
    container.appendChild(video);
};

function getUserMedia() {
    try {
        const options = {
            audio: true, 
            video: true,
        }
        if (navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia(options).then(function (MediaStream) {
                handleMediaStream(MediaStream)
            }).catch(function (err) {
                console.error(err);

            })
        }
        else if (navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia) {
            try {
                navigator.getUserMedia(options, function (MediaStream) {
                    handleMediaStream(MediaStream)
                }, function (err) {
                    console.error(err);
                })
            } catch (error) {
                console.error(err);
            }
        } else {
            console.error("Your browser does not support getUserMedia API");
        }
    } catch (error) {
        console.error(error);
    }
};
getUserMedia();