What is Camera Connectivity with React?

React is a JavaScript library widely used for user interface development. With React, WebRTC 
and the getUserMedia API can be used to stream real-time video using the camera on users' 
devices. This allows for interactive and dynamic content delivery in web applications.

When setting up WebRTC cross-browser communication, the getUserMedia API only 
receives audio and video data from the user's device. This data is returned as a 
MediaStream object.
Required API and Components
getUserMedia API: Used to access the user's microphone and camera from the browser. This 
API allows to get the device's media stream by getting permission from the user.
MediaStream: The stream obtained with the getUserMedia API represents audio and video 
data received from the user. This stream can be displayed in the user interface through 
video and audio elements.
Working Principle of Camera Connection with React
Camera connection with React is realized with the following steps:
Getting User Permission: The getUserMedia function is called to get microphone and camera 
access permission from the user. This step is required due to the security measures of the 
browser.

We write the necessary useEffect to call the StartCamera function when the component is 
rendered and stop the video stream in case of switching to a different page or a different 
component.

getUserMedia API Security
The getUserMedia API only works over secure connections (HTTPS). This is designed to 
protect users' privacy.
What is facinMode and How to Use it
facingMode is a property of the getUserMedia API and is used to specify which camera to 
use on the device. It usually takes two main values:
"user" is used for the front camera and "environment" for the rear camera

Access to Device Flash
Access to the camera flash is not very well supported on the web, and according to my 
research there is only one way for React to control the camera flash.

A track represents a stream of all video or audio data coming from a given media source. 
The Stream.getVideoTracks()[0] method refers to retrieving data from the main video source 
(e.g. the front or rear camera of the device).
applyConstraints is a function used to apply new constraints to a MediaStreamTrack object. 
We looked at the demo of the @blackbox-vision/use-torch-light library, which uses a 
method similar to this structure, but it was observed that the ability to access the flash of 
the camera did not work. 
The operability of the code could not be tested because the computer does not have a rear 
camera and flash and the project cannot be opened on phones due to the fact that it works 
on localhost.

Add Zoom Effect to Video
By adding transform css feature to the video, the video was zoomed in and out.