[React] S3 Url 일정 시간 동안 not Found 리턴 되는 경우 Video 처리 방안

• aws s3 버킷에 에셋을 올리고 나서 url 을 리턴 받는데,
• 비디오의 경우 일정 시간 동안 해당 url 이 not Found 를 리턴한다
• 아마도 인코딩 시간동안은 접근이 안되는 것으로 추정(카카오 스토리지도 동일한 현상)
• 해결방법으로 not Found 를 받는 경우 비디오 요소를 리랜더링 해서 해당 url 에 접근 재시도
  • 일정 주기 & 제한된 횟수 만큼

 

solution1)

• 비디오 자체를 리랜더링
• 내부 state 를 <video> 태그의 key 로 사용하여 리랜더링 될 수 있도록 한다
• <video> 태그의 onError 속성 사용

component/VideoWithErrorCheck.tsx

import { useState } from "react";

export default function VideoWithErrorCheck({ ...props }) {
  const [errorCount, setErrorCount] = useState(0);
  const onVideoError = () => {
    // S3 URL 최초 몇 초 동안은 not Found 발생
    // 3초마다 1번씩 최대 10번만 시도
    if (errorCount < 10) {
      setTimeout(() => {
        setErrorCount((prevErrorCount) => prevErrorCount + 1);
      }, 3000);
    }
  };
  return <video key={errorCount} onError={onVideoError} {...props}></video>;
}

 

 

컴포넌트 사용부
myPage.tsx

<VideoWithErrorCheck
    width={"100%"}
    height={"100%"}
    style={{
      objectFit: "cover",
    }}
    src={`${el.mediaPath}`}
    controls
    autoPlay
    muted
    loop
/>