MediaDevices.getUserMedia() 에 대해

9777 단어 getUserMedianavigatormediaDevicesStreamAPIWebRTC

소개



WebRTC를 구현하려면 카메라와 마이크에 액세스해야 하므로,navigator.getUserMedia()를 조사하고 메모로 Qiita에 게시하십시오.

막상, 본제에



즉시 Google 검색을 시도하면,
MOZILLA DEVELOPER NETWORK (Navigator.getUserMedia)
도착했습니다.

응? 왠지 모습이 이상하다. . .



빨간색 프레임 부분에 주목하고 싶다,



그러므로 navigator.getUserMedia는 어느새 웹 표준에서 폐지된 것 같다.

새로워진 MediaDevice.getUserMedia()에 대해 알아보자.



주요 변경 사항


  • navigator.getUserMedia () → navigator.mediaDevices.getUserMedia ()
  • 공급 업체 접두사가 더 이상 필요하지 않습니다
  • 콜백이 아니라 Promiseベース

    구현 방법



    [구 : navigator.getUserMedia()]

    sample.js
    navigator.getUserMedia = navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia;

if (navigator.getUserMedia) {
   navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } },
      function(stream) {
         var video = document.querySelector('video');
         video.src = window.URL.createObjectURL(stream);
         video.onloadedmetadata = function(e) {
           video.play();
         };
      },
      function(err) {
         console.log("The following error occurred: " + err.name);
      }
   );
} else {
   console.log("getUserMedia not supported");
}

    [신규 : navigator.MediaDevices.getUserMedia()]

    sample2.js
    navigator.mediaDevices = navigator.mediaDevices || ((navigator.mozGetUserMedia || navigator.webkitGetUserMedia) ? {
   getUserMedia: function(c) {
     return new Promise(function(y, n) {
       (navigator.mozGetUserMedia ||
        navigator.webkitGetUserMedia).call(navigator, c, y, n);
     });
   }
} : null);

if (!navigator.mediaDevices) {
  console.log("getUserMedia() not supported.");
  return;
}

// Prefer camera resolution nearest to 1280x720.

var constraints = { audio: true, video: { width: 1280, height: 720 } };

navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
  var video = document.querySelector('video');
  video.srcObject = stream
  video.onloadedmetadata = function(e) {
    video.play();
  };
})
.catch(function(err) {
  console.log(err.name + ": " + err.message);
});

    싹둑이런 느낌.

    navigator.getUserMedia를 사용하면 브라우저에 화가 나서,
    앞으로는 navigator.mediaDevices.getUserMedia() 를 사용하고 싶습니다.
    • [webRTC for android vol3] trickle ICE
    [PeerJS] 실시간 화상 통화 데모 실장편(3) - 카메라 영상 스트리밍

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage