Skip to content

sh9351/ktv

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 

Repository files navigation

KTV | 어디서나 시청하는 실시간 TV

KTV와 함께라면 단순히 프로그램 하나로 50개가 넘는 실시간 TV 채널을 무료로 광고 없이 감상할 수 있어요.
더 자세한 정보는 KTV 웹사이트 에서 확인해주세요. 다운로드는 Releases를 확인해주세요!
아래 문서는 KTV의 기술적인 부분에 관해 설명해요. 또한 소액이라도 후원해 주시면 현재 테스트 중인 기능을 더 빨리 만나보실 수 있어요! 자세한 사항은 디스코드 sh9351#9351로 문의주세요.

Technical Documentation

개요

KTV는 Node.jsElectron 프레임워크를 이용하여 제작되었어요. 이 외에 다른 UI 프레임워크는 사용하지 않고 오직 document.querySelector(...).textContent만을 이용해 채널 정보를 UI 바인딩해요.
KTV는 ASAR 파일 형식을 사용하기 때문에 누구나 @electron/asar 혹은 반디집 등을 이용해 원본 소스 코드를 확인할 수 있어요. 또한 Electron에서 터미널 출력을 처리하는 방식 때문에 후술할 DHCP 정보 등을 올바르게 받으려면 chcp 65001 명령어를 통해 콘솔 코드 페이지를 UTF-8로 설정해야 해요.

방송 소스

각 방송의 소스는 대부분 방송사 공식 홈페이지에서 가져와요. 다만 몇몇 채널의 경우 네이버 TV 등의 외부 사이트에서 가져오기도 해요. 다만 "그" 방송사의 경우 이곳에서 말씀드리기 어려우니 직접 소스 코드를 확인해 주세요.

파일 구조

KTV의 메인 코드는 index.js 파일에 있어요. 해당 파일이 Application Life-Cycle부터 Mobile Remote 처리까지 담당하고 있어요.
각 방송사별 코드는 providers.js 폴더에 포함되어 있어요. 해당 파일들은 src 폴더 내 channels.js 파일에 의해 사용돼요. src 폴더 내 다른 파일들은 모두 프론트엔드 UI 및 Javascript에 필요한 파일들이에요.
마지막으로 views 폴더 내에 HTML 파일들이 포함되어 있어요. 해당 파일들은 Electron의 ipcRenderer 모듈을 이용해 메인 코드와 소통해요.

소통 과정

아래는 KTV가 방송 채널을 불러와서 재생하고 추가적으로 필요한 채널들을 갱신해주는 과정이에요.

  1. index.js 파일에서 channels.js 파일을 불러와 Channels 변수에 저장해요.
  2. ipcMain 모듈을 통해 Renderer Process로 KTV.Channels 이벤트에 채널 정보를 전송해요. 이때 추가적으로 현재 채널 정보와 플래그 정보를 함께 전송해요.
  3. tv.html 파일에서 채널 정보를 받으면, 해당 정보를 UI에 반영해요.
  4. MBC, SBS 등의 방송사 채널에서 시간 초과로 인해 오류가 발생하면, ipcRenderer 모듈을 이용해 KTV.RefreshChannel 이벤트를 발생시켜 메인 코드에서 채널을 다시 불러와요.
  5. 모바일 리모컨 기능이 활성화 되어 있으면 서버를 실행하고 자동으로 DHCP 주소를 감지해 터미널에 출력해요.

이 외에 녹화 기능들은 tv.html 파일에서 자체적으로 처리해요. 이 경우 MediaRecorder를 이용해 영상을 webm 파일로 녹화하고 ts-ebml을 통해 메타데이터 정보를 삽입해요.

모바일 리모컨

KTV 모바일 리모컨을 이용하면 같은 WiFi에 접속한 모바일 기기에서 KTV의 채널, 볼륨, 자막 여부 등을 조작할 수 있어요. 해당 기능을 사용하려면 아래 콘솔 플래그 항목의 remote 플래그를 참고해주세요.

콘솔 플래그

