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

سام دوتون

تتيح لك الطريقة 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> الذي تم استدعاؤه.

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

اللوحة

حملة فيديو

الدعم

  • لوحة الرسم captureStream(): الإصدار 43 من Firefox أو الإصدارات الأحدث، أو الإصدار 50 من Chrome أو الإصدارات الأحدث مع تفعيل chrome://flags/#enable-experienceal-web-platform-features، أو Chrome 52 والإصدارات الأحدث بشكل تلقائي.
  • الفيديو والصوت captureStream(): Firefox 47، وChrome 52 والإصدارات الأحدث مع تفعيل chrome://flags/#enable-experienceal-web-platform-features، أو Chrome 53 والإصدارات الأحدث بشكل تلقائي.

التعرف على المزيد