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

Sam Dutton

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

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

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

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

وواجهة برمجة التطبيقات واضحة، سأوضّحها باستخدام رمز من الإصدار التجريبي من مستودع 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.

بعد ذلك، أضِف معالِج بيانات واستدِع طريقة 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