تسجيل الصوت والفيديو باستخدام MediaRecorder

Sam Dutton

تذوَّق طعمًا من الشامبانيا والكعك. تم الآن تنفيذ ميزة Chrome الأكثر تمييزًا بنجمة على الإطلاق.

تخيَّل جهاز تسجيل للتزلّج يزامن الفيديو مع بيانات الموقع الجغرافي، أو تطبيق مذكّرة صوتية سهل الاستخدام، أو أداة تتيح لك تسجيل فيديو وتحميله إلى YouTube، وكل ذلك بدون مكوّنات إضافية.

تتيح لك MediaRecorder API تسجيل الصوت والفيديو من تطبيق ويب. وتتوفّر هذه الميزة الآن في متصفّح Firefox وفي متصفّح Chrome على أجهزة Android وأجهزة الكمبيوتر المكتبي.

جرِّب ذلك هنا.

ملاحظة: معلومات عن الدعم - لاستخدام MediaRecorder في الإصدارين 47 و48 من Chrome، عليك تفعيل الميزات التجريبية للنظام الأساسي للويب من صفحة chrome://flags. - تعمل ميزة تسجيل الصوت في Firefox وفي Chrome 49 والإصدارات الأحدث، بينما يدعم Chrome 47 وChrome 48 تسجيل الفيديو فقط. - في متصفّح Chrome على نظام التشغيل Android، يمكنك حفظ التسجيلات التي تم إنشاؤها باستخدام MediaRecorder وتنزيلها، ولكن ليس من الممكن بعد عرض تسجيل في عنصر فيديو عبر window.URL.createObjectURL(). اطّلِع على هذا الخطأ.

إنّ واجهة برمجة التطبيقات سهلة الاستخدام، وسنوضحها باستخدام رمز من العرض التوضيحي لنموذج WebRTC. تجدر الإشارة إلى أنّه لا يمكن استخدام واجهة برمجة التطبيقات إلا من خلال مصادر آمنة فقط: HTTPS أو مضيف محلي.

أولاً، عليك إنشاء مثيل لـ MediaRecorder باستخدام MediaStream. يمكنك بشكل اختياري استخدام معلَمة options لتحديد تنسيق الإخراج المطلوب:

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

يمكن أن يكون مصدر الوسائط MediaStream من:

• مكالمة getUserMedia()
• الطرف المستقبِل لمكالمة WebRTC
• تسجيل الشاشة
• Web Audio، بعد تنفيذ هذه المشكلة.

بالنسبة إلى options، من الممكن تحديد نوع MIME، ووحدات بت الصوت والفيديو في المستقبل.

تتضمن أنواع MIME قيمًا أكثر أو أقل تحديدًا، حيث تجمع بين الحاوية وبرامج الترميز. مثال:

• الصوت/webm
• فيديو/webm
• فيديو/webm;codecs=vp8
• فيديو/webm;codecs=vp9

استخدِم الطريقة الثابتة MediaRecorder.isTypeSupported() للتحقّق مما إذا كان نوع MIME متوافقًا، على سبيل المثال عند إنشاء مثيل MediaRecorder:

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 {
    // ...
}

تتوفّر هنا القائمة الكاملة لأنواع MIME التي يدعمها MediaRecorder في Chrome.

تنبيه: سيتعذر إنشاء مثيل إذا لم يتوافق المتصفّح مع النوع MIME المحدّد، لذلك يمكنك استخدام MediaRecorder.isTypeSupported() أو تجربة/التقاط - أو استبعاد الوسيطة options إذا كنت راضيًا عن الإعداد التلقائي للمتصفّح.

بعد ذلك، أضِف معالج بيانات واستدعِ الطريقة start() لبدء التسجيل:

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 {
    // ...
    }
}

يضيف هذا المثال Blob إلى مصفوفة recordedChunks كلما أصبحت البيانات متوفرة. يمكن اختياريًا منح الطريقة start() وسيطة timeSlice تحدد طول الوسائط المطلوب التقاطها لكل Blob.

عند الانتهاء من التسجيل، أخبر تطبيق MediaRecorder بما يلي:

mediaRecorder.stop();

شغِّل عناصر Blob المسجَّلة في عنصر فيديو من خلال إنشاء "super-Blob" من مصفوفة النقاط المسجلة:

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

وبدلاً من ذلك، يمكنك التحميل إلى خادم عبر XHR، أو استخدام واجهة برمجة تطبيقات، مثل YouTube (يمكنك الاطّلاع على الإصدار التجريبي أدناه).

يمكن تنزيل التطبيق من خلال اختراق الروابط:

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);
}

ملاحظات حول واجهات برمجة التطبيقات والعروض التوضيحية

إنّ إمكانية تسجيل الصوت والفيديو بدون مكونات إضافية هي ميزة جديدة نسبيًا على تطبيقات الويب، لذا يسرّنا تلقّي ملاحظاتك حول واجهات برمجة التطبيقات.

• خطأ في تنفيذ MediaRecorder: crbug.com/262211
• Chrome: crbug.com/new
• Firefox: bugzil.la
• العروض التوضيحية: github.com/webrtc/samples

نودّ أيضًا معرفة سيناريوهات الاستخدام الأكثر أهمية بالنسبة إليك، والميزات التي تريد منا أن نعطيها الأولوية. يمكنك التعليق على هذه المقالة أو تتبُّع مستوى التقدّم على الرابط crbug.com/262211.

إصدارات تجريبية

• webrtc.github.io/samples/src/content/getusermedia/record
• simpl.info/mr (الرمز نفسه، وعنوان URL أسهل للأجهزة الجوّالة)
• تسجيل فيديو وتحميله إلى YouTube باستخدام عنصر <google-youtube-upload> تجريبي مخصص

حملة التطبيقات

• أصبح تطبيق Voice Memos الذي أنشأه "بول لويس" متوافقًا الآن مع MediaRecorder، وقد تم تعويضه للمتصفّحات التي لا تتيح تشغيل الصوت في MediaRecorder.

تعويض الميزات المفقودة من المتصفحات

• إنّ MediaStreamRecorder من "مُعاز خان" هي مكتبة JavaScript لتسجيل الصوت والفيديو، وهي متوافقة مع MediaRecorder.
• تمكِّن Recorderjs التسجيل من عقدة Web Audio API. يمكنك رؤية هذا عمليًا في تطبيق Voice Memos الذي يخص "بول لويس".

المتصفحات المتوافقة

• الإصدار 49 من Chrome والإصدارات الأحدث تلقائيًا
• أجهزة الكمبيوتر المكتبي من Chrome إصدار 47 و48 مع تفعيل ميزات "نظام أساسي تجريبي للويب" من chrome://flags
• Firefox من الإصدار 25
• الحافة: "قيد المراجعة"

المواصفات

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

معلومات واجهة برمجة التطبيقات

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