MediaRecorder দিয়ে অডিও এবং ভিডিও রেকর্ড করুন

Sam Dutton

শ্যাম্পেন এবং ডোনাট ভেঙ্গে আউট! সবচেয়ে তারকাচিহ্নিত Chrome বৈশিষ্ট্য এখন বাস্তবায়িত হয়েছে৷

একটি স্কি-রান রেকর্ডার কল্পনা করুন যা জিওলোকেশন ডেটার সাথে ভিডিও সিঙ্ক্রোনাইজ করে, বা একটি অতি-সাধারণ ভয়েস মেমো অ্যাপ, বা একটি উইজেট যা আপনাকে একটি ভিডিও রেকর্ড করতে এবং এটি YouTube-এ আপলোড করতে সক্ষম করে — সবই প্লাগইন ছাড়াই৷

MediaRecorder API আপনাকে একটি ওয়েব অ্যাপ থেকে অডিও এবং ভিডিও রেকর্ড করতে সক্ষম করে। এটি এখন ফায়ারফক্সে এবং Android এবং ডেস্কটপের জন্য Chrome-এ উপলব্ধ৷

এটি এখানে চেষ্টা করে দেখুন.

দ্রষ্টব্য: সমর্থন সম্পর্কে একটি শব্দ - Chrome 47 এবং 48 এ MediaRecorder ব্যবহার করতে, chrome://flags পৃষ্ঠা থেকে পরীক্ষামূলক ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্যগুলি সক্ষম করুন৷ - ফায়ারফক্স এবং ক্রোম 49 এবং তার উপরে অডিও রেকর্ডিং কাজ; Chrome 47 এবং 48 শুধুমাত্র ভিডিও রেকর্ডিং সমর্থন করে। - অ্যান্ড্রয়েডের ক্রোমে আপনি MediaRecorder দিয়ে তৈরি রেকর্ডিংগুলি সংরক্ষণ এবং ডাউনলোড করতে পারেন, তবে window.URL.createObjectURL() এর মাধ্যমে একটি ভিডিও উপাদানে রেকর্ডিং দেখা এখনও সম্ভব নয়৷ এই বাগ দেখুন.

APIটি সহজবোধ্য, যা আমি WebRTC নমুনা রেপো ডেমো থেকে কোড ব্যবহার করে প্রদর্শন করব। মনে রাখবেন যে API শুধুমাত্র নিরাপদ উত্স থেকে ব্যবহার করা যেতে পারে: HTTPS বা স্থানীয় হোস্ট।

প্রথমে, একটি MediaStream দিয়ে একটি MediaRecorder ইনস্ট্যান্টিয়েট করুন। ঐচ্ছিকভাবে, পছন্দসই আউটপুট বিন্যাস নির্দিষ্ট করতে একটি options পরামিতি ব্যবহার করুন:

var options = {mimeType: 'video/webm; codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);

মিডিয়াস্ট্রিম থেকে হতে পারে:

• একটি getUserMedia() কল।
• একটি WebRTC কলের সমাপ্তি।
• একটি স্ক্রিন রেকর্ডিং।
• ওয়েব অডিও, একবার এই সমস্যাটি বাস্তবায়িত হয়।

options জন্য MIME প্রকার এবং ভবিষ্যতে, অডিও এবং ভিডিও বিটরেটগুলি নির্দিষ্ট করা সম্ভব৷

MIME প্রকারের কম-বেশি নির্দিষ্ট মান রয়েছে, কন্টেইনার এবং কোডেকগুলিকে একত্রিত করে। উদাহরণ স্বরূপ:

• অডিও/ওয়েবএম
• ভিডিও/ওয়েবএম
• video/webm;codecs=vp8
• video/webm;codecs=vp9

একটি MIME প্রকার সমর্থিত কিনা তা পরীক্ষা করতে স্থির পদ্ধতি MediaRecorder.isTypeSupported() ব্যবহার করুন, উদাহরণস্বরূপ আপনি যখন MediaRecorder ইনস্ট্যান্টিয়েট করেন:

var options;
if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
    options = {mimeType: 'video/webm; codecs=vp9'};
} else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
    options = {mimeType: 'video/webm; codecs=vp8'};
} else {
    // ...
}

ক্রোমে MediaRecorder দ্বারা সমর্থিত MIME প্রকারের সম্পূর্ণ তালিকা এখানে উপলব্ধ।

সতর্কতা: ব্রাউজার নির্দিষ্ট MIME প্রকার সমর্থন না করলে ইনস্ট্যান্টেশন ব্যর্থ হবে, তাই MediaRecorder.isTypeSupported() ব্যবহার করুন বা চেষ্টা করুন/ক্যাচ করুন — অথবা আপনি যদি ব্রাউজার ডিফল্টের সাথে খুশি হন তবে options যুক্তি ত্যাগ করুন।

