using react.js and node.js
Page 1 of 1
using react.js and node.js
This is for troubleshooting an app i found on YT
- Code:
Pre-Requsits:
npm install -g create-react-app
npx create-react-app selfie
~~~~~~~~~~~~~~
save this App.js file
App.js
import React, { useEffect, useRef } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
function App() {
let videoRef=useRef(null);
let photoRef=useRef(null)
const getVideo=() => {
navigator.mediaDevices
.getUserMedia({
video: true
})
.then((stream) => {
let video=videoRef.current;
video.srcObject=stream;
video.play();
})
.catch((err) => {
console.error(err);
});
};
const takePicture=() => {
const width=400
const height=width / (16 / 9)
let video=videoRef.current
let photo=photoRef.current
photo.width=width
photo.height=height
let ctx=photo.getContext('2d')
ctx.drawImage(video, 0, 0, width, height)
}
const clearImage=() => {
let photo=photoRef.current
let ctx=photo.getContext('2d')
ctx.clearRect(0,0,photo.width,photo.height)
}
useEffect(() => {
getVideo();
}, [videoRef]);
return (
<div className="container">
<h1 className="text-center">Camera Selfie App in React</h1>
<video ref={videoRef} className="container"></video>
<button onClick={takePicture} className="btn btn-danger container">Take Picture</button>
<canvas className="container" ref={photoRef}></canvas>
<button onClick={clearImage} className="btn btn-primary container">Clear Image</button>
<br/><br/>
</div>
);
}
export default App;
(end of file)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
run this
npm i bootstrap
and to start type
npm start
so how i got mine working was i found a duplicate folder called selfie which itself the container was aleady called
selfie so i went into the new selfie folder anc cut out the files into the selfie folder below it and merged the files into 1 place and then put a copy of the App.js intothe src folder then itworked!
also you can customise the port if already in use so i chose oprt 3002
navigate to
localhost:3002
to test!
Also editing package.json file and add port there, example below!
"start": "PORT=3002 react-scripts start",
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
https://codingshiksha.com/react/react-js-webcam-project-to-take-selfie-picture-and-display-it-in-browser-using-useeffect-useref-hooks-in-javascript-full-project-for-beginners
https://youtu.be/0iteBJ-fuRA
Similar topics
» Node.js FFMPEG Project to Add 3D & 8D Effect to Audio MP3 File Using apulsator Filter in Express
» Node MCU ESP 8266 Text To I2C LCD Example
» ESP8266 NODE MCU Setup With Arduino IDE
» Keeping Your ESP8266 NODE MCU IoT Projects Secure
» Keeping Your ESP8266 NODE MCU IoT Projects Secure
» Node MCU ESP 8266 Text To I2C LCD Example
» ESP8266 NODE MCU Setup With Arduino IDE
» Keeping Your ESP8266 NODE MCU IoT Projects Secure
» Keeping Your ESP8266 NODE MCU IoT Projects Secure
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
|
|