Google is committed to advancing racial equity for Black communities. See how.
This page was translated by the Cloud Translation API.
Switch to English

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

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

এটি ব্যবহারের সর্বাধিক সাধারণ উপায় হ'ল getUserMedia() ফাংশনটির মাধ্যমে, যা প্রতিশ্রুতি দেয় যা মিলে যাওয়া মিডিয়া ডিভাইসের জন্য একটি মিডিয়া MediaStream সমাধান করবে। এই MediaStreamConstraints একটি একক 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 ইন্টারফেসের জন্য সম্পূর্ণ এপিআই রেফারেন্স এমডিএন ওয়েব MediaDevices উপলভ্য।

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

আরও জটিল অ্যাপ্লিকেশনটিতে আমরা সম্ভবত সমস্ত সংযুক্ত ক্যামেরা এবং মাইক্রোফোন পরীক্ষা করতে এবং ব্যবহারকারীর জন্য উপযুক্ত প্রতিক্রিয়া সরবরাহ করতে চাই। এটি enumerateDevices() নামক enumerateDevices() কল করে কাজটি করা যেতে পারে। এটি এমন প্রতিশ্রুতি MediaDevicesInfo যা প্রতিটি পরিচিত মিডিয়া ডিভাইসকে বর্ণনা করে এমন মিডিয়া MediaDevicesInfo অ্যারের সাথে সমাধান করে। আমরা এটি ব্যবহারকারীর কাছে একটি ইউআই উপস্থাপন করতে ব্যবহার করতে পারি যা তাদের পছন্দেরটিকে বেছে নিতে দেয়। প্রতিটি 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);
 

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

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

 // 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() আমাদের একটি নির্দিষ্ট প্রয়োজনীয়তার সাথে মিলে এমন একটি মিডিয়া ডিভাইস খুলতে দেয়। এই প্রয়োজনীয়তাটি খুব আলগাভাবে সংজ্ঞায়িত করা যেতে পারে (অডিও এবং / বা ভিডিও), বা খুব নির্দিষ্ট (ন্যূনতম ক্যামেরা রেজোলিউশন বা একটি সঠিক ডিভাইস আইডি)। সুপারিশ করা হয় যে অ্যাপ্লিকেশনগুলি 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 ইন্টারফেসের সম্পূর্ণ ডকুমেন্টেশন এমডিএন ওয়েব ডক্সে পাওয়া যাবে।

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

একবার একটি মিডিয়া ডিভাইস খোলা হয়েছে এবং আমরা একটি আছে 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);
    }
}
 

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

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