R
Reactiflux

react-forum

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

Jjoaocasarin10/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
Solution:
```js import { useEffect, useRef, useState } from "react"; export default function Home() { const videoRef = useRef();...
Jump to solution
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>
);
}
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);
}
}
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.
Jjoaocasarin10/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 hey @joeydi what a cool implementation, lol! I think this would fit as the solution for the topic 😄 thanks a lot!
UUUnknown User10/19/2022
Message Not Public
Sign In & Join Server To View

Looking for more? Join the community!