تتيح لك الطريقة 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 والإصدارات الأحدث بشكل تلقائي.