גוגל מחוייב לקידום עצמי גזעי עבור קהילות שחורות. תראה איך.
דף זה תורגם על ידי Cloud Translation API.
Switch to English

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

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

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

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