PC & IT SUPPORT MADE EASY FORUM
Would you like to react to this message? Create an account in a few clicks or log in to continue.

using react.js and node.js

Go down

using react.js and node.js Empty using react.js and node.js

Post by jamied_uk 15th January 2022, 16:59

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





YT Vid Project
jamied_uk
jamied_uk
Admin

Posts : 2943
Join date : 2010-05-09
Age : 41
Location : UK

https://jnet.sytes.net

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum