আপনার ওয়েব অ্যাপ থেকে ক্যামেরা, মাইক্রোফোন এবং স্পিকার বেছে নিন

স্যাম ডাটন

আধুনিক ব্রাউজারগুলি ক্যামেরা, মাইক্রোফোন এবং স্পিকার সহ ইনপুট এবং আউটপুট ডিভাইসগুলি নির্বাচন করা সম্ভব করে তোলে।

উদাহরণ স্বরূপ:

  • একটি ফোনে, সামনে বা পিছনের ক্যামেরা নির্বাচন করুন৷
  • একটি ল্যাপটপে, অভ্যন্তরীণ স্পিকার বা ব্লুটুথ দ্বারা সংযুক্ত একটি স্পিকার চয়ন করুন৷
  • একটি ভিডিও চ্যাটের জন্য, অভ্যন্তরীণ বা বাহ্যিক মাইক্রোফোন বা ক্যামেরা চয়ন করুন৷

এই সমস্ত কার্যকারিতা MediaDevices অবজেক্ট দ্বারা উন্মুক্ত করা হয়, যা navigator.mediaDevices দ্বারা ফেরত দেওয়া হয়।

MediaDevices-এর দুটি পদ্ধতি রয়েছে, উভয়ই ডেস্কটপ এবং অ্যান্ড্রয়েডে Chrome 47-এ প্রয়োগ করা হয়েছে: enumerateDevices() এবং getUserMedia() ।

একটি অডিও আউটপুট ডিভাইস নির্বাচন করা হচ্ছে।

enumerateDevices()

উপলব্ধ ডিভাইসের জন্য MediaDeviceInfo অবজেক্টের একটি অ্যারে অ্যাক্সেস দেওয়ার প্রতিশ্রুতি প্রদান করে।

পদ্ধতিটি MediaStreamTrack.getSources() এর মতই কিন্তু সেই পদ্ধতির বিপরীতে (যা শুধুমাত্র Chrome এ প্রয়োগ করা হয়েছে) এটি মানসম্মত এবং অডিও আউটপুট ডিভাইস অন্তর্ভুক্ত। আপনি নীচের ডেমো দিয়ে এটি চেষ্টা করতে পারেন।

এখানে ডেমোগুলির একটি থেকে কিছু সামান্য সরলীকৃত কোড রয়েছে:

navigator.mediaDevices.enumerateDevices()
    .then(gotDevices)
    .catch(errorCallback);
...
function gotDevices(deviceInfos) {

    ...

    for (var i = 0; i !== deviceInfos.length; ++i) {
    var deviceInfo = deviceInfos[i];
    var option = document.createElement('option');
    option.value = deviceInfo.deviceId;
    if (deviceInfo.kind === 'audioinput') {
        option.text = deviceInfo.label ||
        'Microphone ' + (audioInputSelect.length + 1);
        audioInputSelect.appendChild(option);
    } else if (deviceInfo.kind === 'audiooutput') {
        option.text = deviceInfo.label || 'Speaker ' +
        (audioOutputSelect.length + 1);
        audioOutputSelect.appendChild(option);
    } else if (deviceInfo.kind === 'videoinput') {
        option.text = deviceInfo.label || 'Camera ' +
        (videoSelect.length + 1);
        videoSelect.appendChild(option);
    }

    ...

}

enumerateDevices() সহ উপলব্ধ ডিভাইসগুলির আইডি পুনরুদ্ধার করার পরে, আপনি ভিডিও বা অডিও উপাদানের জন্য অডিও আউটপুট গন্তব্য পরিবর্তন করতে setSinkId() ( অডিও আউটপুট ডিভাইস API এ সংজ্ঞায়িত) ব্যবহার করতে পারেন:

element.setSinkId(sinkId)
    .then(function() {
    console.log('Audio output device attached: ' + sinkId);
    })
    .catch(function(error) {
    // ...
    });

এই পদ্ধতিটি উপাদান থেকে অডিওর জন্য আউটপুট ডিভাইস সেট করে। একবার setSinkId() কল করা হলে, আপনি sinkId বৈশিষ্ট্য সহ উপাদানটির জন্য বর্তমান আউটপুট অডিও ডিভাইসের আইডি পেতে পারেন।

getUserMedia()

এটি navigator.getUserMedia() কে প্রতিস্থাপন করে, কিন্তু একটি কলব্যাক ব্যবহার করার পরিবর্তে, একটি প্রতিশ্রুতি প্রদান করে যা একটি MediaStream এ অ্যাক্সেস দেয়। বিকাশকারীদেরকে MediaDevices.getUserMedia() ব্যবহার করতে উত্সাহিত করা হয়, কিন্তু navigator.getUserMedia() সরানোর কোনো পরিকল্পনা নেই : এটি স্পেকের অংশ থেকে যায় ।

WebRTC নমুনা সাইটে একটি ডেমো আছে।

এখানে ডেমো থেকে কোডের একটি খণ্ড:

navigator.mediaDevices.getUserMedia(constraints)
    .then(function(stream) {
    var videoTracks = stream.getVideoTracks();
    console.log('Got stream with constraints:', constraints);
    console.log('Using video device: ' + videoTracks[0].label);
    stream.onended = function() {
        console.log('Stream ended');
    };
    window.stream = stream; // make variable available to console
    video.srcObject = stream;
    })
    .catch(function(error) {
    // ...
    }

পতাকা পরিত্যাগ

enumerateDevices() পদ্ধতিটি Chrome-এ 'পতাকাবিহীন', যেখানে MediaDevices.getUserMedia() এর জন্য আপনাকে এখনও chrome://flags-এ পরীক্ষামূলক ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্যগুলি সক্ষম করতে হবে বা নিম্নলিখিত কমান্ড লাইন পতাকা ব্যবহার করতে হবে:

--enable-blink-features=GetUserMedia

একইভাবে setSinkId() এর জন্য : পরীক্ষামূলক ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্যগুলি সক্ষম করুন বা একটি পতাকা ব্যবহার করুন:

--enable-blink-features=AudioOutputDevices

নীচে ব্রাউজার সমর্থন সম্পর্কে আরও বিশদ বিবরণ।

ভবিষ্যৎ

প্রস্তাবিত ondevicechange ইভেন্ট হ্যান্ডলার যা বলে তা করে: যখন উপলব্ধ ডিভাইসের সেট পরিবর্তিত হয় তখন devicechange ইভেন্টটি বরখাস্ত হয় এবং একটি হ্যান্ডলারে আপনি ডিভাইসের নতুন তালিকা পেতে enumerateDevices() কল করতে পারেন। এটি এখনও কোনো ব্রাউজারে প্রয়োগ করা হয়নি।

স্ক্রিন ক্যাপচার ড্রাফ্ট হল মিডিয়া ক্যাপচার API-এর একটি এক্সটেনশন যা একটি MediaDevices.getDisplayMedia() পদ্ধতির প্রস্তাব করে যা একটি ব্যবহারকারীর প্রদর্শনের অঞ্চলগুলিকে একটি মিডিয়া স্ট্রিমের উত্স হিসাবে ব্যবহার করতে সক্ষম করে৷ getSupportedConstraints() এর জন্য একটি MediaDevices এক্সটেনশন প্রস্তাবও রয়েছে, যা একটি getUserMedia() কলের জন্য কী কী সীমাবদ্ধতা ব্যবহার করা যেতে পারে সে সম্পর্কে তথ্য প্রদান করে: ব্রাউজার দ্বারা সমর্থিত অডিও এবং ভিডিও ক্ষমতা।

ডেমো

আরও খোঁজ