গুগল ব্ল্যাক সম্প্রদায়ের জন্য জাতিগত ইকুইটি আগুয়ান করতে প্রতিশ্রুতিবদ্ধ হয়। দেখ কিভাবে.
This page was translated by the Cloud Translation API.
Switch to English

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

যখন ওয়েবের জন্য উন্নয়নশীল হলে, 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);
    });
 

ব্যবহার ASYNC / অপেক্ষায় রয়েছেন

 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 ইন্টারফেস পাওয়া যাবে MDN ওয়েব ডক্স

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

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

অঙ্গীকার ব্যবহার

 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 / অপেক্ষায় রয়েছেন

 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);
 

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

অধিকাংশ কম্পিউটারে রানটাইম সময় বিভিন্ন ডিভাইস প্লাগিং করাকে সমর্থন করি। এটা একটা ওয়েবক্যাম ইউএসবি, একটি ব্লুটুথ হেডসেট অথবা এক্সটারনাল ভাষাভাষী একটি সেট দ্বারা সংযুক্ত হতে পারে। সঠিকভাবে এই সমর্থন করার জন্য, একটি ওয়েব অ্যাপ্লিকেশন মিডিয়া ডিভাইস পরিবর্তনের জন্য শুনতে হবে। এই একটি শ্রোতা যোগ করে কাজ করা যেতে পারে 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() একটি মিডিয়া ডিভাইস যে একটি নির্দিষ্ট প্রয়োজন ম্যাচ খুলতে আমাদের পারেন। এই প্রয়োজনীয়তার খুব ঢিলেঢালাভাবে সংজ্ঞায়িত করা যেতে পারে (অডিও এবং / অথবা ভিডিও), অথবা অত্যন্ত সুনির্দিষ্ট (ন্যূনতম ক্যামেরা রেজল্যুশন বা একটি সঠিক ডিভাইস ID)। এটা যে অ্যাপ্লিকেশন ব্যবহার বাঞ্ছনীয় getUserMedia() এপিআই প্রথম বিদ্যমান ডিভাইসগুলি পরীক্ষা করুন এবং তারপর একটি বাধ্যতা যে সঠিক ডিভাইসটি ব্যবহার মিলে যায় নির্দিষ্ট করে 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() সাধারণত বৈশিষ্ট্যাবলী থাকবে autoplay এবং playsinlineautoplay অ্যাট্রিবিউট নতুন স্ট্রিম স্বয়ংক্রিয়ভাবে খেলতে উপাদান নির্ধারিত হতে হবে। playsinline অ্যাট্রিবিউট খেলা ইনলাইন ভিডিও অনুমতি দেয়, পরিবর্তে শুধুমাত্র পূর্ণ স্ক্রিনে এর, নির্দিষ্ট মোবাইল ব্রাউজারে। এছাড়া ব্যবহার করা বাঞ্ছনীয় controls="false" লাইভ স্ট্রীমগুলির জন্য, যদি না ব্যবহারকারী সেগুলিকে বিরাম করতে সক্ষম হওয়া উচিত।

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