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

ส่วนสื่อของ 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 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 มีพร็อพเพอร์ตี้ kind ที่เป็น audio หรือ video ซึ่งแสดงถึงประเภทของสื่อที่นําเสนอ แต่ละแทร็กจะปิดเสียงได้โดยสลับพร็อพเพอร์ตี้ enabled แทร็กมีพร็อพเพอร์ตี้บูลีน remote ซึ่งระบุว่ามาจาก RTCPeerConnection และมาจากแอปเทียบเท่าระยะไกล