[기능 제안] chzzk.naver.com/live/{channelId} 해당 URL에 있을 때 생방송 시작 시 바로 재생이 되도록 할 수 있나요?

[yhunl123]

제안

생방송 시작 시 트위치에서는 자동으로 플레이어가 재생되며 라이브를 바로 볼 수 있습니다. 하지만 지금 치지직에서는 그런 기능이 있긴 한 것 같은데 버그 때문인지 제대로 작동하지 않는 경우가 많습니다.

스트리머가 생방송 시작 시 화면을 새로고침 하거나 플레이어를 새로고침해서 바로 재생되도록 하는 기능이 있었으면 합니다.

기타

/service/v1/channels/{channelId} 해당 api에서 openLive 플래그값 같이 생방송 여부를 알려주는 api를 일정 시간마다 (5~10초) 통신하여 생방송 플래그가 변하면 새로고침을 하는 방식이 있을 것 같습니다.

[kyechan99]

안녕하세요! 첨부 이미지부터 구현 방법 고민까지 자세하게 작성해주셔서 정말 감동입니다 :) 기능 제안 역시 프로그램을 만들때 부터 추가하려고 했던 todo 중 하나여서 더욱 반갑네요.

다만 한동안 제가 조금 바쁜지라.. 여유가 될 때에 추가하도록 하겠습니다.

[yhunl123]

답변 감사합니다.

추가로 제가 필요해서 템퍼몽키로 먼저 사용하고 있는 코드 작성해 드리겠습니다.

5초에 한번씩 liveDetail을 불러와 openLive 값을 체크해서 라이브가 시작되면 자동으로 새로고침이 되는 코드입니다.

// ==UserScript==
// @name         Chzzk streaming auto refresh
// @namespace    http://tampermonkey.net/
// @version      2024-02-18
// @description  치지직 생방송 시작 시 바로 방송을 볼 수 있도록 자동 새로고침 해주는 프로그램
// @author       asdiz_
// @match        https://chzzk.naver.com/live/*
// @require      http://code.jquery.com/jquery-latest.js
// @icon         https://www.google.com/s2/favicons?sz=64&domain=naver.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    let isStreaming = false;

    const userId = window.location.href.substr(window.location.href.lastIndexOf('/') + 1);

    const ajaxUrl = 'https://api.chzzk.naver.com/service/v1/channels/' + userId;

    // 페이지 입장시 첫 플래그값 저장, 통신 에러 시 새로고침(개선 필요)
    $.ajax({
        type : 'get',
        url : ajaxUrl,
        headers : {
            "Content-Type" : "application/json",
            "X-HTTP-Method-Override" : "GET"
        },
        success : function(result) {
            // 결과 성공 콜백함수
            isStreaming = result.content.openLive;
        },
        error : function(request, status, error) {
            // 결과 에러 콜백함수
            console.log(error);
            window.location.reload();
        }
    })

    setInterval(() => {
        if (isStreaming == true) {
            // 라이브가 끝나면 새로고침
            // 라이브 중일 때는 ajax통신을 반복적으로 할 필요가 없이
            // 라이브 종료시 비디오 플레이어 태그 자체가 사라지는 것을 이용
            if($('.webplayer-internal-video').length < 1) {
                isStreaming = false;
                window.location.reload();
            }
        } else {
            $.ajax({
                type : 'get',
                url : ajaxUrl,
                headers : {
                    "Content-Type" : "application/json",
                    "X-HTTP-Method-Override" : "GET"
                },
                success : function(result) {
                    // 결과 성공 콜백함수
                    if (isStreaming != result.content.openLive) {
                        // 라이브가 시작되면 새로고침
                        window.location.reload();
                    }
                },
                error : function(request, status, error) {
                    // 결과 에러 콜백함수
                    console.log(error);
                    window.location.reload();
                }
            })
        }
    }, 5000);

})();

[kyechan99]

v1.1.0 버전에 현 기능을 추가하였습니다. 감사합니다.