মিডিয়া ডিভাইসের সাথে শুরু করা

ওয়েবের জন্য বিকাশ করার সময়, WebRTC স্ট্যান্ডার্ড কম্পিউটার বা স্মার্টফোনের সাথে সংযুক্ত ক্যামেরা এবং মাইক্রোফোন অ্যাক্সেস করার জন্য API প্রদান করে। এই ডিভাইসগুলিকে সাধারণত মিডিয়া ডিভাইস হিসাবে উল্লেখ করা হয় এবং জাভাস্ক্রিপ্টের মাধ্যমে navigator.mediaDevices অবজেক্টের মাধ্যমে অ্যাক্সেস করা যেতে পারে, যা MediaDevices ইন্টারফেস প্রয়োগ করে। এই বস্তু থেকে আমরা সমস্ত সংযুক্ত ডিভাইসগুলি গণনা করতে পারি, ডিভাইসের পরিবর্তনগুলি শুনতে পারি (যখন একটি ডিভাইস সংযুক্ত বা সংযোগ বিচ্ছিন্ন হয়), এবং একটি মিডিয়া স্ট্রিম পুনরুদ্ধার করতে একটি ডিভাইস খুলতে পারি (নীচে দেখুন)।

এটি ব্যবহার করা সবচেয়ে সাধারণ উপায় হল getUserMedia() ফাংশনের মাধ্যমে, যা একটি প্রতিশ্রুতি প্রদান করে যা মিলিত মিডিয়া ডিভাইসগুলির জন্য একটি MediaStream সমাধান করবে। এই ফাংশনটি একটি একক MediaStreamConstraints অবজেক্ট নেয় যা আমাদের প্রয়োজনীয়তাগুলি নির্দিষ্ট করে। উদাহরণস্বরূপ, কেবলমাত্র ডিফল্ট মাইক্রোফোন এবং ক্যামেরা খুলতে, আমরা নিম্নলিখিতগুলি করব।

const constraints = {
    'video': true,
    'audio': true
}
navigator.mediaDevices.getUserMedia(constraints)
    .then(stream => {
        console.log('Got MediaStream:', stream);
    })
    .catch(error => {
        console.error('Error accessing media devices.', error);
    });

const openMediaDevices = async (constraints) => {
    return await navigator.mediaDevices.getUserMedia(constraints);
}

try {
    const stream = openMediaDevices({'video':true,'audio':true});
    console.log('Got MediaStream:', stream);
} catch(error) {
    console.error('Error accessing media devices.', error);
}

getUserMedia() এ কল একটি অনুমতির অনুরোধ ট্রিগার করবে। ব্যবহারকারী অনুমতি গ্রহণ করলে, একটি ভিডিও এবং একটি অডিও ট্র্যাক ধারণকারী একটি MediaStream সাথে প্রতিশ্রুতিটি সমাধান করা হয়। অনুমতি অস্বীকার করা হলে, একটি PermissionDeniedError নিক্ষেপ করা হয়। কোনো মিলিত ডিভাইস সংযুক্ত না থাকলে, একটি NotFoundError নিক্ষেপ করা হবে।

MediaDevices ইন্টারফেসের জন্য সম্পূর্ণ API রেফারেন্স MDN ওয়েব ডক্সে উপলব্ধ।

মিডিয়া ডিভাইস অনুসন্ধান করা হচ্ছে

একটি আরও জটিল অ্যাপ্লিকেশনে, আমরা সম্ভবত সমস্ত সংযুক্ত ক্যামেরা এবং মাইক্রোফোন পরীক্ষা করতে চাই এবং ব্যবহারকারীকে উপযুক্ত প্রতিক্রিয়া প্রদান করতে চাই। এটি enumerateDevices() ফাংশন কল করে করা যেতে পারে। এটি একটি প্রতিশ্রুতি ফিরিয়ে দেবে যা MediaDevicesInfo এর একটি অ্যারের সমাধান করে যা প্রতিটি পরিচিত মিডিয়া ডিভাইস বর্ণনা করে। আমরা ব্যবহারকারীর কাছে একটি UI উপস্থাপন করতে এটি ব্যবহার করতে পারি যা তাদের পছন্দের একটি বেছে নিতে দেয়। প্রতিটি MediaDevicesInfo audioinput , audiooutput বা videoinput মান সহ kind নামের একটি সম্পত্তি থাকে, যা নির্দেশ করে যে এটি কোন ধরনের মিডিয়া ডিভাইস।

function getConnectedDevices(type, callback) {
    navigator.mediaDevices.enumerateDevices()
        .then(devices => {
            const filtered = devices.filter(device => device.kind === type);
            callback(filtered);
        });
}

getConnectedDevices('videoinput', cameras => console.log('Cameras found', cameras));

async function getConnectedDevices(type) {
    const devices = await navigator.mediaDevices.enumerateDevices();
    return devices.filter(device => device.kind === type)
}

const videoCameras = getConnectedDevices('videoinput');
console.log('Cameras found:', videoCameras);

ডিভাইস পরিবর্তনের জন্য শোনা

বেশিরভাগ কম্পিউটার রানটাইমের সময় বিভিন্ন ডিভাইসে প্লাগিং সমর্থন করে। এটি USB দ্বারা সংযুক্ত একটি ওয়েবক্যাম, একটি ব্লুটুথ হেডসেট, বা বহিরাগত স্পিকারের একটি সেট হতে পারে৷ এটি সঠিকভাবে সমর্থন করার জন্য, একটি ওয়েব অ্যাপ্লিকেশন মিডিয়া ডিভাইসের পরিবর্তনের জন্য শুনতে হবে। devicechange ইভেন্টের জন্য navigator.mediaDevices এ একজন শ্রোতা যোগ করে এটি করা যেতে পারে।

