Javascript ile Basit Ekran Kaydedici Yazımı 📹

Bu yazıda sadece 20 satır js kodu ile sadece web tarayıcısını değil tüm ekranı kaydedebilen bir ekran kaydedici program yazmayı gösterdim. Ana mantığını anladıktan sonra kodu değiştirip istediğiniz projede kullanabilirsiniz.

Bu yazıda adım adım kodu anlatacağım. Projenin bitmiş halini aşağıda bulabilirsiniz.

Javascript ile ekran kaydetme

Öncelikle bu projede Ekran Yakalama Web API‘ını kullanacağız. Öncelikle bunu çağırmak için bir buton oluşturup tıklama fonksiyonunu oluşturuyorum.

Sizin önceden bir projeniz varsa sadece click eventlistenerı ekleyebilirsiniz. Ben buton oluşturup DOM’a ekledim.

const buton = document.createElement("button");
buton.innerHTML = "Kaydet";
document.body.append(buton);
buton.addEventListener("click", async () => {
  // Buraya kodlar gelecek
});

Sonra butonun üstte yazdığım click fonksiyonun içine kaydı başlatan kodu yazıyoruz.

Bu aşağıdaki kodda stream değişkeni oluşturdum. stream değişkenini yeni bir kaydedici nesne oluşturmak için kullanacağız.
Ardından kaydedici.start() diyerek ekran yakalamayı başlatabiliriz.

const stream = await navigator.mediaDevices.getDisplayMedia();
const kaydedici = new MediaRecorder(stream);
kaydedici.start();

Kodun şimdilik bu halinde sadece ekran yakalayıcı açabiliyoruz. Ekran yakalama özelliği çalışıyor şimdi videoyu çekip bilgisayara indirelim.

Son olarak butonun tıklanma fonksiyonun içine aşağıdaki kısmı da ekliyoruz.

Bu kodda kayıt bittiğinde videoyu alan bir kısım var, ardından kaydedici’de video hazır olduğunda çalıştırmak için bir event listener ekliyoruz.

Video hazır olduğunda bir a tag’i yani Hyperlink tagi ekleyip URL adresinde kayıt adresini ekledik.
Ardından butona kod ile tıklıyoruz ve kayit.webm dosyasını otomatik indiriyor.

const [video] = stream.getVideoTracks();
  video.addEventListener("ended", () => {
    kaydedici.stop();
  });

  kaydedici.addEventListener("dataavailable", (evt) => {
    const a = document.createElement("a");
    a.href = URL.createObjectURL(evt.data);
    a.download = "kayit.webm";
    a.click();
  });

Kaydedici tüm kodları

const buton = document.createElement("button");
buton.innerHTML = "capture";
document.body.append(buton);
buton.addEventListener("click", async () => {
  const stream = await navigator.mediaDevices.getDisplayMedia();
  const kaydedici = new MediaRecorder(stream);
  kaydedici.start();

  const [video] = stream.getVideoTracks();
  video.addEventListener("ended", () => {
    kaydedici.stop();
  });

  kaydedici.addEventListener("dataavailable", (evt) => {
    const a = document.createElement("a");
    a.href = URL.createObjectURL(evt.data);
    a.download = "kayit.webm";
    a.click();
  });
});

Yorum bırakın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Scroll to Top