Web API Dünyası | Yerel Ağ Üzerinde Ekran Paylaşımı

Merhabalar,

Web API Dünyası serisinin ikinci yazısında Screen Capture API ve Web Socket API’yı ele alacağız.

Peki bu API’lar ne işe yarıyor?

Screen Capture API, temel olarak ekran kayıt ve paylaşımı için kullanılan bir arayüzdür. navigator objesi altında bulunan getDisplayMedia fonksiyonu ile video elementi özelliklerinden srcObject’te kullanılabilen bir veri formatıyla ekran görüntüsünün yakalanmasını sağlar.

WebSocket API, temel olarak bir mesajlaşma/iletişim arayüzüdür. Bir sunucu ve tarayıcı arasında olay temelli mesajlaşma imkanı sağlar. Mesaj gönderildiğinde ve alındığında istemci ve sunucu haberdar edilir, bu özellik sayesinde mesajlaşma uygulamalarında sıkça tercih edilmektedir. WebSocket API’ya alternatif olarak en sık Socket.IO kütüphanesi kullanılmaktadır.

Elimizdeki bu iki arayüzle, ReactJS kullanarak yerel ağ üzerinde ekran paylaşımı yapmamızı sağlayan basit bir uygulama hazırladım.

Öncelikle, NodeJS ile kurduğum temel bir WS(Web Socket) servisini inceleyelim;

Bu yapı, WS kütüphanesini kullanarak yerel ağ üzerinde 8080 portuna bir Web Socket sunucusu kurmamızı sağlıyor. İhtiyacımız bu sunucu üzerinden veri aktarımı sağlamak olduğu için sadece tek bir görev vermeyi tercih ettim. Kendisine gelen mesajları receive fonksiyonu ile alıp, send fonksiyonu ile geri gönderiyor.

Tam bu noktada mimarimize de bir göz atalım:

ScreenOutput component’inin içeriğini tanımlayalım;

startRecording Fonksiyonu

• navigator.mediaDevices objesi altında bulunan getDisplayMedia async fonksiyonu ile video konferans platformlarında gördüğümüz bir ekran erişim izniyle birlikte ekran yakalama aksiyonunu başlatır.
• WebSocket sınıfından üretilen WS nesnesinin send method’u ile WebSocket sunucusuna getFrame fonksiyonundan aldığı veriyi gönderir.

getFrame Fonksiyonu

startRecording fonksiyonunda çağırılırken aldığı video nesnesini, canvas elementini kullanarak 2 boyutlu png formatında bir SVG verisine dönüştürür.

Bu iki fonksiyon sayesinde, yakalanan ekran görüntüsü katmanlara bölünerek SVG görsel parçaları olarak WebSocket sunucusuna gönderilir.

getDisplayMedia bir video objesi gönderdiği için ref yardımıyla video elementi ile bu obje birbiriyle eşleştirilir. Bu sayede, ekran yakalamayı başlattığımız andan itibaren ScreenOutput component’i içerisinde bu görüntüyü bizim de görmemiz sağlanır.

Yazımızın bu adımına kadar, WebSocket sunucusuna ekran yakalama verisinin gönderilmesi ve sunucudan bağımsız olarak aynı sayfada bulunan video elementinde bu verinin görüntülenmesi işlemlerini tamamladık.

Ağımızdaki diğer insanların bu veriye ulaşabilmesi için ClientPage component’ini kullanacağız.

ClientPage component’inin temel görevi WebSocket’in bize sunduğu olay temelli mesaj gönderme özelliğini kullanmaktır. Bunun için, onmessage method’unu kullanır ve WS sunucusuna her mesaj gönderildiğinde bu fonksiyon tetiklenir.

useState yardımıyla, outputImage değeri her mesaj geldiğinde setImage ile güncellenir ve istemci ekranında yeni katmanın görüntülenmesi sağlanır.

Bu sayede, aktarılan görüntüler birleşip yavaşlatılmış bir video görünümü oluşturur. Bu da ekran paylaşımı işleminin gerçekleşmesini sağlar.

Uygulamanın kaynak kodlarına bu repository üzerinden erişebilirsiniz.

Vakit ayırdığınız için teşekkürler…