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

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

อุปกรณ์สื่อ

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

ข้อจำกัด

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

ข้อจำกัดที่เฉพาะเจาะจงจะกำหนดไว้ในออบเจ็กต์ MediaTrackConstraint โดยมีออบเจ็กต์หนึ่งสำหรับเสียงและอีกออบเจ็กต์หนึ่งสำหรับวิดีโอ แอตทริบิวต์ในออบเจ็กต์นี้มีประเภทเป็น 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'
    }
}

ข้อมูลโค้ดด้านบนแสดงวิธีที่ข้อจำกัดพิเศษสำหรับการบันทึกหน้าจอ ทำงาน โปรดทราบว่าเบราว์เซอร์บางตัวที่รองรับ display media อาจไม่รองรับฟีเจอร์เหล่านี้

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

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

MediaStreamTrack

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