[트러블슈팅, JS] - getUserMedia() 관련 에러

22.09.03 기록

1. getUserMedia() 메서드가 호환이 안되는 에러  
2. getUserMedia()를 사용하여 video 태그에 받아왔지만 검은 화면만 나오는 에러

결론
1. navigator.getUserMedia(): X, navigator.mediaDevices.getUserMedia(): O
2. <video> 태그에 playsinline 속성을 설정해주기!!

---

✅ 해결 과정 1

진행중인 프로젝트가 구글 미트와 zoom과 같은 화상 회의를 기반으로 하기에, 사용자의 마이크와 카메라를 가져오는 것이 필수적이다.

처음 해보는 것이기 때문에 여러 자료들을 찾아보며 진행하였는데, 이것저것 코딩해 보아도 전혀 작동하지 않는 문제가 있었다..

조금 더 찾아보니 Mozilla의 MDN Web Docs 사이트에서 원인을 찾을 수 있었다.

링크

navagator.getUserMedia()는 더 이상 사용되지 않는 메서드이다.
최신 버전인 navigator.mediaDevices.getUserMedia() 메서드를 사용해라. 라고 정리할 수 있겠다.

그동안 찾았던 자료들이 조금 오래된 자료들이여서 더 이상 사용되지 않는 메서드로 작성된 코드들이라 애초에 작동을 안하는 것이였다.. 꼭 navigator.mediaDevices.getUserMedia() 을 사용하자!!

---

✅ 해결 과정 2

navigator.mediaDevices.getUserMedia() 를 사용하여 미디어를 불러오는 것은 성공했다. 화면에 비디오 화면이 나온다. 하지만 검은색으로 나온다..

분명 캠에는 문제가 없는데 비디오 화면이 검은색으로만 보인다면, video 태그에 playsinline 속성을 추가하자!

근데 정확히 playsinline 속성에 대해 알고 싶어서 검색해 본 결과, 우선 아이폰, IOS 이야기가 많이 나온다. 그리고 "playsinline 속성은 자동 재생을 위한 속성이다", "페이지 안에서 재생하라는 설정이다", "해당 속성을 추가하면 전체 화면 전환 없이 바로 재생이 된다". 등의 의견들이 있다.

내가 개발을 진행하는 환경이 MacOS이기도 하고, 실제 테스트 할 때도 사파리를 사용했기 때문에 검은 화면으로 나왔던걸까? 다음번에 윈도우 환경에서 테스트를 해보고, playsinline 속성에 대해 정확하게 정리해봐야겠다.

일단은.. 사파리에서 동영상 재생이 검정색으로 나오는 상황에서 video 태그에 playsinline 속성을 추가하니 영상이 정상적으로 잘 나오게 되었다!