🚀 새로고침 시 HLS ERROR

HLS Error

HLS 테스트를 진행하던 중, 다음과 같은 에러를 마주치게 되었다.

근데 정말 희한한 점은 재생에는 전혀 무리가 없다는 것. 즉, 스트리밍 기능에 영향을 미치지 않았다.

다만, Error라는 단어 자체가 보기 싫어서 왜 그런 것인지 파악해보기로 했다.

새로 고침 시 바로 받아오는 것이 문제?

재생 버튼을 따로 누르지 않아도, URL 요청에 의해서 다음과 같이 바로 m3u8이 응답되고,

그 m3u8파일을 읽어서 ts 요청을 보낸 후, 상황에 맞는 ts파일들을 응답받는다.

이것이 문제인 것 같았다.

새로 재생을 할 때, 기존 HLS 데이터를 삭제를 하지 않고 진행하기 때문에 발생하는 Error라고 추측을 하고, destroyHLS 메소드를 작성해보았다.

const hlsRef = useRef<Hls | null>(null);
...

const destroyHls = useCallback(() => {
    if (hlsRef.current) {
      hlsRef.current.destroy();
      hlsRef.current = null;
    }
  }, []);
  
  const initializeHls = (audio: HTMLMediaElement, streamUrl: string) => {
    destroyHls();
    const hls = new Hls(DEFAULT_STREAMING_CONFIG);
    hls.loadSource(streamUrl);
    hls.attachMedia(audio);
		...
  };

이렇게 적용을 해도 여전히 error가 발생했다.

또 원인이 무엇인가 생각해보니,

hlsRef를 null로 만들고 추적을 시키지 않아서 생기는 에러 같았다. 따라서 다음과 같이 코드를 추가했다

const hlsRef = useRef<Hls | null>(null);
...

const destroyHls = useCallback(() => {
    if (hlsRef.current) {
      hlsRef.current.destroy();
      hlsRef.current = null;
    }
  }, []);
  
  const initializeHls = (audio: HTMLMediaElement, streamUrl: string) => {
    destroyHls();
    const hls = new Hls(DEFAULT_STREAMING_CONFIG);
    hlsRef.current = hls; // 추가 부분
    hls.loadSource(streamUrl);
    hls.attachMedia(audio);
		...
  };