R
Join ServerReactiflux
react-forum
Capture image with webcam and send it to API as base64 or as image (buffer?)
Ccasarin10/18/2022
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
How can I do that? I found nothing clear on internet 😦 maybe I am not understanding well
UUUnknown User10/18/2022
2 Messages Not Public
Sign In & Join Server To View
Jjoeydi10/18/2022
@casarin - Hey I took some time this afternoon to get this set up: https://webcamupload.netlify.app/
Solution
Jjoeydi10/18/2022
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>
);
}
Jjoeydi10/18/2022
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);
}
}
Jjoeydi10/18/2022
This is using the Cloudinary API and Node.js SDK for the uploads, but you could swap out whatever API you wanted.
Ccasarin10/19/2022
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
Ccasarin10/19/2022
hey @joeydi what a cool implementation, lol!
I think this would fit as the solution for the topic 😄
I think this would fit as the solution for the topic 😄
Ccasarin10/19/2022
thanks a lot!
UUUnknown User10/19/2022
Message Not Public
Sign In & Join Server To View