گوگل به پیشبرد تساوی نژادی برای جوامع سیاه متعهد است. ببینید چگونه.
این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.
Switch to English

آغاز به کار با دستگاه های رسانه

هنگامی که در حال توسعه برای وب، استاندارد WebRTC به رابط های برنامه کاربردی برای دسترسی به دوربین ها و میکروفن متصل به کامپیوتر یا گوشی های هوشمند فراهم می کند. این دستگاه ها معمولا به عنوان رسانه دستگاه اشاره می کند و می توان با جاوا اسکریپت از طریق دیده 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 رخ می دهد.

از API مرجع کامل برای MediaDevices رابط در دسترس است اسناد وب MDN .

پرس و جو از دستگاه های رسانه

در یک برنامه پیچیده تر، ما به احتمال زیاد می خواهد به بررسی تمام دوربین های متصل و میکروفن و ارائه بازخورد مناسب به کاربر. این را می توان با تماس با تابع انجام enumerateDevices() . این وعده بازگشت است که حل به آرایه ای از MediaDevicesInfo که هر دستگاه رسانه شناخته شده توصیف می کنند. ما می توانیم این را به ارائه یک رابط کاربری به کاربر که اجازه دهید آنها را یکی از آنها ترجیح می دهید استفاده کنید. هر 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);
 

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

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

از HTML مورد نیاز برای یک عنصر ویدیو معمولی استفاده می شود با 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>