Javascript Screen Capture Api Üzerinden Ses ve Görüntü Kaydı

Yaklaşık 10 yıldır web sitesi üzerinden görüntü kaydına (video) kaydı sağlayan web siteleri mevcut ancak belirtilen sitelere artık muhtaç değiliz. Screen capture api ile kolayca gerçekleştirebiliriz.

Basit olarak capture işlemini şu şekilde başlatabiliyoruz:

navigator.mediaDevices.getDisplayMedia({video: true,DisplayCaptureSurfaceType:”browser”})

getDisplayMedia ile gördüğünüz gibi bir option Json’u alarak bizden şunun gibi bir pencere ile onay bekleyecek:

Ardından stream MediaStream objemizi bize verecek ve biz de kolayca işlemleri gerçekleştireceğiz. Kod olarak şu şekilde:

navigator.mediaDevices.getDisplayMedia({video: true,DisplayCaptureSurfaceType:"browser"}).then(stream => { console.log("Permission alındı.");}

Evet şu anda streami bir çok şeye bağlayabiliriz. Örnek olarak direkt olarak html video componentine bağlayalım:

videoElem.srcObject=stream;

Evet bu kadar kolay artık ekranınızın bir kopyasını sayfanızda görebilirsiniz.

Şimdi gelelim videoyu nasıl kaydedeceğimize. MediaRecorder kullanacağız ve tabi ki aynı şekilde streamimizi vereceğiz şu şekilde:

mediarecorder=new MediaRecorder(stream);

Tabiki recordu başlatmak ve durdurmak için start stop metodlarını kullanacağız. Örnek olarak butonların onclicklerinde start stop metodlarını çağırabiliriz.

Start ve stop işlemlerini birden fazla kez yapabiliriz. ondataavailable ile verimizi kullanabileceğimiz bir kaynağa aktarırız.

MediaRecorder’ın stopunda ise ben direkt olarak videoyu indirme linkini vermesini istedim. Siz indirme işlemini ayrı bir buttona da aktarabilirsiniz ki çok da mantıklı olur.

ondataavailable içindeki metoda yakından bakarsak:

mediarecorder.ondataavailable=function(e){chunks.push(e.data)}

Yaptığı işlem sadece bir listeye veriyi push yapmaktır.

onstop’a bakacak olursak:

mediarecorder.onstop=function(ev){let blob=new Blob(chunks,{type:"video/mp4"});let videourl=window.URL.createObjectURL(blob);}

bir blob objesi oluşturuyoruz listemizden ve oluşturulan objenin linkini alıyoruz.

İşte bu kadar basit. Tabi günümüzde artık ekran kartı yazılımları da belirttiğimiz işlemi destekliyor ve iyi de çalışıyorlar ancak Cross browser ve Cross platform çalışabilmesi ile screen capture api ile işlemi yapmak mantıklı geliyor. Son olarak evet ses de destekliyor optionsa audio:true parametresini eklemeniz yeterli ses de kayıt etmek için.

Son olarak kodun hepsini paylaşalım:

Videoda Sesin de kaydedildiği örnek:

https://gist.github.com/anilkay/a1200ad352162d9611163f6fecf57f42

Kaynaklar

Computer Engineer,Sociologist, CSE Master Student

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store