// Updates the select element with the provided set of cameras
function updateCameraList(cameras) {
    const listElement = document.querySelector('select#availableCameras');
    listElement.innerHTML = '';
    cameras.map(camera => {
        const cameraOption = document.createElement('option');
        cameraOption.label = camera.label;
        cameraOption.value = camera.deviceId;
    }).forEach(cameraOption => listElement.add(cameraOption));
}

// Fetch an array of devices of a certain type
async function getConnectedDevices(type) {
    const devices = await navigator.mediaDevices.enumerateDevices();
    return devices.filter(device => device.kind === type)
}

// Get the initial set of cameras connected
const videoCameras = getConnectedDevices('videoinput');
updateCameraList(videoCameras);

// Listen for changes to media devices and update the list accordingly
navigator.mediaDevices.addEventListener('devicechange', event => {
    const newCameraList = getConnectedDevices('video');
    updateCameraList(newCameraList);
});

মিডিয়া সীমাবদ্ধতা

সীমাবদ্ধতা অবজেক্ট, যা অবশ্যই MediaStreamConstraints ইন্টারফেস বাস্তবায়ন করতে হবে, যা আমরা getUserMedia() এ একটি প্যারামিটার হিসাবে পাস করি যা একটি নির্দিষ্ট প্রয়োজনীয়তার সাথে মেলে এমন একটি মিডিয়া ডিভাইস খুলতে দেয়। এই প্রয়োজনীয়তাটি খুব শিথিলভাবে সংজ্ঞায়িত করা যেতে পারে (অডিও এবং/অথবা ভিডিও), বা খুব নির্দিষ্ট (ন্যূনতম ক্যামেরা রেজোলিউশন বা একটি সঠিক ডিভাইস আইডি)। এটি সুপারিশ করা হয় যে অ্যাপ্লিকেশনগুলি যেগুলি getUserMedia() API ব্যবহার করে তারা প্রথমে বিদ্যমান ডিভাইসগুলি পরীক্ষা করে এবং তারপর একটি সীমাবদ্ধতা নির্দিষ্ট করে যা deviceId সীমাবদ্ধতা ব্যবহার করে সঠিক ডিভাইসের সাথে মেলে। ডিভাইসগুলিও, সম্ভব হলে, সীমাবদ্ধতা অনুযায়ী কনফিগার করা হবে। আমরা মাইক্রোফোনে ইকো বাতিলকরণ সক্ষম করতে পারি বা ক্যামেরা থেকে ভিডিওর একটি নির্দিষ্ট বা সর্বনিম্ন প্রস্থ এবং উচ্চতা সেট করতে পারি।

async function getConnectedDevices(type) {
    const devices = await navigator.mediaDevices.enumerateDevices();
    return devices.filter(device => device.kind === type)
}

// Open camera with at least minWidth and minHeight capabilities
async function openCamera(cameraId, minWidth, minHeight) {
    const constraints = {
        'audio': {'echoCancellation': true},
        'video': {
            'deviceId': cameraId,
            'width': {'min': minWidth},
            'height': {'min': minHeight}
            }
        }

    return await navigator.mediaDevices.getUserMedia(constraints);
}

const cameras = getConnectedDevices('videoinput');
if (cameras && cameras.length > 0) {
    // Open first available video camera with a resolution of 1280x720 pixels
    const stream = openCamera(cameras[0].deviceId, 1280, 720);
}

MediaStreamConstraints ইন্টারফেসের সম্পূর্ণ ডকুমেন্টেশন MDN ওয়েব ডক্সে পাওয়া যাবে।

স্থানীয় প্লেব্যাক

একবার একটি মিডিয়া ডিভাইস খোলা হয়ে গেলে এবং আমাদের কাছে একটি MediaStream উপলব্ধ থাকলে, আমরা স্থানীয়ভাবে স্ট্রিমটি চালানোর জন্য এটিকে একটি ভিডিও বা অডিও উপাদানে বরাদ্দ করতে পারি।

async function playVideoFromCamera() {
    try {
        const constraints = {'video': true, 'audio': true};
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        const videoElement = document.querySelector('video#localVideo');
        videoElement.srcObject = stream;
    } catch(error) {
        console.error('Error opening video camera.', error);
    }
}

getUserMedia() এর সাথে ব্যবহৃত একটি সাধারণ ভিডিও উপাদানের জন্য প্রয়োজনীয় HTML-এ সাধারণত autoplay এবং playsinline বৈশিষ্ট্যগুলি থাকবে। autoplay অ্যাট্রিবিউটের কারণে এলিমেন্টে অ্যাসাইন করা নতুন স্ট্রীম স্বয়ংক্রিয়ভাবে চালানো হবে। playsinline অ্যাট্রিবিউট নির্দিষ্ট মোবাইল ব্রাউজারে শুধুমাত্র পূর্ণ স্ক্রিনের পরিবর্তে ইনলাইনে ভিডিও চালানোর অনুমতি দেয়। লাইভ স্ট্রিমগুলির জন্য controls="false" ব্যবহার করারও পরামর্শ দেওয়া হয়, যদি না ব্যবহারকারী সেগুলিকে পজ করতে সক্ষম হন।

<html>
<head><title>Local video playback</title></head>
<body>
    <video id="localVideo" autoplay playsinline controls="false"/>
</body>
</html>