Use MediaDevices to display video stream from webcam in a React component.

MediaDevice.jsx

import { useRef } from 'react'

const MediaDevice = () => {
	const videoRef = useRef(null)

	const handleVideoOn = () => assignStream(videoRef.current)
	const handleVideoOff = () => videoRef.current.srcObject = null

	return (
		<div>
			<p>
				<button onClick={handleVideoOn}> Turn video on </button>
				<button onClick={handleVideoOff}> Turn video off </button>
			</p>
			<video ref={videoRef}> </video>
		</div>
	)
}

async function assignStream(videoElement, constraints = { video: true }) {
	const stream = await navigator.mediaDevices.getUserMedia(constraints)
	videoElement.srcObject = stream
	videoElement.addEventListener('loadedmetadata', () => {
		videoElement.play()
	})
}

export default MediaDevice