프로젝트 개발을 하면서, 구현을 해야하는 상황은 다음과 같았다.

1. `video`를 넣는다
2. 배경색을 비디오의 배경색과 동일하게 설정한다.

예상했던 결과는 다음과 같다.

`video`의 배경색을 추출해서 전체 배경의 `background-color` 속성에 적용하였다.

최종 디자인을 마무리하고 배포만을 남겨둔 시점에서 사촌누나에게 자랑하려고 폰으로 접속하는 순간, 이미지가 다음과 같이 나타났다.

😱 좌절했다 😱  

너무 당황스러웠다. 웹 개발의 장점은 작업물을 사람들에게 보여줄 수 있다는 점이다.

거하게 칭찬받고 이를 다시 추진력으로 나아가려고 했지만, 보여주려고 접속하는 순간 너무 당황스러웠다.

만들다 포기한 것 같은 페이지가 보이는 것이다.

(잘 보면, 위 아래 색이 다르다)

서론이 너무 길었다.

✏️ 문제 분석

나는 먼저, `video`의 색을 의심하였다. 하지만, 색을 추출해본 결과 코드로 입력했던 색과 일치했다.

그렇다면, 배경색이 문제다.

개발자의 역량은 빠르고 정확한 구글링. 바로 구글링하였다.

Stackoverflow에서 비슷한 문제를 찾아서 원인을 분석한 결과 다음과 같다.

가능한 원인
1. 그래픽 카드와 같은 기기의 하드웨어가 달라서 생기는 문제이다.
2. 브라우저의 색 설정이 달라서 생기는 문제이다.

결국, 원인이 무엇이든 나는 브라우저 안에서 해결해야 했다.

모든 사람들이 같은 기기를 쓰는 날이 왔으면......

💡해결 방법

내가 해결한 방법은 다음과 같다.

1. `video`에서 내가 원하는 배경색이 있는 곳을 알아낸다. (시점, 지점)
2. 해당 색으로 된 `canvas`를 그린다.
3. 해당 `canvas`의 이미지를 전체 배경에 적용한다. (배경색 입히기)

코드를 보면 바로 이해가 될 것이다.

// javascript 파일
function isColorInRange(expectedColor, givenColor) {
    const THRESHOLD = 40;
    for (var i = 0; i < 3; i++) {
        if (((expectedColor[i] - THRESHOLD) > givenColor[i]) || ((expectedColor[i] + THRESHOLD) < givenColor[i])) {
            return false;
        }
    }
    return true;
}

function setVideoBgColor(vid, nativeColor) {
    if (vid) {
        let vidBg = document.querySelector('.large_bg');
        if (vidBg) {
            // draw first pixel of video to a canvas
            // then get pixel color from that canvas
            let canvas = document.createElement("canvas");  // 배경색을 칠할 요소를 선택하기!!!
            canvas.width = 1;
            canvas.height = 1;
            let ctx = canvas.getContext("2d");
            ctx.drawImage(vid, 0, 0, 1, 1);

            let p = ctx.getImageData(0, 0, 1, 1).data;
            //console.log("rgb(" + p[0] + "," + p[1] + "," + p[2] + ")");
            if (isColorInRange(nativeColor, p)) {        
                vidBg.style.backgroundColor = "rgb(" + p[0] + "," + p[1] + "," + p[2] + ")";
            }
        }
    }
}

function setVideoBgColorDelayed(vid, nativeColor) {
    console.log("실행됨");
    setVideoBgColor(vid,nativeColor)            
}

적용할 `video`의 `onPlay` 속성에 다음과 같이 적용하면 된다.

<video muted autoplay loop playsinline onplay="setVideoBgColorDelayed(this,[214,169,216])"> // 원하는 색을 두번째 인자로 넣기
    <source src="/video/main_video.mp4" type="video/mp4">                                    
</video>

해당 코드는 라이브러리의 도움이 없으므로, `video` 태그가 생성된 이후에 적용되어야 한다는 점을 주의하자.

`defer` 속성이 `script`에 필요할 수 있다.

험난한 개발인생 하지만 오늘도 오류 해결~

사촌누나 다시 보여줘야지..