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 의 관리 메뉴에서 삭제하면 된다.

상세 설정

브라우저 툴바의 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 에도 영향을 줘서 스트림이 멈출 수 있었던 것 같구요. 이러한 문제가 발생하는 조건은 특정 웹사이트에 접속하거나, 비활성탭이 활성탭으로 전환되는 등 다양합니다.

Leave a comment