joaocasarin
joaocasarin2y 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
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
joeydi
joeydi2y ago
@casarin - Hey I took some time this afternoon to get this set up: https://webcamupload.netlify.app/
Solution
joeydi
joeydi2y 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
joeydi2y 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
joaocasarin2y 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!