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

Sam Dutton

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

לדוגמה:

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

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

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

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

enumerateDevices()

הפונקציה מחזירה Promise שמעניק גישה למערך של אובייקטים מסוג 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), היא מחזירה 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 מופעל כשהקבוצה של המכשירים הזמינים משתנה, ובבורר אפשר לקרוא ל-enumerateDevices() כדי לקבל את רשימת המכשירים החדשה. עדיין לא הטמענו את התכונה הזו באף דפדפן.

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

הדגמות

למידע נוסף