navigator.mediaDevices에 의해 노출 된 MediaDevices 객체는 getUserMedia 메소드를 제공합니다.

경고 : 네비게이터 객체는 getUserMedia() 메서드도 노출하지만 여전히 작동하지만 더 이상 사용되지 않습니다. 일관성을 위해 API가 mediaDevices 객체 내로 이동 되었습니다. 

이것이 우리가 이 방법을 사용할 수 있는 방법입니다.

버튼이 있다고 가정 해보십시오.

<button>Start streaming</button>

사용자가 이 버튼을 클릭 할 때까지 기다렸다가 navigator.mediaDevices.getUserMedia() 메소드를 호출합니다.

원하는 미디어 제약 조건을 설명하는 객체를 전달합니다. 비디오 입력을 원하면 호출

navigator.mediaDevices.getUserMedia({
  video: true
})

우리는 이러한 제약 조건에 매우 구체적 일 수 있습니다.

navigator.mediaDevices.getUserMedia({
  video: {
    minAspectRatio: 1.333,
    minFrameRate: 60,
    width: 640,
    heigth: 480
  }
})

navigator.mediaDevices.getSupportedConstraints()를 호출하여 장치가 지원하는 모든 제약 조건의 목록을 얻을 수 있습니다.

오디오를 원하면 오디오를 전달할 수 있습니다. true :

navigator.mediaDevices.getUserMedia({
  audio: true
})

둘 다 원하는 경우 :

navigator.mediaDevices.getUserMedia({
  video: true,
  audio: true
})

이 메소드는 promise를 반환하므로 async/await를 사용하여 결과를 스트림 변수로 가져옵니다.

document.querySelector('button').addEventListener('click', async (e) => {
  const stream = await navigator.mediaDevices.getUserMedia({
    video: true
  })
})

버튼을 클릭하면 미디어 장치 사용 권한을 허용하는 브라우저 패널이 트리거 됩니다. 

Codepen 참조 : https://codepen.io/flaviocopes/pen/WWyGmr 

완료되면 getUserMedia()에서 얻은 스트림 객체를 다양한 용도로 사용할 수 있습니다. 가장 즉각적인 방법은 비디오 스트림을 페이지의 비디오 요소에 표시하는 것입니다. 

<button>Start streaming</button>
<video autoplay>Start streaming</button>

document.querySelector('button').addEventListener('click', async (e) => {
  const stream = await navigator.mediaDevices.getUserMedia({
    video: true
  })
  document.querySelector('video').srcObject = stream
})

Codepen 참조 : https://codepen.io/flaviocopes/pen/wZXzbB 

예제 

다음은 비디오 카메라에 액세스하여 페이지에서 비디오를 재생하도록 요청하는 Codepen 예제입니다. 

카메라에 액세스 할 수 있는 버튼을 추가 한 다음 autoplay 속성과 함께 비디오 요소를 추가합니다. 

<button id="get-access">Get access to camera</button>
<video autoplay></video>

JS는 버튼 클릭을 수신 한 다음 비디오를 요청하는 navigator.mediaDevices.getUserMedia()를 호출합니다. 그런 다음 getUserMedia() 호출 결과에서 stream.getVideoTracks()를 호출하여 사용되는 카메라 이름에 액세스합니다. 

스트림은 비디오 태그의 소스 객체로 설정되어 재생이 가능합니다. 

document.querySelector('#get-access').addEventListener('click', async function init(e) {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: true
    })
    document.querySelector('video').srcObject = stream
    document.querySelector('#get-access').setAttribute('hidden', true)
    setTimeout(() => { track.stop() }, 3 * 1000)
  } catch (error) {
    alert(`${error.name}`)
    console.error(error)
  }
})

getUserMedia()의 인수는 비디오 스트림에 대한 추가 요구 사항을 지정할 수 있습니다. 

navigator.mediaDevices.getUserMedia({
  video: {
    mandatory: { minAspectRatio: 1.333, maxAspectRatio: 1.334 },
    optional: [
      { minFrameRate: 60 },
      { maxWidth: 640 },
      { maxHeigth: 480 }
    ]
  }
}, successCallback, errorCallback);

오디오 스트림을 얻으려면 오디오 미디어 객체를 요청하고 stream.getVideoTracks() 대신 stream.getAudioTracks()를 호출하십시오. 

3 초간 재생 한 후 track.stop()을 호출하여 비디오 스트리밍을 중지합니다.