R
Reactiflux
react-forum
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 solution2 Messages Not Public
Sign In & Join Server To View
@casarin - Hey I took some time this afternoon to get this set up: https://webcamupload.netlify.app/
Solution
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>
);
}
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);
}
}
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!
Message Not Public
Sign In & Join Server To View
Looking for more? Join the community!
R
Reactiflux
react-forum
R
Reactiflux
react-forum
Want results from more Discord servers?
Recommended Posts✅ – alwye – 13-32 Oct 15Hey folks. What's the best to avoid ugly imports like this:
```
import { STATIC_BASE_URL } from '..anonn – 16-33 Oct 14How can I access the styles of an element before it is rendered?
I have implemented a custom progre🎃 Spookyberb 🎃 – 14-44 Oct 13How many paremeters would be considered bad code while passing to a function? 5? 10? Whats the unwri