Uygulamalı JavaScript #1: Ses ve Video Kaydı Nasıl Yapılır


Uygulamalı JavaScript serisinde laftan çok kod olacak arkadaşlar. Bu seride bol bol kod göstereceğiz, mümkün mertebede vanilla js (framework kullanılmayan, pür js) kullanacağız, ve yorum satırlarıyla olan biteni açıklarken web uygulamalarınızda size yararı olabilecek basit uygulamalar ve muhtemelen bunları otomatikleştiren fonksiyonlar yazacağız. Serinin sonunda bunları toplayıp kendimize has küçük bir kütüphanemiz bile olabilir.

navıgator

Biz JavaScript ile herhangi bir medya kaydederken window‘un navigator arayüzünü kullanacağız. Navigator basitçe kullanıcının cihazını temsil eden bir arayüz nesnesi ve JavaScript ile beraber geliyor, yani bir framework veya kütüphane değil. Komut dosyalarının (scriptlerin) kendileri üzerinde uygulamalar yürütmesine izin veriyor, bizim durumumuzda ise ses ve video kaydı. 

get user medıa

Navigator arayüzünden kullanıcı medyasına ulaşmak için getUserMedia metodunu kullanabiliriz ancak bu metod henüz deneysel olduğu için resmi dokümantasyonda bile prodüksiyon seviyesindeki herhangi bir kodda kullanılması önerilmiyor. Bu yüzden biz mediaDevices adlı özelliği altındaki getUserMedia adlı metodu kullanacağız. Dikkat edin ikisi aynı şey değildir. Ancak yine unutmamakta fayda var ki mediaDevices özelliği de henüz stabil bir sabit değil. Opera ve Safarinin hala desteği yok, tabii bu demek değil ki öğrenmek boşa! Gün gelip çattığında ve bütün tarayıcılar tüm desteklerini verdiklerinde, siz bu özellikleri ve metodları çok iyi ve etkili şekilde biliyor ve kullanıyor olacaksınız.

get user medıa argümanları

Şimdi navigator.mediaDevices.getUserMedia metodundan bahsedelim biraz. Bu fonksiyon bir argüman alıyor; akışını istediğiniz medya organları. Bunlar ‘audio’  ve ‘video’. Bunları fonksiyona nesne şeklinde geçirerek değerlerini ‘true’ya eşitleyebilirsiniz. Sonucunda alacağınız akış ses, video ya da ikisi birden olacaktır. İşlem sonucunda bu fonksiyon bize bir promise döndürecektir.

Tabii ki bu anahtarlara verebileceğimiz tek değer ‘true’ değil. Gerçekten spesifik bazı değerler isteyebiliriz. Örneğin cihaz birden fazla kameraya sahipse istenilen kamera cihazı seçilebilir (mediaDevices.enumerateDevices() fonksiyonu ile cihazlar kontrol edilebilir). Eğer cihaz mobilse isteğe göre arka veya ön kamera açılabilir. Bir kamera cihazının kalitesi için min, max ve ideal değerleri istenebilir. Eğer cihaz minimum gereksinimleri karşılamıyorsa istek reddedilir. ideal anahtarı ile birden fazla kamerası olan bir cihazda tercih edilecek değerleri verebilirsiniz. Bu konuştuklarım hakkında birer küçük örnek verdikten sonra asıl kod kısmına geçelim.

Şimdi asıl kayıt olayına geçebiliriz. Fonksiyonu istediğimiz değerlerle çalıştıracağız. Bu durumda biz sadece basitçe ses ve görüntü istiyoruz. Sonrasında promise’in bize tanımış olduğu yetki ile .then() fonksiyonu ile zincirleyeceğiz (chaining). .then() fonksiyonu ise bize bir stream nesnesi vercek.

Buradan sonra medya kaydedicisi için ne zaman bir veri mevcutsa bir array’a atayabiliriz. Sonra da bu array ile bir Blob nesnesi oluştururuz. Bunun için chunks adında bir değişmez (const – constant) ifade edelim, ve ne verileri içine push metoduyla atalım. 

