MediaRecorder ile ses ve video kaydetme

Sam Dutton

Şampanyayı ve donutları kırın. En çok yıldız alan Chrome özelliği kullanıma sunuldu.

Videoyu coğrafi konum verileriyle senkronize eden bir kayak kaydı kaydedici, son derece basit bir sesli not uygulaması veya video kaydedip YouTube'a yüklemenizi sağlayan bir widget düşünün. Bunların hiçbirinde eklenti kullanmanıza gerek yok.

MediaRecorder API, web uygulamasından ses ve video kaydetmenize olanak tanır. Bu API, Firefox'ta ve Android ile masaüstü için Chrome'da kullanılabilir.

Buradan deneyin.

Android Nexus 5X'te mediaRecorder demosunun ekran görüntüsü

API basittir. Bunu WebRTC örnek repo demo'sundaki kodu kullanarak göstereceğim. API'nin sadece yalnızca güvenli kaynaklardan (HTTPS veya localhost) kullanılabileceğini unutmayın.

İlk olarak, MediaStream ile bir MediaRecorder örneği oluşturun. İsterseniz options parametresini kullanarak istediğiniz çıkış biçimini belirtebilirsiniz:

var options = {mimeType: 'video/webm; codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);

MediaStream aşağıdaki kaynaklardan gelebilir:

  • getUserMedia() araması.
  • WebRTC görüşmesinin alıcı tarafı.
  • Ekran kaydı.
  • Bu sorun uygulandıktan sonra Web Audio.

options için MIME türünü ve gelecekte ses ve video bit hızlarını belirtebilirsiniz.

MIME türleri, kapsayıcı ve codec'leri birleştiren, aşağı yukarı belirli değerlere sahiptir. Örneğin:

  • audio/webm
  • video/webm
  • video/webm;codecs=vp8
  • video/webm;codecs=vp9

Bir MIME türünün desteklenip desteklenmediğini kontrol etmek için MediaRecorder.isTypeSupported() statik yöntemini kullanın (ör. MediaRecorder'ı örneklendirirken):

var options;
if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
    options = {mimeType: 'video/webm; codecs=vp9'};
} else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
    options = {mimeType: 'video/webm; codecs=vp8'};
} else {
    // ...
}

Chrome'da MediaRecorder tarafından desteklenen MIME türlerinin tam listesini burada bulabilirsiniz.

Sonra, bir veri işleyici ekleyin ve kaydı başlatmak için start() yöntemini çağırın:

var recordedChunks = [];

var options = {mimeType: 'video/webm;codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();

function handleDataAvailable(event) {
    if (event.data.size > 0) {
    recordedChunks.push(event.data);
    } else {
    // ...
    }
}

Bu örnekte, veriler kullanılabilir hale geldiğinde recordedChunks dizisine bir Blob eklenir. start() yöntemine isteğe bağlı olarak, her Blob için yakalanacak medyanın uzunluğunu belirten bir timeSlice bağımsız değişkeni verilebilir.

Kaydı tamamladığınızda MediaRecorder'a şunları söyleyin:

mediaRecorder.stop();

Kaydedilen Blob dizisinden bir "süper Blob" oluşturarak kaydedilen Blob'ları bir video öğesinde oynatın:

function play() {
    var superBuffer = new Blob(recordedChunks);
    videoElement.src =
    window.URL.createObjectURL(superBuffer);
}

Alternatif olarak, XHR aracılığıyla bir sunucuya yükleme yapabilir veya YouTube gibi bir API kullanabilirsiniz (aşağıdaki deneysel demoya bakın).

İndirme işlemi bazı bağlantı hack'leri yoluyla yapılabilir:

function download() {
    var blob = new Blob(recordedChunks, {
    type: 'video/webm'
    });
    var url = URL.createObjectURL(blob);
    var a = document.createElement('a');
    document.body.appendChild(a);
    a.style = 'display: none';
    a.href = url;
    a.download = 'test.webm';
    a.click();
    window.URL.revokeObjectURL(url);
}

API'ler ve demolar hakkında geri bildirim

Eklenti olmadan ses ve video kaydı yapma özelliği, web uygulamaları için nispeten yeni bir özellik olduğundan özellikle API'lerle ilgili geri bildirimlerinizi bekliyoruz.

Sizin için en önemli kullanım senaryolarını ve öncelik vermemizi istediğiniz özellikleri de öğrenmek isteriz. Bu makaleye yorum ekleyin veya ilerleme durumunu crbug.com/262211 adresinden takip edin.

Demolar

Uygulamalar

  • Paul Lewis'un Sesli Notlar uygulaması artık MediaRecorder desteğine sahip. MediaRecorder sesini desteklemeyen tarayıcılar için de bu destek, poli doldurma ile sağlanıyor.

Çoklu dolgular

  • Muaz Khan'ın MediaStreamRecorder, ses ve video kaydı için MediaRecorder ile uyumlu bir JavaScript kitaplığıdır.
  • Recorderjs, Web Audio API düğümünden kayıt yapmayı sağlar. Bunu Paul Lewis'in Sesli Notlar uygulamasında görebilirsiniz.

Tarayıcı desteği

  • Varsayılan olarak Chrome 49 ve sonraki sürümler
  • Deneysel Web Platformu özellikleri chrome://flags'den etkinleştirilen Chrome masaüstü 47 ve 48 sürümleri
  • Firefox sürüm 25
  • Edge: "İnceleniyor"

Özellikler

w3c.github.io/mediacapture-record/MediaRecorder.html

API bilgileri

developer.mozilla.org/en/docs/Web/API/MediaRecorder_API