Safari 16.0 이슈 대응기

평화로운 일 중 연락이 왔습니다.

"Mac OS 업데이트 이후 사파리에서 웹 원격제어 페이지가 검은화면입니다." 라는 연락이..

 

아아~ 사파리여 ㅠ 

 

대응을 하기위해 맥 업데이트를 하고, 확인해보니 검은색 화면이 나왔습니다. 😂

디버거에 에러가 있길 바랬지만 역시나 에러는 없었습니다~

 

이러면 이제 정상으로 동작하는 크롬과 비교를 하는데 원격 제어 화면을 실행하는 비디오 엘리먼트가 사이즈가 0으로 설정되어있었습니다.

그로인해서 화면이 검은 화면으로 표시되고 있었습니다. (사실 그냥 안보이던거였던..)

<video width="0" height="0" /> // why..?

 

왜~ 사이즈 조절이 안되고있을까? 싶어서 사이즈를 변경하는 로직들을 검색했습니다.

로그도 찍고~ 디버깅도하면서 보니 비디오 이벤트 중 timeupdate 에서 사이즈를 업데이트 하고있었습니다. 유사코드로 보면 아래와 같았습니다.

$video.addEventListener('timeupdate', () => changeSize(width, height));

 

 문제는 사파리 16에서 timeupdate 이벤트가 발생 안하고 있었습니다..ㅋㅋㅋㅋ 왜? 사파리 16에서 왜 발생을 안할까.. 기존에 잘되고있었는디..ㅠ MDN은 문서 수정해주세요! 사파리 16은 해당이벤트를 지원하지 않습니다!!!!ㅋㅋㅋㅋ

 

여튼 이제 해당 로직을 수정해야하는데 timeupdate는 사실상 비디오가 재생되는 중 계~속 발생되는 이벤트입니다.

이벤트는 계속 발생하지만 내부적으로 width, heigth가 기존과 동일하다면 변경 로직을 실행하지 않는 형태로 되어있습니다.

고려사항으로는

• 비디오가 재생되고있을 때 지속적으로 발생되는 이벤트
• 모든 연결 시퀀스 후 비디오 스트림 정보가 실행될 때부터 이벤트 발생
• 에러, 비디오 중지 시에는 이벤트 클리어

지속적으로 발생된다고는 해도 자주 발생될 필요는 없다고 판단했습니다. 1초에 한번정도? 리사이즈랑은 별도였기 때문에.. 브라우저 리사이즈 시에는 다른 동작이 있는 것 같았습니다.

 

1초에 한번 발생시키는 이벤트를 interval로 진행을 해야겠다 싶어서 코드를 수정하게됩니다. (실제 코드와는 전혀 형태가 다르므로 걱정하지 않아도됩니다.)

let intervalId = 0;
if(videoStart()) {
	intervalId = setInterval(() => {
		changeSize(width, height);
	}, 1000);
}

if(onError() || onCloseVideo()) {
	clearInteval(intervalId);
}

 

하지만 코드리뷰 후 setTimeout chain으로 변경하자는 의견이 있어서 변경을 진행했습니다. 감사합니다

const callback = () => 
    changeSize(width, height);

    timeoutId = setTimeout(() => {
        callback();
    }, 1000);
};

clearTimeout(timeoutId);

결과적으로 이벤트 기반에서 비디오 스트림의 상태에 따라서 setTimeout Chain을 거는 것으로 마무리되었습니다~

개발 서버에 실행해보니 사파리에서 정상적으로 화면이 나오는 것을 보며~ 기쁨과 안도를! 해피엔딩입니다~