التقاط MediaStream من لوحة أو فيديو أو عنصر صوتي

Sam Dutton

تتيح الطريقة captureStream() إمكانية التقاط MediaStream من عنصر <canvas> أو <audio> أو <video>.

يتيح ذلك تسجيل بث فيديو أو صوت من أي من هذه العناصر أو بثه مباشرةً عبر WebRTC أو دمجه مع مؤثرات أو MediaStream أخرى في <canvas>. بعبارة أخرى، تتيح captureStream() لـ MediaStream نقل الوسائط ذهابًا وإيابًا بين عناصر اللوحة أو الصوت أو الفيديو، أو إلى RTCPeerConnection أو MediaRecorder.

في العرض التوضيحي التالي (المتاح من عينات WebRTC)، يتم بث MediaStream تم التقاطه من عنصر لوحة الرسم على اليمين عبر اتصال WebRTC من جهاز إلى آخر إلى عنصر الفيديو على اليسار:

(تتوفّر روابط لمزيد من الأمثلة على اللوحات الإعلانية والفيديوهات أدناه).

الرمز captureStream() بسيط.

بالنسبة إلى <canvas>:

var canvas = document.querySelector('canvas');
var video = document.querySelector('video');

// Optional frames per second argument.
var stream = canvas.captureStream(25);
// Set the source of the <video> element to be the stream from the <canvas>.
video.srcObject = stream;

بالنسبة إلى <video>:

var leftVideo = document.getElementById('leftVideo');
var rightVideo = document.getElementById('rightVideo');

leftVideo.onplay = function() {
    // Set the source of one <video> element to be a stream from another.
    var stream = leftVideo.captureStream();
    rightVideo.srcObject = stream;
};

ولكن لماذا؟

تتيح الطريقة captureStream() إمكانية تسجيل أو بث مباشر من لوحة الرسم وعناصر الوسائط:

  • تسجيل أسلوب اللعب وبثه من <canvas>
  • تسجيل فيديو من كاميرا، ثم إضافة محتوى أو تأثيرات إضافية
  • إنشاء تأثيرات "نافذة ضمن النافذة" من فيديوهات متعدّدة باستخدام <canvas>
  • يمكنك دمج الفيديو والصور (من الملفات أو الكاميرا أو كليهما) في <canvas>
  • بث مباشر لفيديو يتم تشغيله من ملف
  • استخدام رسالة صوتية أو رسالة فيديو مسجّلة لبريد الفيديو أو البريد الصوتي

في الأساس، تتيح السمة captureStream() لبرنامج JavaScript إنشاء "عناصر" وإدراجها في MediaStream.

التفاصيل الدقيقة

  • سيؤدي محاولة استخدام captureStream() مع عنصر وسائط ينفّذ حماية المحتوى من خلال إضافات الوسائط المشفرة إلى حدوث استثناء.

  • عند تسجيل لقطات من <canvas>، يتم ضبط الحد الأقصى لمعدل عرض اللقطات عند استدعاء captureStream(). على سبيل المثال، يعني canvas.captureStream(10) أنّ لوحة العرض تُخرج ما بين 0 و10 لقطات في الثانية. لا يتم تسجيل أي بيانات عندما لا يتم عرض أي شيء على <canvas>، ويتم تسجيل 10 لقطات في الثانية حتى إذا تم عرض <canvas> بمعدل 30 لقطة في الثانية. تم تسجيل خطأ يتضمّن المزيد من المناقشات في مواصفات captureStream.

  • تتطابق أبعاد الفيديو captureStream() مع أبعاد الجهاز <canvas> الذي تم تشغيله عليه.

العروض التوضيحية

لوحة الرسم

فيديو

الدعم

  • ‫Canvas captureStream(): الإصدار 43 من Firefox أو الإصدارات الأحدث، أو الإصدار 50 من Chrome والإصدارات الأحدث مع تفعيل chrome://flags/#enable-experimental-web-platform-features، أو الإصدار 52 من Chrome والإصدارات الأحدث تلقائيًا
  • الفيديو والصوت captureStream(): Firefox 47 أو Chrome 52 والإصدارات الأحدث مع تفعيل chrome://flags/#enable-experimental-web-platform-features، أو Chrome 53 والإصدارات الأحدث تلقائيًا

تعرَّف على مزيد من المعلومات