얼마만에 작성하는 포스팅인지 모르겠다. 입사 이후에도 꾸준히 공부해서 블로그를 꽉 채우고 싶었지만 신입의 길은 멀고도 험난했으므로 지난 4달 간 정말 열심히 회사 업무에만 집중(할 수밖에 없었다. 매일매일이 도전의 연속)해왔다.
그 동안 매일 주어지는 task 들을 미션처럼 깨는 동안 알게모르게 많은 것들을 배웠지만 지금 돌이켜보니 기록이 아무것도 남아있지 않아 더 깊이 한번 더 공부할 수 있었음에도 흘려보낸 것은 아닌지 아쉬움이 남는다.
8월 초 입사한 후 2주가 되었을 때부터 회사는 풀 재택근무를 시작했고 아직도 이어지고 있다. 입사 5개월차인데 회사에는 열번 밖에 나가지 못하다니.
처음엔 좋았으나 이제는 업무효율에 있어 많이 아쉽기도 하다. 질문 하고 싶은 것들이 너무 많은데 질문 하나를 하려면 몇 번 더 고민하고 정리를 해서 질문하게 되니 쉬운 일은 아니다.
다만 이 코로나 시대에 회사의 사업아이템이 더 각광받게 되었다는 것은 고무적인 사실이다. 덕분에 연말에도 조금 더 바쁘게 일할 계획...
어쨌든 오늘 업무를 하면서 새롭게 만났던 벽들을 다시 정리해본다.
현재 지원중인 서비스 중에 화상통화 기능이 있는데, 화상통화를 하기 위해서는 user의 device 중 마이크와 카메라에 접근 권한을 요청해야 한다.
(승인을 받지 않고서는 절대 접근할 수 없게 되어있음)
오늘의 퀘스트는 접근요청시 거절한 사용자가 있을 경우 이를 미리 확인해서 다시금 접근권한 승인 요청을 할 수 있는가
Web API란?
이를 보기 전에 먼저 웹에서 지원하는 API 를 통해 접근 권한을 요청하는 코드를 확인해 보겠다.
API 란 말그대로 Application Programing Interface, 응용프로그램에서 기능을 제어할 수 있도록 운영체제나 프로그래밍 언어가 제공하는 인터페이스를 말한다.
인터페이스란?말그대로 기계간, 정보를 교환하기 위한 방법을 말하는 것.
그렇다면 web api 란 웹에서 여러 유용한 작업을 수행할 수 있도록 제공되는 규격이라고 말할 수 있겠다. 이러한 web api는 자바스크립트를 통해 접근 할 수 있으며 윈도우나 엘리먼트에 대한 작업들도 이에 속한다.(DOM,fetch 도 web api)
MediaDevices Interface?
카메라, 마이크, 공유화면 등 현재 연결된 미디어 입력 장치로의 접근 방법을 제공하는 인터페이스.
메서드
- enumerateDevices() : 시스템에서 사용 가능한 입출력 장치의 배열을 가져온다. 콘솔 로그를 통해 확인가능
- getDisplayMedia() : 디스플레이 화면 캡쳐 가능, 이를 통해 사진촬영 가능
- getUserMedia() : 사용자에게 권한 요청 후 활성화. 마이크 권한을 요청합니다. 카메라 권한을 요청합니다 와 같은 창이 뜨게 된다.
MediaDevices.getUserMedia()
오늘 포스팅의 주인공이다.
나는 리액트로 작업을 하고 있으므로 useEffect 내부에서 다음과 같이 작성하여 컴포넌트가 마운트 될 때 권한을 요청하도록 했다.
오디오와 비디오에 엑세스 권한을 요청하는 코드이다.
이렇게 코드를 작성할 경우, 해당 컴포넌트가 마운트 될 때 권한요청을 하는 창이 뜨게 되고,
차단할 경우
이런식으로 사용자에게 인폼을 줄 수 있다.
하지만 내가 하고 싶었던 것은, 번거롭게 사용자가 설정에 들어가 거절되어 있는 것을 삭제하고 다시 승인하고 이런 것들을 하지 않고 다시 승인요청을 주는 것이었는데(주 사용자가 나이든 중년 분들이 많을 것이므로) 아무리 스택오버플로우를 뒤지고 다녀도 방법이 나오지 않았다.
출처 (https://www.html5rocks.com/en/tutorials/getusermedia/intro/)
그 이유는 간단했다.
그 것이 불가능하기 때문!
유저가 승인/거절을 하면 브라우저에서 이 상태를 유지하게 되고, 유저가 이를 바꾸고자 할 때에는 브라우저 세팅에서 변경을 해야 한다는 것이다. 오랜 삽질 끝에 내려진 아름다운 결론이지만 덕분에 오늘은 조금은 낯선 api 에 대해 공부할 수 있는 기회가 되었다.
