একটি ক্যানভাস, ভিডিও বা অডিও উপাদান থেকে একটি মিডিয়াস্ট্রিম ক্যাপচার করুন

স্যাম ডাটন

captureStream() পদ্ধতিটি একটি <canvas> , <audio> বা <video> উপাদান থেকে একটি MediaStream ক্যাপচার করা সম্ভব করে।

এটি এই উপাদানগুলির যেকোনো একটি থেকে ভিডিও বা অডিও স্ট্রিমকে রেকর্ড করা, WebRTC-এর মাধ্যমে লাইভ-স্ট্রিম করা বা <canvas> ক্যানভাস>-এ প্রভাব বা অন্যান্য MediaStream সাথে একত্রিত করা সক্ষম করে। অন্য কথায়, 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() জাভাস্ক্রিপ্টকে একটি মিডিয়াস্ট্রিমে "স্টাফ ইনজেকশন" তৈরি করতে সক্ষম করে।

ছোট ছাপা

  • এনক্রিপ্ট করা মিডিয়া এক্সটেনশনের মাধ্যমে বিষয়বস্তু সুরক্ষা প্রয়োগ করে এমন একটি মিডিয়া উপাদানের সাথে captureStream() ব্যবহার করার চেষ্টা করলে একটি ব্যতিক্রম হবে।

  • একটি <canvas> থেকে ক্যাপচার করার সময়, যখন captureStream() বলা হয় তখন সর্বাধিক ফ্রেম রেট সেট করা হয়। উদাহরণস্বরূপ, canvas.captureStream(10) এর অর্থ হল ক্যানভাস 0 থেকে 10 fps এর মধ্যে আউটপুট। <canvas> এ কিছু আঁকা না হলে কিছুই ধরা পড়ে না, এবং <canvas> 30 fps এ আঁকা হলেও 10 fps ক্যাপচার করা হয়। captureStream স্ট্রীম স্পেকে ফাইল করা আরও আলোচনা সহ একটি বাগ রয়েছে।

  • একটি captureStream() ভিডিওর ডাইমেনশন <canvas> এর সাথে মেলে

ডেমো

ক্যানভাস

ভিডিও

সমর্থন

  • ক্যানভাস captureStream() : ফায়ারফক্স 43 বা তার উপরে; Chrome 50 এবং তার উপরে chrome://flags/#enable-experimental-web-platform-features সক্ষম, অথবা Chrome 52 এবং তার উপরে ডিফল্টরূপে।
  • ভিডিও এবং অডিও captureStream() : ফায়ারফক্স 47; Chrome 52 এবং তার উপরে chrome://flags/#enable-experimental-web-platform-features সক্ষম, অথবা Chrome 53 এবং তার উপরে ডিফল্টরূপে।

আরও খোঁজ