การจับภาพสื่อและข้อจํากัด

ส่วนสื่อของ WebRTC กล่าวถึงวิธีเข้าถึงฮาร์ดแวร์ที่สามารถตรวจจับได้ วิดีโอและเสียง เช่น กล้องและไมโครโฟน รวมถึงวิธีการสตรีมสื่อ งาน นอกจากนี้ยังครอบคลุมถึงสื่อ Display ซึ่งเป็นวิธีที่แอปพลิเคชันแสดงบนหน้าจอ การจับภาพ

อุปกรณ์สื่อ

กล้องและไมโครโฟนทั้งหมดที่เบราว์เซอร์รองรับจะมีการเข้าถึง และ จัดการผ่านออบเจ็กต์ navigator.mediaDevices แอปพลิเคชันสามารถเรียกข้อมูลได้ รายการปัจจุบันของอุปกรณ์ที่เชื่อมต่อ และรอรับการเปลี่ยนแปลงเพราะ กล้องและไมโครโฟนเชื่อมต่อกันผ่าน USB และสามารถเชื่อมต่อและ ถูกตัดการเชื่อมต่อในวงจรของแอปพลิเคชัน ตั้งแต่สถานะของสื่อ อุปกรณ์อาจเปลี่ยนแปลงได้ตลอดเวลา ขอแนะนำให้แอปพลิเคชันลงทะเบียน เปลี่ยนอุปกรณ์เพื่อให้จัดการการเปลี่ยนแปลงได้อย่างเหมาะสม

ข้อจำกัด

เมื่อเข้าถึงอุปกรณ์สื่อ ก็ควรระบุรายละเอียด ข้อจำกัดมากที่สุดเท่าที่จะเป็นไปได้ แม้ว่าคุณจะสามารถเปิดกล้องเริ่มต้นและ ไมโครโฟนที่มีข้อจำกัดง่ายๆ อาจส่งสตรีมสื่อที่มีระยะทางไกล เหมาะสมที่สุดสำหรับแอปพลิเคชันแล้ว

มีการกำหนดข้อจำกัดเฉพาะไว้ในออบเจ็กต์ MediaTrackConstraint 1 สำหรับ ส่วนเสียงและอีกช่องสำหรับ วิดีโอ แอตทริบิวต์ในออบเจ็กต์นี้เป็นประเภท ConstraintLong, ConstraintBoolean, ConstraintDouble หรือ ConstraintDOMString ซึ่งอาจเป็นค่าเฉพาะ (เช่น ตัวเลข บูลีนหรือสตริง) ช่วง (LongRange หรือ DoubleRange ที่มีค่าต่ำสุดและ ค่าสูงสุด) หรือออบเจ็กต์ที่มีคำจำกัดความ ideal หรือ exact สำหรับ ค่าที่เจาะจง เบราว์เซอร์จะพยายามเลือกค่าที่ใกล้เคียงที่สุด สำหรับช่วง ระบบจะใช้ค่าที่ดีที่สุดในช่วงนั้น เมื่อexactคือ จะมีเฉพาะสตรีมสื่อที่ตรงกับข้อจำกัดนั้นทุกประการ ส่งคืนแล้ว

// Camera with a resolution as close to 640x480 as possible
{
    "video": {
        "width": 640,
        "height": 480
    }
}

// Camera with a resolution in the range 640x480 to 1024x768
{
    "video": {
        "width": {
            "min": 640,
            "max": 1024
        },
        "height": {
            "min": 480,
            "max": 768
        }
    }
}

// Camera with the exact resolution of 1024x768
{
    "video": {
        "width": {
            "exact": 1024
        },
        "height": {
            "exact": 768
        }
    }
}

หากต้องการระบุการกำหนดค่าจริงของแทร็กสื่อบางแทร็ก เราจะโทรหา MediaStreamTrack.getSettings() ซึ่งแสดงผล ใช้ MediaTrackSettings อยู่ในขณะนี้

การอัปเดตข้อจำกัดของแทร็กจากอุปกรณ์สื่อที่เรากำหนด เปิดแล้ว โดยโทรหา applyConstraints() ในแทร็ก ซึ่งช่วยให้ แอปพลิเคชันกำหนดค่าอุปกรณ์สื่ออีกครั้งโดยไม่ต้องปิด ที่มีอยู่

สื่อ Display

แอปพลิเคชันที่ต้องการจับภาพหน้าจอและบันทึกวิดีโอหน้าจอได้ ต้องใช้ Display Media API ฟังก์ชัน getDisplayMedia() (ซึ่งเป็นส่วน ของ navigator.mediaDevices คล้ายกับ getUserMedia() และใช้สำหรับ วัตถุประสงค์ของการเปิดเนื้อหาของจอแสดงผล (หรือส่วนใดส่วนหนึ่ง เช่น ) MediaStream ที่ส่งคืนจะทำงานเหมือนกับเมื่อใช้ getUserMedia()

ข้อจำกัดสำหรับ getDisplayMedia() แตกต่างจากข้อจำกัดที่ใช้สำหรับปกติ อินพุตวิดีโอหรือเสียง

{
    video: {
        cursor: 'always' | 'motion' | 'never',
        displaySurface: 'application' | 'browser' | 'monitor' | 'window'
    }
}

ตัวอย่างโค้ดด้านบนแสดงข้อจำกัดพิเศษสำหรับการบันทึกหน้าจอ โปรดทราบว่าเบราว์เซอร์บางรายการที่มีจอแสดงผลอาจไม่รองรับ การสนับสนุนสื่อ

สตรีมและแทร็ก

MediaStream หมายถึงสตรีมเนื้อหาสื่อซึ่งประกอบด้วยแทร็กต่างๆ (MediaStreamTrack) ของเสียงและวิดีโอ คุณสามารถเรียกดูแทร็กทั้งหมดจาก MediaStream โดยการเรียกใช้ MediaStream.getTracks() ซึ่งแสดงผลอาร์เรย์ของ ออบเจ็กต์ MediaStreamTrack รายการ

MediaStreamTrack

MediaStreamTrack มีพร็อพเพอร์ตี้ kind ที่เป็น audio หรือ video เพื่อระบุชนิดของสื่อที่ใช้ แต่ละแทร็กสามารถปิดเสียงได้โดยการสลับ พร็อพเพอร์ตี้ enabled แทร็กมีพร็อพเพอร์ตี้บูลีน remote ซึ่งระบุ หากข้อมูลดังกล่าวมาจาก RTCPeerConnection และมาจากเครื่องระยะไกล