Şampanya ve donutları hazırlayın! Bugüne kadar en yıldız işaretli Chrome özelliği kullanıma sunuldu.
Videoyu GeoLocation verileriyle senkronize eden bir kayak kaydı cihazı veya son derece basit bir sesli not uygulaması ya da video kaydedip YouTube'a yüklemenizi sağlayan bir widget düşünün. Üstelik bunların hepsine eklenti gerekmez.
MediaRecorder API bir web uygulamasından ses ve video kaydetmenize olanak tanır. Şu anda Firefox'ta ve Android ve masaüstü için Chrome'da kullanılabilir.
Buradan deneyin.
WebRTC örnek kod deposu demosundaki kodu kullanarak API'yi kolayca göstereceğim. API'nin sadece güvenli kaynaklardan (HTTPS veya localhost) kullanılabileceğini unutmayın.
İlk olarak, bir MediaStream ile bir MediaRecorder örneği oluşturun. İsterseniz, istediğiniz çıkış biçimini belirtmek için bir options parametresi kullanın:
var options = {mimeType: 'video/webm; codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);
MediaStream şuradan olabilir:
getUserMedia()araması.- WebRTC çağrısını alma bitişi.
- Ekran kaydı.
- Web Audio. Bu sorun uygulandıktan sonra.
options için MIME türünü ve gelecekte ses ve video bit hızlarını belirtmek mümkün olacaktır.
MIME türleri, kapsayıcı ve codec'leri bir araya getiren daha az veya daha spesifik 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. Örneğin, MediaRecorder'ı örneklediğinizde:
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.
Daha sonra, bir veri işleyici ekleyin ve kayda başlamak 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 örneklerde, veriler kullanılabilir olduğunda recordedChunks dizisine bir Blob eklenir. start() yöntemine isteğe bağlı olarak her Blob için yakalanacak medya uzunluğunu belirten bir timeSlice bağımsız değişkeni verilebilir.
Kaydı bitirdiğinizde 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, bağlantıya saldıran bir yöntemle gerçekleştirilebilir:
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 demolarla ilgili geri bildirim
Eklenti olmadan ses ve video kaydetme özelliği, web uygulamalarında nispeten yenidir, bu nedenle API'lerle ilgili geri bildirimleriniz bizim için değerlidir.
- MediaRecorder uygulama hatası: crbug.com/262211
- Chrome: crbug.com/new
- Firefox: bugzil.la
- Demolar: github.com/webrtc/samples
Ayrıca sizin için en önemli kullanım senaryolarını ve öncelik vermemizi istediğiniz özellikleri de öğrenmek isteriz. crbug.com/262211 adresinden bu makaleye yorum yapın veya ilerleme durumunu takip edin.
Demolar
- webrtc.github.io/samples/src/content/getusermedia/record
- simpl.info/mr (aynı kod, mobil cihazlar için daha kolay URL!)
- Deneme amaçlı özel bir
<google-youtube-upload>öğesiyle video kaydedip YouTube'a yükleme
Uygulamalar
- Paul Lewis'in Sesli Notlar uygulaması, MediaRecorder sesini desteklemeyen tarayıcılar için çoklu dolgulu MediaRecorder desteği sunuyor.
Çoklu dolgular
- Muaz Khan'ın MediaStreamRecorder aracı, ses ve video kaydı için MediaRecorder ile uyumlu olan bir JavaScript kitaplığıdır.
- Recorderjs, bir Web Audio API düğümünden kayıt yapılmasını 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
- chrome://flags'den etkinleştirilen Deneysel Web Platformu özelliklerine sahip Chrome masaüstü 47 ve 48
- Sürüm 25'ten Firefox
- Edge: "Üzerinde Düşünülüyor"
Özellikler
w3c.github.io/mediacapture-record/MediaRecorder.html