NOMO.asia

트위치에서 원본 화질(source, 1080p)로 라이브 시청을 즐겨하는 시청자라면 간혹 화질이 저절로 낮은 화질로 변경되거나 "자동"으로 바뀌는 것을 경험한 적이 있을 것이다. 가장 자주 체감할 수 있는 것은 아래의 두 경우이다.

  1. 사용자가 브라우저의 다른 탭으로 전환하여 현재 재생 중인 탭이 비활성화 된 상태로 약 1분이 지난 경우 화질을 낮춤
  2. 사용자가 원본 화질(Source) 로 설정하고 약 24시간이 지난 경우 화질을 "자동"으로 설정

자동 화질 변경 시 재생이 중지되는 오류가 간혹 발생하기도 하고, 24시간마다 매번 원본 화질을 다시 설정해야 하는 것은 사소하지만 귀찮은 일이다. 그래서 화질 자동 변경을 막고, 매번 재생 시마다 화질을 원본 화질로 설정해주는 툴을 브라우저 확장 기능의 일종인 UserScript 기반으로 만들었다. 이름은 Twitch-Auto-Max-Quality 이다. 일단 생각나는대로 코드를 짜깁기해서 동작만 되게 만들어둔 것이지만 작동은 잘 된다. Github 링크 (https://github.com/nomomo/Twitch-Auto-Max-Quality)

필요한 사람이 있다면 아래의 방법을 참고하여 설치하면 된다.

설치 방법

STEP 1. 자신의 브라우저에 맞는 유저스크립트 관리 확장기능 설치

동작은 Chrome, Firefox 브라우저에서만 확인했다.

STEP 2. Twitch-Auto-Max-Quality 스크립트 설치

확장 기능 설치 이후 아래의 링크를 클릭하여 이동, 설치 버튼을 누른다.

https://raw.githubusercontent.com/nomomo/Twitch-Auto-Max-Quality/master/Twitch-Auto-Max-Quality.user.js

주의: 본 스크립트를 설치 및 사용하며 브라우저 과부하로 인한 응답 없음/뻗음 등 으로 인한 데이터 손실 등 문제 발생 시 개발자는 책임지지 않음(보고된 문제는 없음)

본 스크립트를 사용하다가 Twitch 접속에 문제가 생기거나 동영상 재생이 안 되거나 화질 설정이 이상하게 되거나 설정 버튼이 제대로 동작하지 않는 문제 등이 발생하는 경우 이 스크립트를 그냥 끄고 업데이트가 될 때 까지 기다리거나 Tampermonkey 의 관리 메뉴에서 삭제하면 된다.

Chrome 브라우저 사용 시 선택 가능한 추가 옵션

2020년 10월 Chrome 86 버전부터 Background throttling 이라는게 공식적으로 생겼는데, 창이 비활성화된 후 5분이 지나면 비활성 탭에 대하여 CPU 사용량을 줄이도록 하는 기능이다. 더욱 자세한 내용은 직접 찾아보길 바라며, Background 탭에 대해서 이 기능 때문에 문제가 생기는 사례가 많이 있다. 따라서 PIP 기능을 활용해 동영상을 재생하다 문제가 발생하는 경우 저 설정을 비활성화 하면 재생 환경이 개선될 수 있다. (대신 비활성 탭에 대하여 모든 자원을 그대로 소모하므로, CPU 사용량은 소폭 증가할 수 있다.)

Background throttling 비활성화 방법

  1. 주소창에 chrome://flags/ 입력
  2. 검색창에 throttle 입력
  3. Throttle Javascript timers in background. 와 Calculate window occlusion on Windows 를 Disabled 로 변경
  4. Relaunch

상세 설정

브라우저 툴바의 Tampermonkey 아이콘을 클릭하면 아래 그림처럼 설정 창을 열 수 있는 버튼이 있다.

버튼을 클릭하면 아래와 같은 설정 창이 열린다. 각 기능은 켜고 끌 수 있고, 저장은 자동으로 이루어진다. 설정이 자동 저장된 후 새로고침하면 된다.

설정 버튼이 제대로 동작하지 않는 경우 Simulate settings button method 를 끄면 된다. 가상으로 설정 버튼을 빠르게 클릭하여 화질 설정을 시도하는 기능을 끄는 것이다.

iframe 으로 삽입된 플레이어에서 제대로 동작하지 않는 경우 Use the Twitch EMBED API in an Iframe 을 켜면 된다. Twitch EMBED API 를 추가로 이용해 화질 설정을 시도한다.

만약 클립, VOD 재생 시 화질이 강제로 저하된다면 Use for live video where url starts with blob 를 켜서 blob 로 시작하는 video 에만 동작하도록 하거나, Simulate settings button method 를 끄면 된다. 라이브의 경우 가장 좋은 화질이 맨 위에 있지만, 클립이나 VOD 의 경우 가장 좋은 화질이 맨 아래에 위치한 경우가 있어서 그렇다. 일단 기본적으로는 CLIP 과 VOD 의 경우 작동이 되지 않도록 해두었지만 예외가 발생할 수 있다.

동작 원리

1. 다른 탭으로 전환 시 화질 저하

앞서 작성한 글인 visibilitychange 이벤트를 무력화하기 위한 방법들을 참고하면 된다. 이 글에 적은 모든 방법을 다 적용해두었다.

2. 원본 화질(Source) 로 설정하고 24시간이 지난 후 화질이 "자동"으로 설정되는 현상

플레이어에서 화질, 낮은 시연시간 등의 설정이 접속 시마다 초기화되지 않고 유지되는 이유는 플레이어 설정을 브라우저의 localstorage 에 저장해놓도록 되어있기 때문이다. 화질의 경우, 사용자가 화질을 변경하면 변경된 화질 설정을 video-quality 이라는 이름으로 localstorage 에 저장하고, 플레이어를 초기 로딩할 때 해당 변수에 저장된 화질 설정을 읽어 사용자가 설정했던 화질로 초기 설정 & 재생한다.

그런데 원본 화질로 설정하는 경우, 사용자가 화질을 직접 원본 화질로 변경하는 순간의 시간을 s-qs-ts 라는 이름으로 localstorage 에 저장하도록 되어있다. 그리고 플레이어 초기 로딩 시 사용자 설정을 불러오면서 (현재 시간 - 저장된 시간 > 24시간) 인지 확인하여, 화질을 원본 화질로 설정한 시점으로부터 24시간이 지난 경우 화질을 "자동"으로 변경하는 동작을 한다. 다시 풀어 설명하면 사용자가 화질 조작을 한 시점을 기억해두고, 이 시점으로부터 24시간이 지난 경우 화질을 자동으로 변경시킨다는 것이다. 이러한 동작 때문에 24시간 마다 원본 화질을 다시 설정해주어야 한다.

따라서 이러한 불편함을 해결하기 위해 재생 시마다 매번 localstorage 의 s-qs-ts 값을 현재 시간으로 덮어쓰고, video-quality 를 항상 source 에 해당하는 값으로 덮어쓰도록 했다. 또 추후 이 방법이 막힐 수도 있기에, 가상으로 빠르게 설정 버튼과 설정 메뉴를 클릭하여 최대 화질을 설정하도록 했다.

  • 2019.10.13 19:17

    비밀댓글입니다

  • Favicon of https://bsgame.tistory.com 글플 2020.01.19 07:33 신고

    자세한 설명과 자료 증말루다가 감사합니다...

  • ㅇㅇ 2020.01.31 18:11

    좋은 방법 감사합니다^^
    pip모드로 트위치를 보며 인터넷하는데 자꾸 화질이 저하되서 짜증났는데 완벽 해결됐습니다!
    따라하기도 참 쉽네요~

  • ㅇㅇ 2020.05.19 20:31

    평소에도 정말 잘 쓰고있어요 감사합니다

  • ㅇㅇ 2020.12.14 17:33

    화질은 잘 고정 되는데 백그라운드 실행시 영상이 멈춰있는데(소리는 계속 나옴) 이런 문제는 어떻게 고치는지 혹시 아시나요

    • Favicon of https://nomo.asia 노모 2020.12.16 01:45 신고

      안녕하세요.
      올해 10월 Chrome 86 버전부터 Background throttling 이라는게 공식적으로 생겼는데, 창이 비활성화된 후 5분이 지나면 CPU 사용량을 줄이도록 하는 기능입니다. Background 탭에 대해서 이 기능 때문에 문제가 생기는 사례가 많이 있어서, 저 설정을 비활성화 하시고 문제가 해결되는지 보시면 될 것 같습니다.
      1. 주소창에 chrome://flags/ 입력
      2. 검색창에 throttle 입력
      3. Throttle Javascript timers in background. 와 Calculate window occlusion on Windows 를 Disabled 로 변경
      4. Relaunch

      이것 만으로 해결이 안 되시면 간혹 광고차단 확장기능이 광고를 막다가 꼬이는 경우도 봐서, ublock 같은 광고 차단 확장기능을 사용하시는 경우 잠깐 사용 해제 해보신 후 테스트 해보시는 것도 좋을 것 같습니다.

      혹은 Firefox 브라우저를 사용하셔도 됩니다.

  • 감사 2020.12.27 02:04

    pip로 볼때 계속 화질저하되고 재생 끊겨서 화났는데
    본문 + 백그라운드 쓰로틀링 댓글 덕분에 트위치 쾌적하게 보고있습니다 진짜 감사합니다

  • ㅇㅇ 2020.12.29 15:05

    늦게 확인 했네요. 말씀해주신대로 쓰로틀 관련 옵션 조절 해도, 애드블럭같은거 제거 해도 비디오가 멈추네요 ㅜㅜ
    엣지 쓰는데 유튜브는 좀 덜한거 같은데 이상하게 트위치만 딱 이러네요..
    같은 크로미움 기반이라도 크롬보단 엣지가 더 편해서 엣지 쓰고 있거든요...
    백그라운드도 아니고, 게임같은걸 킨것도 아닌데, 트위치 보다가 다른탭에서 조금만 보면 영상이 딱 멈추네요(사운드는 출력이 계속 되는데 비디오 출력이 딱 멈추는거 같습니다)
    약 1초간 밖에 안멈추지만 계속 이런 현상이 일어나니 되게 거슬리네요
    그리고 혹시나 해서 파폭 설치해봤는데 파폭에서도 똑같네요

    • Favicon of https://nomo.asia 노모 2021.01.16 23:27 신고

      늦었지만 댓글 남깁니다. 아마 영상이 딱 멈추는 특정 조건이 있을 것 같은데요...
      BTTV 등의 확장기능을 쓰는 경우, 한 탭에서 스트림을 보던 도중 다른 탭에서 스트림을 새롭게 재생하려고 하면 A탭에서 재생하던 스트림이 멈추는 경우가 있습니다. 혹시 이처럼 트위치 관련한 다른 확장기능을 사용하시면 관련된 확장기능을 비활성하신후 테스트 해보셔야 할 것 같아요.
      그 외에는 웹사이트 동작에 필요한 코드(JavaScript)의 계산량이 많으면 브라우저에 따라 그게 다른탭에 열린 Twitch Player 에도 영향을 줘서 스트림이 멈출 수 있었던 것 같구요. 이러한 문제가 발생하는 조건은 특정 웹사이트에 접속하거나, 비활성탭이 활성탭으로 전환되는 등 다양합니다.

  • 아이올리브유 2021.01.27 21:56

    정말 감사합니다. 덕분에 화질 저하 없이 정말 잘 보고 있습니다!

  • dd 2021.01.30 00:11

    혹시 라프텔이라는 애니메이션 사이트도 적용할 수 있는 방법이 없을까요??

    • Favicon of https://nomo.asia 노모 2021.01.30 23:07 신고

      처음 보는 사이트인데 흥미로운게 많은 것 같네요. 소개 감사드립니다.
      다만 처음 보는 사이트인지라 가능할지는 저도 잘 모르겠습니다. laftel userscript 로 검색하니 아래 링크와 같은 것이 있던데, 현재도 작동하는지는 모르겠지만 시도해보시는 것도 좋을 것 같습니다.
      https://gist.github.com/HelloWorld017/e03851897a0799121fb10001491150c2

  • ㅇㅇ 2021.02.04 00:17

    다른거 하면서 트위치 PIP 모드로 보는데 계속 화질바뀌고 위치바뀌고 해서 많이 불편했는데 덕분에 쾌적하게 보고있습니다 ㅠㅠ 감사합니다

  • 저사양트수 2021.02.06 17:58

    안녕하세요 노모님
    혹시 본문 같이 최고화질(1080)설정이 아닌
    이방 저방 넘어가더라도 시청시작을 160, 360 화질로 시작 할 수 있게
    고정을 시킬 방법이 있을까요?

    • Favicon of https://nomo.asia 노모 2021.02.07 18:45 신고

      브라우저 툴바에서 Tampermonkey 아이콘을 눌러 대시보드로 들어가신다음 설치된 유저 스크립트 리스트에서 Twitch-Auto-Max-Quality 를 찾고, 리스트 가장 우측의 연필 모양 편집 아이콘을 눌러 편집 모드로 들어갑니다.


      1) 상세 설정에서 Localstorage modify method 사용에 체크한 경우
      사용자가 설정한 화질 값이 24시간마다 초기화되는데 이것을 매번 원하는 것으로 덮어씌우는 기능입니다.

      Ctrl+F 를 눌러 찾기 창을 띄우고 "chunked" 를 모두 찾은 후 원하는 화질에 해당하는 내용으로 바꿉니다. 아래의 것 중 원하시는 것으로 바꾸시면 됩니다.
      "160p30", "320p30", "480p30", "720p30", "720p60"



      2) 상세 설정에서 Simulate settings button method 사용에 체크한 경우
      가상으로 빠르게 설정 버튼을 클릭하여 원하는 화질을 선택하기 위한 기능입니다.

      아래 라인을 찾아 다음과 같이 바꿉니다.
      기존:
      $(max_quality_elem_selector)[1].click();

      수정:
      $(max_quality_elem_selector)[$qb.length - 1].click();

      화질 리스트 중 맨 아래 것을 선택하고 싶다면 [$qb.length - 1], 맨 아래에서 두 번째 것을 선택하고 싶다면 [$qb.length - 2] 를 사용하면 됩니다. 이 외의 값을 사용하면 트랜스코딩이 되지 않아 자동과 Source Quality 두 가지만 선택 가능한 경우 등에서 의도하지 않은 동작이 발생할 수도 있습니다.

      수정 완료 후 Ctrl+S 를 눌러 저장하고 트위치를 새로고침 합니다.

      Simulate settings button method 와 Localstorage modify method 중 하나만 사용하는 것도 좋은 시도일 듯합니다.

  • 저사양트수 2021.02.09 08:34


    ( _ _) 꾸벅

    따로 적용법을 풀어 댓글 남겨주셔서 정말 감사드립니다 노모님
    노모님 말씀대로 적용하니 잘 되고있습니다
    값을 수정하다보니
    맨 앞 부분에 느낌표가 보이고 오류?인 것 처럼 보여주는 부분(열?)이 있는데
    제가 적용을 잘 못 한 부분이 있는지 의문입니다

    열번호
    71 앞에 느낌표
    257 진한빨강색폰트 #GM_setting .btn {font-size:12px;}
    579 앞에 느낌표
    849 진한빨강색폰트 GM.addStyle(`
    932 앞에 느낌표
    945 앞에 느낌표
    1215 진한빨강색폰트 <div id="nomo_settings_container

    다시 한번 감사드립니다 노모님

    ( _ _) 꾸벅

    • Favicon of https://nomo.asia 노모 2021.02.09 11:11 신고

      잘 동작하신다니 다행이네요.
      느낌표 같은 것들은 툴에서 스크립트를 문법 검사 하는 과정에서 나오는 경고인데 잘 동작하면 그냥 무시하셔도 됩니다.

  • 익명 2021.02.15 20:48

    최근에 이문제때문에 게임하면서 트위치가 자꾸멈추는 현상을 멈출수있었습니다.

    정말 감사합니다~

  • ㅇㅇ 2021.02.19 11:18

    오늘부터 이거 켜면 트위치 사이트가 무한로딩이 되네요

    • Favicon of https://nomo.asia 노모 2021.02.19 11:26 신고

      저는 기본 옵션으로 사용 중인데 문제가 없네요~~
      1. 혹시 스크립트 상세 설정에서 설정 변경하셨으면 어떻게 수정하셨는지 알려주세요.
      2. Adblock, Ublock Origin 같은 광고차단 프로그램에서 어떤 필터를 구독하느냐에 따라 문제가 생길 수도 있습니다. 혹시 사용중이시면 아예 끄고 테스트 해보세요. 저는 Ublock Origin 사용 중인데 문제는 없습니다.
      3. 다른 Twitch 관련 확장기능 사용하시는 경우 충돌이 일어날 수도 있으니 하나씩 끄면서 테스트 해보세요. 혹시 문제가 되는 확장기능을 찾으시면 제게 알려주세요.
      4. 트위치가 전체 유저가 아닌 일부 유저만을 임의 선택해서 테스트를 진행하는 경우가 종종 있습니다. 이 경우에는 제가 원격으로 직접 봐드리는 것 말고는 방법이 없네요~

  • ㅇㅇ 2021.02.19 11:41

    violentmonkey로 사용중이었는데 이게 문제였네요
    tampermonkey로 바꾸니 잘 됩니다

    • Favicon of https://nomo.asia 노모 2021.02.19 12:04 신고

      확인해보니 Tampermonkey 에서는 문제가 없고 Violentmonkey 에서만 문제가 생기네요. 스크립트 매니저 따라서 종종 결과가 다른 경우가 있습니다.

      Violentmonkey 를 그대로 사용하실 예정이시고 당장 수정하시려면 아래와 같이 해주시면 됩니다.

      1. Violentmonkey 설정 페이지로 갑니다.
      2. 설치된 스크립트 리스트에서 Twitch-Auto-Max-Quality 의 편집 버튼</> 을 누릅니다.
      3. 아래 내용을 모두 찾아서(line 934, 947 근처)
      this.["_addEventListener_" + date_n](a, b, c);
      아래와 같이 수정해주시면 됩니다.
      unsafeWindow["_addEventListener_" + date_n](a, b, c);
      4. 저장 버튼을 누르거나 Ctrl+S 를 눌러 저장합니다.
      5. Twitch 에서 새로고침 합니다.

      그리고 Violentmonkey 에서는 가상으로 설정 버튼을 빠르게 클릭해서 화질 설정을 시도하는게 동작을 안 하네요. 하나가 막혀도 동작되게 여러가지 방법을 적용해놔서 이 기능이 제대로 동작이 안 됐어도 아주 큰 문제는 없었을 것 같기는 합니다.

      제보 감사드립니다.

Leave a comment