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

স্যাম ডাটন

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 এবং তার উপরে ডিফল্টরূপে।

আরও জানুন