এরপরে, একটি ডেটা হ্যান্ডলার যোগ করুন এবং রেকর্ডিং শুরু করতে start() পদ্ধতিতে কল করুন:

var recordedChunks = [];

var options = {mimeType: 'video/webm;codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();

function handleDataAvailable(event) {
    if (event.data.size > 0) {
    recordedChunks.push(event.data);
    } else {
    // ...
    }
}

এই উদাহরণগুলি recordedChunks অ্যারেতে একটি ব্লব যোগ করে যখনই ডেটা উপলব্ধ হয়। start() পদ্ধতিতে ঐচ্ছিকভাবে একটি timeSlice আর্গুমেন্ট দেওয়া যেতে পারে যা প্রতিটি ব্লবের জন্য ক্যাপচার করার জন্য মিডিয়ার দৈর্ঘ্য নির্দিষ্ট করে।

আপনি রেকর্ডিং শেষ করলে, মিডিয়া রেকর্ডারকে বলুন:

mediaRecorder.stop();

রেকর্ড করা ব্লবগুলির অ্যারে থেকে একটি 'সুপার-ব্লব' তৈরি করে একটি ভিডিও উপাদানে রেকর্ড করা ব্লবগুলি চালান:

function play() {
    var superBuffer = new Blob(recordedChunks);
    videoElement.src =
    window.URL.createObjectURL(superBuffer);
}

বিকল্পভাবে, আপনি XHR এর মাধ্যমে একটি সার্ভারে আপলোড করতে পারেন, বা YouTube এর মত একটি API ব্যবহার করতে পারেন (নীচে পরীক্ষামূলক ডেমো দেখুন)।

ডাউনলোড কিছু লিঙ্ক হ্যাকিং দ্বারা অর্জন করা যেতে পারে:

function download() {
    var blob = new Blob(recordedChunks, {
    type: 'video/webm'
    });
    var url = URL.createObjectURL(blob);
    var a = document.createElement('a');
    document.body.appendChild(a);
    a.style = 'display: none';
    a.href = url;
    a.download = 'test.webm';
    a.click();
    window.URL.revokeObjectURL(url);
}

এপিআই এবং ডেমোতে প্রতিক্রিয়া

প্লাগইন ছাড়াই অডিও এবং ভিডিও রেকর্ড করার ক্ষমতা ওয়েব অ্যাপে তুলনামূলকভাবে নতুন, তাই আমরা বিশেষ করে API তে আপনার প্রতিক্রিয়ার প্রশংসা করি।

• MediaRecorder বাস্তবায়ন বাগ: crbug.com/262211
• ক্রোম: crbug.com/new
• ফায়ারফক্স: bugzil.la
• ডেমো: github.com/webrtc/samples

আমরা জানতে চাই যে কোন ব্যবহার পরিস্থিতিগুলি আপনার কাছে সবচেয়ে গুরুত্বপূর্ণ এবং আপনি কোন বৈশিষ্ট্যগুলিকে আমাদের অগ্রাধিকার দিতে চান৷ এই নিবন্ধে মন্তব্য করুন বা crbug.com/262211- এ অগ্রগতি ট্র্যাক করুন।

ডেমো

• webrtc.github.io/samples/src/content/getusermedia/record
• simpl.info/mr (একই কোড, মোবাইলের জন্য সহজ URL!)
• একটি ভিডিও রেকর্ড করুন এবং এটি একটি পরীক্ষামূলক কাস্টম <google-youtube-upload> উপাদান সহ YouTube এ আপলোড করুন৷

অ্যাপস

• পল লুইসের ভয়েস মেমোস অ্যাপে এখন মিডিয়ারেকর্ডার সমর্থন রয়েছে, যেগুলি মিডিয়ারেকর্ডার অডিও সমর্থন করে না এমন ব্রাউজারগুলির জন্য পলিফিল।

পলিফিলস

• মুয়াজ খানের MediaStreamRecorder হল একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা অডিও এবং ভিডিও রেকর্ড করার জন্য, MediaRecorder এর সাথে সামঞ্জস্যপূর্ণ।
• Recorderjs একটি ওয়েব অডিও API নোড থেকে রেকর্ডিং সক্ষম করে। আপনি পল লুইসের ভয়েস মেমোস অ্যাপে এটি কার্যকরভাবে দেখতে পারেন।

ব্রাউজার সমর্থন

• Chrome 49 এবং তার উপরে ডিফল্টরূপে
• ক্রোম ডেস্কটপ 47 এবং 48 পরীক্ষামূলক ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্য সহ chrome://flags থেকে সক্ষম
• 25 সংস্করণ থেকে ফায়ারফক্স
• প্রান্ত : 'বিবেচনার অধীনে'

স্পেক

w3c.github.io/mediacapture-record/MediaRecorder.html

API তথ্য

developer.mozilla.org/en/docs/Web/API/MediaRecorder_API