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();...
UU
Unknown User548d ago
J
joeydi548d ago
@casarin - Hey I took some time this afternoon to get this set up: https://webcamupload.netlify.app/
Solution
J
joeydi548d 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>
);
}
J
joeydi548d 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.
J
joaocasarin548d 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!
UU
Unknown User548d ago