Programming/기본 (Baisc)

[Javascript][자바스크립트][Twitch] Twitch Iframe 방송 채팅 및 영상 동시

YH.Dream 2022. 6. 21. 04:21

1. 개요

 지인 부탁으로 방송 + 채팅을 동시에 할 수 없겠냐라는 문의를 받고  제작하게 되었다.

 

2. 소스

<html>

<head>
    <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js">

    </script>
    <script type="text/javascript">
        $(document).ready(function() {

            let list = [
                 {
                    id : ""
                    , name: ""
                }
                , {
                    id : ""
                    , name: ""
                }
                
                , {
                    id : ""
                    , name: ""
                }
                
                , {
                    id : ""
                    , name: ""
                }
            ];

            
            _.each(list, function(item, idx) {

                let html = new Array();

                let url  = "https://www.twitch.tv/"  + item.id;

                html.push("<iframe src=\"https://player.twitch.tv/?channel=" + item.id + "&parent=[서비스도메인]\" height=\"600\" width=\"400\" allowfullscreen>");
                html.push("</iframe>");
                $("#container").prepend(html.join(''));

                html = new Array();
                html.push("<iframe id=\"twitch-chat-embed\" src=\"https://www.twitch.tv/embed/"+item.id+"/chat?parent=[서비스도메인]\" height=\"500\" width=\"350\"></iframe>");
                html.push("</iframe>");

                $("#container-chat").prepend(html.join(''));
            });
        });
    </script>
</head>

<body>
    <div id="container">
        
    </div>
    <div id="container-chat">
        
    </div>
</body>
</html>
저작자표시 비영리 변경금지