joeydi
joeydi
PostsComments
RReactiflux
Created by joaocasarin on 10/18/2022 in #react-forum
Capture image with webcam and send it to API as base64 or as image (buffer?)
This is using the Cloudinary API and Node.js SDK for the uploads, but you could swap out whatever API you wanted.
11 replies
RReactiflux
Created by joaocasarin on 10/18/2022 in #react-forum
Capture image with webcam and send it to API as base64 or as image (buffer?)
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);
    }
}
11 replies
RReactiflux
Created by joaocasarin on 10/18/2022 in #react-forum
Capture image with webcam and send it to API as base64 or as image (buffer?)
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>
    );
}
11 replies
RReactiflux
Created by joaocasarin on 10/18/2022 in #react-forum
Capture image with webcam and send it to API as base64 or as image (buffer?)
@casarin - Hey I took some time this afternoon to get this set up: https://webcamupload.netlify.app/
11 replies