[Web API] Media Capture and Streams

Media Capture and Streams API

https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API

 

MediaDevices

MediaDevices.enumerateDevices()

- Returns: Promise, fulfillment handler의 인수는 MediaDeviceInfo 배열

 

사용 가능한 Media Device의 정보를 확인할 수 있다.

navigator.mediaDevices.enumerateDevices()
    .then(devices => {
        devices.forEach(device => console.log(device.kind, device.deviceId));
    })
    .catch(err => console.log(err.name, err.message));

MediaDevices.getUserMedia()

- Parameters: MediaStreamConstraints

- Returns: Promise, fulfillment handler의 인수는 MediaStream 객체

 

 

MediaStream

MediaStream.getTracks()

- Returns: array of MediaStreamTrack objects

MediaStream.getAudioTracks()

- Returns: array of MediaStreamTrack objects

 

MediaStream 객체는 DOM의 video 요소에 연결해서 실시간 재생이 가능하다.

let constraint = { audio: false, video: true };
navigator.mediaDevices.getUserMedia(constraint)
    .then(function (mediaStream) {
        let video = document.querySelector('video');
        video.srcObject = mediaStream;
        // video.src = window.URL.createObjectURL(mediaStream);

        video.onloadedmetadata = () => video.play();
    })
    .catch((err) => console.log(err.name, err.message));

 

 

MediaStreamTrack

 

 

MediaStreamConstraints

MediaStreamConstraints.video

MediaStreamConstraints.audio

- Value: true | false | MediaTrackConstraints

 

MediaDevices.getUserMedia() 메소드의 인수로 전달되는 MediaStreamConstraints 객체를 이용하여 디테일한 설정이 가능하다.

let constraint = {
    audio: false,
    video: {
        facingMode: { exact: "user" }, // "environment"
        width: { min: 640, ideal: 1280, max: 1920 },
        height: { min: 480, ideal: 720, max: 1080 }
    }
};

 

 

Capabilities, constraints, and settings

https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints

 

 

References

https://blog.addpipe.com/recording-audio-in-the-browser-using-pure-html5-and-minimal-javascript/

https://www.html5rocks.com/en/tutorials/getusermedia/intro/

https://www.youtube.com/watch?v=K6L38xk2rkk