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

Sam Dutton

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

לדוגמה:

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

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

ל-MediaDevice יש שתי שיטות, שתיהן מוטמעות ב-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() (מוגדר ב-Audio Output devices API) כדי לשנות את היעד של פלט האודיו עבור רכיב וידאו או אודיו:

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

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

getUserMedia()

הפעולה הזו מחליפה את הערך navigator.getUserMedia(), אבל במקום להשתמש ב-callback, הפונקציה מחזירה הבטחה שמעניקה גישה ל-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סיכום API, שמציע שיטת MediaDevices.getDisplayMedia() שמאפשר אזורים בתצוגה של המשתמש לשמש כמקור של מדיה . יש גם הצעה לתוסף MediaDevices עבור getSupportedConstraints() , שמספק מידע על המגבלות שבהן אפשר להשתמש שיחת getUserMedia(): יכולות אודיו ווידאו שנתמכות על ידי הדפדפן.

הדגמות

למידע נוסף