React ile Kamera Bağlantısı Nedir?

React, kullanıcı arayüzü geliştirmek için yaygın olarak kullanılan bir JavaScript kütüphanesidir. 
Kullanıcıların cihazlarındaki kamerayı kullanarak gerçek zamanlı video akışı elde etmek için 
React ile WebRTC ve getUserMedia API'si kullanılabilir. Bu, web uygulamalarında etkileşimli 
ve dinamik içerik sunma imkanı tanır.


WebRTC tarayıcılar arası iletişimi kurarken getUserMedia API’si yalnızca kullanıcının 
cihazından gelen ses ve görüntü verilerini alır. Bu verilerde MediaStream nesnesi olarak 
döndürülür.
Gerekli API ve Bileşenler
getUserMedia API: Tarayıcıdan kullanıcının mikrofon ve kameraya erişim sağlamak için 
kullanılır. Bu API, kullanıcıdan izin alarak cihazın medya akışını elde etmeyi sağlar.
MediaStream: getUserMedia API'si ile elde edilen akış, kullanıcıdan alınan ses ve video 
verilerini temsil eder. Bu akış, video ve ses öğeleri aracılığıyla kullanıcı arayüzünde 
gösterilebilir.
React ile Kamera Bağlantısının Çalışma Prensibi
React ile kamera bağlantısı şu adımlarla gerçekleştirilir:
Kullanıcı İzni Alma: Kullanıcıdan mikrofon ve kamera erişim izni almak için getUserMedia 
fonksiyonu çağrılır. Bu adım, tarayıcının güvenlik önlemleri nedeniyle gereklidir.

StartCamera fonksiyonunu component render edildiğinde çağırmak ve farklı bir sayfa veya 
farklı bir componente geçilmesi durumunda video akışının durdurmak için gerekli useEffect’i 
yazıyoruz.

getUserMedia API'si Güvenliği
getUserMedia API'si, yalnızca güvenli bağlantılar (HTTPS) üzerinden çalışır. Bu, kullanıcıların 
gizliliğini korumak için tasarlanmıştır.
facinMode Nedir Nasıl Kullanılır
facingMode, getUserMedia API'sinin bir özelliğidir ve cihazda hangi kameranın kullanılacağını 
belirtmek için kullanılır. Genellikle iki ana değer alır:
“user" ön kamera için, "environment" arka kamera için kullanılır. 

Cihazın Flash’ına Erişim
Web’de kameranın flashına erişim çok fazla desteklenmemekte olunup React için kamera 
flash’ının kontrolü için araştırmalarıma göre sadece bir yol bulunmaktadır.

Track, belirli bir medya kaynağından gelen tüm video veya ses verilerinin akışını temsil eder. 
Stream.getVideoTracks()[0] yöntemi ana video kaynağından (örn cihazın ön veya arka 
kamerası) verilerin alınmasını anlamına gelmektedir.
applyConstraints, bir MediaStreamTrack nesnesine yeni kısıtlamalar uygulamak için 
kullanılan bir fonksiyondur. 
Bu yapıya benzer bir yöntem kullanan @blackbox-vision/use-torch-light kütüphanesinin 
demosuna bakılmış lakin kameranın flash’ına erişim özelliğinin çalışmadığı gözlemlenmiştir.
Bilgisayarın arka kamerası ve flashı olmaması ve projenin localhost üzerinde çalışmasından 
kaynaklı telefonlarda açılamaması nedeni ile kodun çalışabilirliği denenememiştir.

Videoya Zoom Efekti Ekleme

Videoya transform css özelliği eklenerek videonun yakınlaştırılıp uzaklaştırılması 
sağlanmıştır.