히파루스의 솔직한 여행 이야기

[주요 설정]
1. 8000포트를 사용하여 SSL로 live 클라이언트 웹 브라우저에서 접속
2. 서버의 스트리밍 파일(m3u8, ts등)이 생성되는 곳은 /node/stream/media/live 폴더
3. 빌어X을 CORS는 제낌
4. node.js로 만든 스트리밍 서버에선 클라이언트 브라우저의 요청시 7999포트를 이용해서 hls로 리턴해줄 예정

server {
    listen 8000 ssl;
    server_name dev.*****.co.kr;

    ssl_certificate     /usr/local/nginx/conf/cert/2024/dev_*****_co_kr_NginX_cert.pem;
    ssl_certificate_key /usr/local/nginx/conf/cert/2024/dev_*****_co_kr_NginX_key.pem;
    access_log /usr/local/nginx/logs/dev.*****.co.kr_access_log;
    error_log /usr/local/nginx/logs/dev.*****.co.kr_error_log;
    ssl_session_cache shared:SSL:1m;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1.1 TLSv1.2;
    ssl_ciphers ******************************************************************************;
    ssl_prefer_server_ciphers on;

    add_header 'Access-Control-Allow-Origin' '*' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always;
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;

    location /live {
        alias /node/stream/media/live;
        proxy_pass http://127.0.0.1:7999;
        proxy_buffering off;
        proxy_request_buffering off;

        proxy_cache off;

        proxy_read_timeout 10s;
        proxy_send_timeout 10s;
        send_timeout 10s;

        proxy_http_version 1.1;
        proxy_connect_timeout 75s;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        add_header Cache-Control no-cache;

        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }

        types {
            application/vnd.apple.mpegurl m3u8;
            video/mp2t ts;
        }
    }


    location /hls {
        # Disable cache
        add_header Cache-Control no-cache;

        # CORS setup
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Expose-Headers' 'Content-Length';

        # allow CORS preflight requests
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }
        
        # Serve HLS fragments
        types {
            application/vnd.apple.mpegurl m3u8;
            video/mp2t ts;
        }
        
        root /tmp;
        add_header Cache-Control no-cache;
    }
}

다음은 node.js로 스트리밍 서버를 만들어보겠다.
서버는 환경설정보다 쉽다.

iframe으로 불러들인 컨텐츠의 높이만큼 부모창에서 iframe의 높이를 동일하게 만들고 싶을 경우 몇가지 고려할 요소가 존재한다.
구조는 대략 이러하다.

부모창
<div id="부모창의DIV">
    <iframe id="부모창의IFRAME"></iframe>
</div>

자식창
<div id="자식창의DIV">
</div>

1. contents() 
2. on load

1. contents() 
먼저 iframe에 접근하기 위해선 그냥 find로 접근하면 안된다.
contents().find()로 접근해야 한다.

$("#부모창의IFRAME").contents().find("#자식창의DIV")

2. on load
1번까지 하고 접근해보면 null을 리턴하거나 undefine을 리턴한다.
본창의 document가 ready되었을 뿐이지 iFrame의 내용까지 모두 불러와진게 아니기 때문이다.
따라서 1번 코드는 이렇게 호출되어야만 한다.
부모창의IFRAME의 contents에서 자식창의DIV란 요소를 획득하겠다란 이야기인데
언제?
iFrame이 모두 불러와져서 온전하게 자식요소들에 접근이 가능할 때 접근하겠다.

$("#부모창의IFRAME").on("load", function() {
        var objIframeChild = $("#부모창의IFRAME").contents().find("#자식창의DIV);
        $("#부모창의DIV").height(objIframeChild.height());
        /* objIframeChild로 iFrame의 자식을 획득하였으니 이녀석을 가지고 놀면 된다. 
            objIframeChild.height() 등등*/
}

여기까지 한다면 내 도메인 내에선 아무 문제 없이 주고 받고가 가능하지만
다른 도메인이라면 이야기가 달라진다.

망할 cross oigin

Uncaught DOMException: Blocked a frame with origin "http://~~~~" from accessing a cross-origin frame.
크롬에서 개발자 도구로 지켜보면 이 에러를 내뱉으며 동작하지 않는다.

iFrame 소스의 on load 또는 jQuery $(document).ready 아래에 부모로의 통신용 postMessage를 구현해준다.
구조는 간단하다.
window.parent.postMessage() 안에 {키, 값} 형태로 넣어주고 콤마(,) 이후 전달 되는 도메인이나 IP주소를 입력해주면 된다.
도메인이나 IP주소 대신 *도 가능하지만 해킹당할 우려가 있으니 가급적 지양해야 할 것이고
만약 여러 도메인으로 통신을 해야겠다면 도메인이나 IP주소만 바꿔가며 window.parent.postMessage를 반복하면 된다.

window.parent.postMessage({키값: 보내고 싶은 값 }, "허용되는 도메인 또는 아이피");

보내는 곳인 자식쪽 소스
window.parent.postMessage({ childHeight: $("자식창의DIV").height() }, "http://......");

받는 곳인 부모쪽
그냥 리스너로메세지 받겠다 하면 끝이다.
window.addEventListener('message', function(e) {
        $("#부모창의DIV").height(e.data.childHeight);
 });