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

Sam Dutton

حان وقت شرب الشمبانيا وتناول الدونات. تم الآن تنفيذ ميزة Chrome التي حصلت على أكبر عدد من التقييمات بنجمة على الإطلاق.

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

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

يمكنك تجربتها هنا.

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

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

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

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

يمكن أن يكون مصدر MediaStream من:

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

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

تحتوي أنواع MIME على قيم محدّدة إلى حدّ ما، وهي تجمع بين الحاوية وبرامج الترميز. على سبيل المثال:

• الصوت/webm
• video/webm
• video/webm;codecs=vp8
• video/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() أو try/catch أو احذف الوسيطة 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 المسجّلة في عنصر فيديو من خلال إنشاء ملف Blob ضخم من صفيف ملفات 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. يمكنك الاطّلاع على هذا الإجراء عمليًا في تطبيق مذكرات صوتية الخاص بـ "بول لويس".

دعم المتصفح

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

المواصفات

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

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

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