joaocasarin•2y ago

Capture image with webcam and send it to API as base64 or as image (buffer?)

So, the idea is to capture an image using the laptop webcam on React, and after getting the image, send it to an API either as a base64 string or as an image (maybe this last one would be a buffer?) How can I do that? I found nothing clear on internet 😦 maybe I am not understanding well

Solution:

```js import { useEffect, useRef, useState } from "react"; export default function Home() { const videoRef = useRef();...

Jump to solution

5 Replies

Unknown User•2y ago

Message Not Public

joeydi•2y ago

@casarin - Hey I took some time this afternoon to get this set up: https://webcamupload.netlify.app/

Solution

joeydi•2y ago

import { useEffect, useRef, useState } from "react";

export default function Home() {
    const videoRef = useRef();
    const canvasRef = useRef();
    const [imageUrl, setImageUrl] = useState();

    useEffect(() => {
        if (navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices
                .getUserMedia({ video: true })
                .then(function (stream) {
                    videoRef.current.srcObject = stream;
                    videoRef.current.play();
                })
                .catch(function (error) {
                    console.log("Something went wrong!", error);
                });
        }
    }, []);

    const takePicture = function () {
        const context = canvasRef.current.getContext("2d");
        context.drawImage(videoRef.current, 0, 0, 640, 480);
    };

    const uploadPicture = async function () {
        const image = canvasRef.current.toDataURL("image/png");
        const response = await fetch("/api/upload", {
            method: "POST",
            body: image,
        });
        const data = await response.json();
        setImageUrl(data.secure_url);
    };

    return (
        <div className="container">
            <video ref={videoRef} width="640" height="480" />

            <div className="controls">
                <canvas ref={canvasRef} width="640" height="480"></canvas>
                <div>
                    <button onClick={takePicture}>Take Picture</button>
                    <br />
                    <button onClick={uploadPicture}>Upload Picture</button>
                    <br />
                </div>
            </div>
            {imageUrl && (
                <a href={imageUrl} target="_blank" rel="noopener noreferrer">
                    {imageUrl}
                </a>
            )}
        </div>
    );
}

import { useEffect, useRef, useState } from "react";

export default function Home() {
    const videoRef = useRef();
    const canvasRef = useRef();
    const [imageUrl, setImageUrl] = useState();

    useEffect(() => {
        if (navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices
                .getUserMedia({ video: true })
                .then(function (stream) {
                    videoRef.current.srcObject = stream;
                    videoRef.current.play();
                })
                .catch(function (error) {
                    console.log("Something went wrong!", error);
                });
        }
    }, []);

    const takePicture = function () {
        const context = canvasRef.current.getContext("2d");
        context.drawImage(videoRef.current, 0, 0, 640, 480);
    };

    const uploadPicture = async function () {
        const image = canvasRef.current.toDataURL("image/png");
        const response = await fetch("/api/upload", {
            method: "POST",
            body: image,
        });
        const data = await response.json();
        setImageUrl(data.secure_url);
    };

    return (
        <div className="container">
            <video ref={videoRef} width="640" height="480" />

            <div className="controls">
                <canvas ref={canvasRef} width="640" height="480"></canvas>
                <div>
                    <button onClick={takePicture}>Take Picture</button>
                    <br />
                    <button onClick={uploadPicture}>Upload Picture</button>
                    <br />
                </div>
            </div>
            {imageUrl && (
                <a href={imageUrl} target="_blank" rel="noopener noreferrer">
                    {imageUrl}
                </a>
            )}
        </div>
    );
}

joeydi•2y ago

const cloudinary = require("cloudinary").v2;

cloudinary.config({ secure: true });

export default async function handler(req, res) {
    try {
        const result = await cloudinary.uploader.upload(req.body, {
            folder: "webcamtest",
        });
        res.status(200).json(result);
    } catch (error) {
        res.status(500).json(error);
    }
}

const cloudinary = require("cloudinary").v2;

cloudinary.config({ secure: true });

export default async function handler(req, res) {
    try {
        const result = await cloudinary.uploader.upload(req.body, {
            folder: "webcamtest",
        });
        res.status(200).json(result);
    } catch (error) {
        res.status(500).json(error);
    }
}

This is using the Cloudinary API and Node.js SDK for the uploads, but you could swap out whatever API you wanted.

joaocasarin•2y ago

yo, thanks for that link, it wasnt available when i searched for the subject... just for curiosity, what did you mean with "Hope ethos is being considered"? ahhaha hey @joeydi what a cool implementation, lol! I think this would fit as the solution for the topic 😄 thanks a lot!