KTV는 다양한 콘솔 플래그를 통해 사용자가 원하는 방식으로 커스터마이징 할 수 있어요. 아래는 KTV에서 사용할 수 있는 콘솔 플래그에 대한 설명이에요.
모든 플래그는 앞에 --를 붙여 사용해야해요. 예를 들어 개발자 도구를 활성화하고자 한다면 KTV.exe 바이너리가 있는 폴더에서 ktv --devtools 명령어를 실행해야 해요.

devtools

메인 윈도우의 개발자 도구를 활성화해요. 개발자 도구를 통해 KTV에서의 오류를 찾거나 자세한 정보를 확인할 수 있어요.

remote

KTV 모바일 리모컨을 30514 포트에 바인딩해요. 이때 자동으로 Node.js의 os 모듈을 애용해 로컬 DHCP 주소를 감지하여 터미널에 출력해요. 해당 주소를 이용하면 같은 WiFi에 연결된 기기에서 KTV의 채널을 실시간으로 조작할 수 있어요.

native

KTV를 네이티브 앱처럼 마치 OS 인 것 같이 실행할 수 있게 해줘요. KTV를 전체화면으로 전환하고 채널 목록 화면을 비활성화해요. 이 밖에 프로그램 홈페이지 버튼을 비활성화 하는 등의 기능도 있어요. 해당 플래그를 사용하면 Alt + F4를 통해 KTV를 종료할 수 있어요.

no-sidebar

KTV 채널 화면의 사이드바를 비활성화해요. 이 플래그는 native 플래그와 함께 사용하길 추천해요.

guide

KTV 사용법 가이드를 실행해요.

FAQ

KTV는 어떤 플랫폼에서 사용할 수 있나요?

현재는 Windows만 지원해요. 하지만 Electron을 이용해 개발했기 때문에 다른 플랫폼에서도 사용할 수 있어요. 다만 개발자가 윈도우를 사용하고 있기 때문에 빌드에 어려움이 있어요. 따라서 타 플랫폼은 직접 빌드하여 사용해 주세요. 모바일 버전은 PWA를 이용하여 개발할 예정이에요.

광고가 있거나 결제가 필요하나요?

아니요, 전혀 없어요! KTV는 모두를 위해 오픈 소스로 제작된 프로그램이에요. KTV를 시작할 때 부터 종료할 때 까지 그 어떠한 광고, 결제, 혹은 추적도 없어요. 안심하고 이용하세요!

채널을 불러올 수 없다는 오류가 발생해요.

해당 오류는 현재 저도 파악하고 있는 오류에요. 다만 해당 오류의 해결책은 커녕 발생 원인조차 찾지 못하고 있어요. 같은 운영체제에 같은 언어, 심지어 물리적인 위치도 단 몇 km밖에 떨어져 있지 않는 두 기기에서 한 기기에만 오류가 발생하는 점을 고려하면, 어디에서 시작해야 할 지 조차 파악하기 어려운 상태에요.

왜 화면을 녹화할 수 없나요?

보안상의 이유로 KTV 화면은 녹화할 수 없어요. 대신 KTV 자체적으로 방송 화면을 webm 파일로 녹화할 수 있는 기능이 있으니 대신 사용해주세요.

"그" 채널은 어떻게 얻으셨나요?

전술하였듯이 직접 소스 코드를 분석해주세요.

KTV를 개선하고 싶어요!

KTV를 개선하기 위한 아이디어는 아래 연락처로 문의 부탁드려요. 혹은 소스 코드의 개선을 원하시면 수정된 코드를 보내주세요. README에 이름을 올려드릴게요!

기타 문의사항이 있어요! / 버그를 발견했어요!

저의 이메일 sh9351@sh9351.me 혹은 디스코드 sh9351#9351로 연락주세요! 버그를 제보하실 때에는 정확히 어떤 환경에서 버그가 발생하는지 구체적으로 설명해주세요.

Credit

임세훈(sh9351) - 프로젝트 총괄 | https://sh9351.me