230102 [ERROR] srcObject가 원하는 유형 MediaSourceHandle 또는 MediaStream

사용한 툴 REDUX/TOOLKIT

오류내용

Uncaught TypeError: Failed to set the 'srcObject' property on 'HTMLMediaElement': The provided value is not of type '(MediaSourceHandle or MediaStream)'.
해석 (papago)
Uncatched TypeError: 'HTMLMediaElement'에서 'srcObject' 속성을 설정하지 못했습니다. 제공된 값이 '(MediaSourceHandle 또는 MediaStream)' 유형이 아닙니다.

오류과정

• 화상 채팅 미리보기 기능을 구현하는 도중에 에러가 발생 했고 srcObject에 대한 이해도가 전혀 없었기 때문에 단순하게 stream을 디스패치하고 mediaStream객체안에 active에 블린값을 받는 줄 알고 구독하는 컴포넌트에 넘겨주고있다

해결과정

• 일단 mediaStrea이라는 객체값을 찾아야 했기 때문에 콘솔로고로 값들을 찾기 시작

navigator.mediaDevices.getUserMedia();
console.log(navigator.mediaDevices.getUserMedia())
    .then(stream => {
        console.log(stream)
        store.dispatch(CALL_LOCAL_STREAM(stream));

• 디스패치부터 콘솔로고로 확인했고
  navigator.mediaDevices.getUserMedia() 어떤 값을 가르키고 있는지 궁금해서 확인
  PromiseResult키에 MediaStream 값이 있었고 바로 리듀서도 수정

• 구독하고 있는 컴포넌트에서 console.log 값
  (아래 코드 첫줄)
  

    const localStream = useSelector(state=> state.call.localStream);
    const localVideoRef = useRef();
    useEffect(() => { 
        const localVideo = localVideoRef.current;
        if (localStream) {
            console.log(localVideo);
            
            localVideo.srcObject = localStream;

            console.log(localStream)
            localVideo.onloadedmetadata = () => {
                localVideo.play();
                
            }
        }
       
     },[localStream])

해결

• 오류과정에서 stream을 콘솔로그로 봤을 때 값이 mediaStream 객체안에 값이 있는 키는 active밖에없었고 active의 블린값을 사용하는 줄 알았다.
  하지만 srcObject 속성은 mediaStream 객체자체가 필요하기 때문에 오류가 발생

• 하나를 얻었더니 하나를 잃었다 리듀서에서 A non-serializable 오류. 직렬화가 불가능한 값을 넘겨주기 때문에 발생한 에러

참고

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject