یک 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() جاوا اسکریپت را قادر می سازد تا چیزهایی را به یک MediaStream بسازد و "تزریق" کند.

چاپ کوچک

  • تلاش برای استفاده از captureStream() با یک عنصر رسانه ای که حفاظت محتوا را از طریق برنامه های افزودنی رسانه رمزگذاری شده اجرا می کند، یک استثنا ایجاد می کند.

  • هنگام عکسبرداری از یک <canvas> ، حداکثر نرخ فریم زمانی تنظیم می شود که captureStream() فراخوانی شود. به عنوان مثال، canvas.captureStream(10) به این معنی است که بوم بین 0 تا 10 فریم در ثانیه خروجی می دهد. وقتی چیزی روی <canvas> نقاشی نمی‌شود، هیچ چیز ثبت نمی‌شود، و 10 فریم در ثانیه حتی اگر <canvas> با سرعت 30 فریم در ثانیه نقاشی شود، گرفته می‌شود. یک اشکال با بحث بیشتر در مورد مشخصات captureStream وجود دارد.

  • ابعاد یک ویدیوی captureStream() با <canvas> که فراخوانی شده بود مطابقت دارد.

دموها

بوم

ویدئو

پشتیبانی کنید

  • Canvas captureStream() : Firefox 43 یا بالاتر. Chrome 50 و بالاتر با chrome://flags/#enable-experimental-web-platform-features فعال یا Chrome 52 و بالاتر به طور پیش‌فرض.
  • captureStream() : Firefox 47; Chrome 52 و بالاتر با chrome://flags/#enable-experimental-web-platform-features فعال یا Chrome 53 و بالاتر به طور پیش‌فرض.

بیشتر بدانید