تتيح لك الطريقة 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>الذي تمّت jego تشغيله عليه.
إصدارات تجريبية
اللوحة
فيديو
الدعم
- تطبيق "لوحة الرسم"
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 والإصدارات الأحدث تلقائيًا