Google is committed to advancing racial equity for Black communities. See how.
דף זה תורגם על ידי Cloud Translation API.
Switch to English

תחילת העבודה עם מכשירי מדיה

בעת פיתוח לרשת, תקן WebRTC מספק ממשקי API לגישה למצלמות ומיקרופונים המחוברים למחשב או לסמארטפון. התקנים אלה מכונים בדרך כלל התקני מדיה וניתן לגשת אליהם באמצעות JavaScript דרך האובייקט navigator.mediaDevices , שמיישם את ממשק MediaDevices . מאובייקט זה אנו יכולים למנות את כל המכשירים המחוברים, להאזין לשינויי מכשירים (כאשר מכשיר מחובר או מנותק) ולפתוח מכשיר לאחזור זרם מדיה (ראה להלן).

הדרך הנפוצה ביותר לשימוש היא באמצעות הפונקציה 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 המכיל וידאו אחד MediaStream שמע אחת. אם הרשות נשללת, נזרק PermissionDeniedError . במקרה ואין התקנים תואמים המחוברים, NotFoundError ייזרק.

הפניה המלאה לממשק ה- API לממשק MediaDevices זמינה MediaDevices האינטרנט של MDN .

שאילתת התקני מדיה

ביישום מורכב יותר, סביר להניח שנרצה לבדוק את כל המצלמות והמיקרופונים המחוברים ולספק את המשוב המתאים למשתמש. ניתן לעשות זאת על ידי קריאה לפונקציה enumerateDevices() . פעולה זו תחזיר הבטחה MediaDevicesInfo למגוון של MediaDevicesInfo המתאר כל מכשיר מדיה ידוע. אנו יכולים להשתמש בזה כדי להציג ממשק משתמש למשתמש אשר בואו לבחור את זה שהוא מעדיף. כל MediaDevicesInfo מכיל מאפיין בשם kind עם הערך audioinput audiooutput , audiooutput videoinput או 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 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, אוזניות Bluetooth או קבוצה של רמקולים חיצוניים. על מנת לתמוך בזה כראוי, על יישום אינטרנט להקשיב לשינויים במכשירי המדיה. ניתן לעשות זאת על ידי הוספת מאזין ל- 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() מאפשר לנו לפתוח התקן מדיה התואם לדרישה מסוימת. ניתן להגדיר דרישה זו באופן רופף מאוד (שמע ו / או וידאו), או ספציפית מאוד (רזולוציית מצלמה מינימלית או מזהה מכשיר מדויק). מומלץ ליישומים המשתמשים בממשק ה- 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() יכיל בדרך כלל את המאפיינים autoplay playsinline autoplay . תכונת autoplay תגרום לזרמים חדשים שהוקצו לאלמנט לפעול אוטומטית. התכונה ' playsinline מאפשרת לווידיאו להפעלה מוטבעת, במקום רק במסך מלא, בדפדפנים ניידים מסוימים. מומלץ להשתמש controls="false" עבור זרמים חיים, אלא אם כן המשתמש צריך להיות מסוגל להשהות אותם.

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