Camera

wetube 클론코딩을 하면서 잠깐 사용해 본적이 있었는데 다시 사용할 기회가 생겨서 좋았다.

 

먼저 우리는 zoom 클론코딩 중이기 때문에 카메라가 나와야 할 것이다.

따라서 카메라를 띄우고, 음소거를하고, 끄고, 카메라를 고를 수 있는 작업을 해볼 것이다.

 

먼저 가장 중요한 getMedia 함수를 만들어 주었다. 이 함수는 처음에는 인자 없이 실행되고 그 다음부터는 실행될 때는 인자가 있어야 한다. 잘 이해가 안되겠지만 설명을 한번 들어보면 이해가 될 수도 있다.

 

먼저 initcon selcon이 있는데 initialConstraint 와 selectedConstraint를 줄여서 저렇게 지정하였다. Constraint가 무엇이냐면 기본적으로 video : true, audio: true와 같이 지정할 수 있는데 우리가 카메라를 작동할때 오디오와 비디오를 사용할 것인지를 물어보는 것이다. 둘다 audio는 true로 지정해두었지만 video는 좀 다른 것을 확인할 수 있을 것이다.

 

이 부분은 조금 뒤에 설명해보겠다. 일단 2개의 constraint를 지정해두고 try문을 들어간다. async await를 사용하기때문에 오류처리를 하기 위해서 try catch문을 사용하였다. myStream은 전역변수이다. navigator.mediaDevices.getUserMedia()를 써줘야 기본적으로 카메라 사용이 가능하다. 우리는 처음에는 device_Id를 주지 않는다고 했으니 Constraint에는 iniCon이 들어갈 것이다. 여기서 facingMode : "user"라고 설정해두면 핸드폰으로 들어왔을 때 전방카메라가 기본으로 켜지도록 하는 것이다.  자 이제 myStream이 만들어 졌다면 myFace.srcObject에 myStream을 넣어주면 카메라 사용할 것인지 동의를 구하는 메시지가 나오고 동의를하면 바로 camera가 실행된다. 단 getMedia()를 실행한다면 ! getCam()은 아래에서 설명하겠다.

 

참고로 myFace는 video이다. 

getMedia는 어디서 실행하냐? 바로 enter_room이벤트가 실행되면 시켜줄 것이다.

그냥 실행시켜버리면 방에 들어가기 전에 켜져 버리기 때문에 callback함수 안에 넣어 안전하게 처리하였다.

 

그럼 이제 음소거와 카메라 전원버튼을 만들어보겠다. 둘다 엄~청 비슷하다.

myStream에는 이제 오디오트랙 비디오트랙 자막트랙 등 여러 트랙이 있는데.....

그중에 getAudioTracks()를 활용하면 auido의 설정을 바꿀 수 있다. 배열의 구조를 가지고 있고, 하나밖에 나오지 않았다.

근데 forEach를 굳이 써야하나라는 생각도 들었다. 이건 나중에 더 알게되면 알게될 수도..

track에는 enabled라는 속성이 있는데 처음에는 true로 되어있다. 그래서 muteBtn을 눌러줄 때 !를통해 기존의 값과 반대 값을 넣어주면 된다.

전역변수로 오디오와 카메라의 값을 false로 해두고 각 조건에 따라서 버튼의 값도 바뀌도록 해주었다.

cameraBtn인데 바뀐 것이라고는 getVideoTracks()이고 나머진 같다.

이렇게해주면 된다!! 이제 카메라를 바꾸는 것을 해볼텐데 여기가 조금 복잡하다 아까 설명하지 않았던 getCam을 설명해보려고한다.

 

여기서는 navigator.mediaDevices.enumerateDevices()를 사용하는데 이건 지금 내 컴퓨터 혹은 모바일에서 사용하고있는 장치들이 다 나온다. 이런 장치가 있었나 싶을정도로 꽤 나온다. 배열형식으로 나오는데 우리는 카메라만 바꿔주면 되므로 filter를 활용하여 kind가 videoinput인 것만 쏙쏙 골라온다. 

그리고 다시한번 forEach문을 사용하여서

select 안에 option을 만들고 opt.value는 deviceId(이게 중요) 

opt.innerText에는 label(이름)을 넣어준다.

 

그리고 nowStream은 getVideoTracks()[0]를 한번 더 확인하여 지금 나오고 있는 카메라의 label과 opt중에 일치하는 것이 있으면 그것을 기본값으로 지정해 주는 것이다. 그럼 저 select에서 다른 카메라를 고르면 다른 카메라가 실행되는 것만 만들면 되는데 여기서는 getMedia()를 다시 실행시켜주면 된다. 여기서 감이 올 것이다. getMedia( device_Id)를 넣어주면 우리가 고른 카메라로 변경이 된다. 

select값이 바뀌면 handleCamChange가 실행이 되도록하고

여기에서는 현재 선택된 select의 값을 넣어준다

그리고 selCon에 가져온 값을 넣어서 다시 myStream을 만들고 myFace에 넣어주면 된다.

여기서 if(!device_Id)를 준 이유는 getCam()은 select에 값을 넣는 함수인데 조건을 넣지않으면 계속 만들어지기 때문에 처음 실행될때 한번만 실행이 되도록 해준다.