Medya kaydedicimiz hazır. Şimdi tek yapmamız gereken kaydı başlatıp sona erdirmek ve sona erdiğinde chunks dizisine attığımız verilerden dosya oluşturmak. Başlama ve durdurma olayları için bize bir tetikleyici lazım tabii ki, biz şimdilik ‘start’ ve ‘stop’ id’li iki butonumuz olduğunu varsayalım ve onlara ‘click’ olayını ekleyelim.

İstersek bu blob nesnesini fetch api ile sunucuya FormData’yı gönderdiğimiz gibi gönderebiliriz.

Son olarak eğer bir hata olur da promise reddedilirse diye bir catch bloğu yazalım ve gelen her hatayı konsola fırlatalım. Bu durumda tüm kod şöyle oluyor:

Helper Functıon

Bir de bunu bir yadımcı (helper) fonksiyona dönüştürelim. Yapıyı da taslak şeklinde beraber kuralım.

Fonksiyon, seçeneklerin bulunacağı bir nesne şeklinde sadece bir argüman alsın. Bu nesnenin içinde kaydı başlatacak olan starter ve bitirecek olan stopper özellikleri olsun. Eğer görsel bir arayüz istersek diye visualize diye bir anahtar da koyalım ki, bir HTML elemanı atayabilelim. İstediğimiz medya araçlarını (audio, video) getUserMedia fonksiyonuna gönderebilmek için de constraints adlı bir özellik oluşturalım. Eğer kullanıcı kaydı otomatik başlatmak isterse starter değerini ‘auto’ olarak girebilsin, ama o zaman da stopper değerini milisaniye değerinde bir tam sayı (integer) alalım ve setTimeout() fonksiyonu ile kaydı elle durduralım. Sonuç olarak bir promise döndürelim ve chunks dizisinin, blob‘un ve bir linkin bulunduğu nesneyle bu promise’i çözelim.

Bu şekilde az önce yaptığımız kaydı şimdi basitçe aşağıdaki koda yapabiliriz. starter ve stopper id’li iki butonumuz olsun ve visualize id’li bir video elemanımız olsun;

Video Kayıt - Konsol Çıktısı

Böylece bu yazının da sonuna geliyoruz arkadaşlar. Merak ettiğiniz her şeyi yorumlar aracılığıyla sorabilirsiniz, kodportali.com ekibi olarak iyi kodlar dileriz.

Kaynaklar:

https://developer.mozilla.org – MDN Web Docs

[Toplam:0    Ortalama:0/5]

Sizin Tepkiniz Nedir?

süper süper
1
süper
bilgilendirici bilgilendirici
1
bilgilendirici
beğenmedim beğenmedim
0
beğenmedim
beğendim beğendim
0
beğendim
Düşündürücü Düşündürücü
0
Düşündürücü
Enes Algan
Ülkemizde son yıllarda gelişen yazılım ve teknoloji alanında kendini geliştirmek isteyen arkadaşlar için bu siteyi kurduk. Zamanla eğitim serilerimiz gelecektir. Takipte kalın...

0 Yorum

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bir format seçin
Kişisel Test
Kişiliğe dair bir şey ortaya çıkarmayı amaçlayan sorular dizisi
Basit Test
Bilgiyi kontrol etmek isteyen doğru ve yanlış cevaplı sorular dizisi
Anket
Karar vermek veya görüş belirlemek için oylama yapmak
Serbest Yazı
Yazılarınıza Görseller Bağlantılar Ekleyebilirsiniz
Liste
Klasik İnternet Listeleri
Geri Sayım Listesi
Klasik İnternet Geri Sayım Listeleri
Açık Liste
Kendi öğenizi gönderin ve en iyi sunum için oy verin
Oylanabilir Liste
En iyi liste öğesine karar vermek için yukarı veya aşağı basın
Fotoyla Anlatım
Kendi resimlerinizi yükleyin ve birşeyler anlatın
Video
Youtube, Vimeo veya Vine Kodları
Ses
Soundcloud veya Mixcloud İçerikleri
Görsel
Fotoğraf veya GIF
GIF
GIF Formatı