Google is committed to advancing racial equity for Black communities. See how.
این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.
Switch to English

شروع به کار با دستگاه های رسانه ای

در هنگام توسعه وب ، استاندارد WebRTC API هایی را برای دسترسی به دوربین ها و میکروفن های متصل به رایانه یا تلفن هوشمند فراهم می کند. این دستگاه ها معمولاً به دستگاه های رسانه ای گفته می شوند و از طریق شیء navigator.mediaDevices که واسط MediaDevices را پیاده سازی می کند ، با JavaScript قابل دسترسی هستند. از این شیء می توانیم تمام دستگاه های متصل را شمارش کنیم ، تغییرات دستگاه را گوش دهید (هنگامی که یک دستگاه به هم متصل است یا قطع می شود) و یک دستگاه را برای بازیابی Media Stream باز می کنیم (به تصویر زیر مراجعه کنید).

متداول ترین روش استفاده از این روش از طریق تابع 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 / await

 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 پرتاب می شود.

مرجع کامل API برای رابط 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 / await

 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 ، هدست بلوتوث یا مجموعه بلندگوهای خارجی متصل است. برای پشتیبانی صحیح از این ، یک برنامه وب باید به گوش دادن به تغییرات دستگاه های رسانه ای باشد. این کار می تواند با اضافه کردن یک شنونده به 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() به ما اجازه می دهد تا یک وسیله رسانه را باز کنیم که مطابق با یک مورد خاص باشد. این نیاز می تواند بسیار آزاد تعریف شود (صوتی و / یا فیلم) یا بسیار خاص (حداقل وضوح دوربین یا شناسه دقیق دستگاه). توصیه می شود برنامه هایی که از API 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);
    }
}
 

HTML مورد نیاز برای یک عنصر ویدئویی معمولی که با getUserMedia() استفاده می شود getUserMedia() معمولاً دارای ویژگی های autoplay و playsinline . ویژگی ویژگی autoplay باعث می شود جریانهای جدیدی که به این عنصر اختصاص داده می شوند به صورت خودکار بازی کنند. ویژگی playsinline به ویدیو اجازه می دهد تا به جای فقط در تمام صفحه ، در مرورگرهای تلفن همراه بصورت آنلاین بازی کند. همچنین توصیه می شود برای پخش مستقیم از controls="false" ، مگر اینکه کاربر قادر به مکث آنها باشد.

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