בוחרים מצלמות, מיקרופונים ורמקולים מאפליקציית האינטרנט

Sam Dutton

דפדפנים מודרניים מאפשרים לבחור התקני קלט ופלט, כולל מצלמות, מיקרופונים ורמקולים.

למשל:

  • בטלפון, בוחרים במצלמה הקדמית או האחורית.
  • במחשב נייד, בוחרים את הרמקולים הפנימיים או הרמקול המחוברים באמצעות Bluetooth.
  • לווידאו צ'אט, בוחרים מיקרופון או מצלמה פנימיים או חיצוניים.

כל הפונקציונליות הזו נחשפת על ידי האובייקט MediaDevices, שמוחזר על ידי navigator.mediaDevices.

ל-MediaDevices יש שתי שיטות, שתיהן מוטמעות ב-Chrome 47 במחשב וב-Android: enumerateDevices() ו-getUserMedia().

בחירת מכשיר לפלט אודיו.

enumerateDevices()

מחזירה הבטחה שמעניקה גישה למערך אובייקטים של MediaDeviceInfo למכשירים זמינים.

השיטה דומה ל-MediaStreamTrack.getSources(), אבל בשונה מהשיטה הזו (שהוטמעה רק ב-Chrome), היא תואמת לתקנים וכוללת מכשירים לפלט אודיו. אפשר לנסות את התכונה הזו בהדגמות הבאות.

הנה קוד פשוט יותר מאחת מההדגמות:

navigator.mediaDevices.enumerateDevices()
    .then(gotDevices)
    .catch(errorCallback);
...
function gotDevices(deviceInfos) {

    ...

    for (var i = 0; i !== deviceInfos.length; ++i) {
    var deviceInfo = deviceInfos[i];
    var option = document.createElement('option');
    option.value = deviceInfo.deviceId;
    if (deviceInfo.kind === 'audioinput') {
        option.text = deviceInfo.label ||
        'Microphone ' + (audioInputSelect.length + 1);
        audioInputSelect.appendChild(option);
    } else if (deviceInfo.kind === 'audiooutput') {
        option.text = deviceInfo.label || 'Speaker ' +
        (audioOutputSelect.length + 1);
        audioOutputSelect.appendChild(option);
    } else if (deviceInfo.kind === 'videoinput') {
        option.text = deviceInfo.label || 'Camera ' +
        (videoSelect.length + 1);
        videoSelect.appendChild(option);
    }

    ...

}

לאחר אחזור המזהים של המכשירים הזמינים באמצעות enumerateDevices(), ניתן להשתמש ב-setSinkId() (שמוגדר ב-API של התקני פלט אודיו) כדי לשנות את יעד פלט האודיו של רכיב וידאו או אודיו:

element.setSinkId(sinkId)
    .then(function() {
    console.log('Audio output device attached: ' + sinkId);
    })
    .catch(function(error) {
    // ...
    });

השיטה הזו מגדירה את המכשיר לפלט אודיו מהאלמנט. לאחר קריאה לפונקציה setSinkId(), ניתן לקבל את המזהה של התקן האודיו הנוכחי לפלט עבור הרכיב עם המאפיין sinkId.

getUserMedia()

הפעולה הזו מחליפה את navigator.getUserMedia(), אבל במקום להשתמש בקריאה חוזרת (callback), מחזירה Promise שנותנת גישה ל-MediaStream. מומלץ למפתחים להשתמש ב-MediaDevices.getUserMedia(), אבל לא מתכננים להסיר את navigator.getUserMedia(): הוא יישאר חלק מהמפרט.

אפשר ליהנות מהדגמה באתר הדוגמאות של WebRTC.

הנה קטע קוד מהדגמה:

navigator.mediaDevices.getUserMedia(constraints)
    .then(function(stream) {
    var videoTracks = stream.getVideoTracks();
    console.log('Got stream with constraints:', constraints);
    console.log('Using video device: ' + videoTracks[0].label);
    stream.onended = function() {
        console.log('Stream ended');
    };
    window.stream = stream; // make variable available to console
    video.srcObject = stream;
    })
    .catch(function(error) {
    // ...
    }

דגל מנונע

השיטה enumerateDevices() היא 'ללא דגל' ב-Chrome, אבל עבור MediaDevices.getUserMedia() עדיין צריך להפעיל תכונות ניסיוניות של פלטפורמת האינטרנט בכתובת chrome://flags או להשתמש בסימון הבא של שורת הפקודה:

--enable-blink-features=GetUserMedia

באופן דומה עבור setSinkId(): מפעילים תכונות ניסיוניות של פלטפורמת האינטרנט או משתמשים בדגל:

--enable-blink-features=AudioOutputDevices

פרטים נוספים על התמיכה בדפדפן מופיעים בהמשך.

העתיד

הגורם המטפל באירועים שמוצע ב-ondevicechange עושה את מה שכתוב: האירוע devicechange מופעל כשקבוצת המכשירים הזמינים משתנה, וב-handler אפשר להפעיל את enumerateDevices() כדי לקבל את רשימת המכשירים החדשה. זה עדיין לא הוטמע בשום דפדפן.

הטיוטה של צילום המסך היא תוסף ל-Media Capture API, שמציע את שיטת MediaDevices.getDisplayMedia() שמאפשרת להשתמש באזורים במסך של המשתמש כמקור של סטרימינג של מדיה. יש גם הצעה לתוסף MediaDevices עבור getSupportedConstraints(), שמספק מידע על המגבלות שאפשר להשתמש בהן בקריאת getUserMedia(): יכולות האודיו והווידאו שנתמכות בדפדפן.

הדגמות

מידע נוסף