결과물

[![TVple player](http://stories282.ipdisk.co.kr:8000/list/HDD2/Steemit/01/thumbnail.png)](https://youtu.be/sQBB6EmzS7o)

들어가기 앞서

테스트 영상 정보

[출처](http://tvple.com/humor/141724)
[업로더](http://tvple.com/ch/vkdnjdmlwndt/videos)
제목 : (마스터 딸기) 스타더스트 위치 메루루 더빙!

작업 환경

Python 3.5
IPython
Pycharm 2017.3
Javascript
Postman

목표

티비플 api 알아내기
티비플 영상 다운로드
티비플 구름 데이터 다운로드
HTML으로 실제 티비플 서비스처럼 시뮬레이션 하기

티비플 api 알아내기

검색하고자 하는 티비플 영상 링크를 가져와 `postman` 을 이용하여 `request` 요청을 하면 해당요청이 처리된 `html`이 반환됩니다. 여기서 주목해야될 부분이 있는데

`data-meta` 에 실제로 api 서버에 영상과 구름 데이터 정보를 가져올 링크가 저장되어 있습니다. 해당 링크는 빠른 시간안에 만료되므로 조심해야 합니다.

`data-meta` 에 저장된 링크에 요청을 보내면 영상 링크, 구름 데이터 링크등의 정보가 `json` 형태로 반환됩니다.

구름 데이터를 얻기 위해 `read_url` 값에 적힌 `url`에 요청을 하면 `json` 형태로 매 초 기준 작성된 구름데이터가 위치 데이터와 함께 반환됩니다.

티비플 영상 다운로드 & 티비플 구름 데이터 다운로드

본 게시물은 2018-01-24 에 작성되었으며 추후 티비플 정책에 따라 정상작동하지 않을 수도 있습니다.

import re import json import requests import bs4 import urllib.request

필요한 파이썬 모듈을 임포트 해줍니다.

session = requests.session()

videoId = "141724" responseHTML = session.get("http://tvple.com/" + videoId)

세션 생성후 가져올 영상 고유 아이디를 이용해 tvple에 접속하여 `html` 소스를 가져옵니다.

parseSoup = bs4.BeautifulSoup(responseHTML.text, 'html5lib')

pattern = re.compile(r'http://api.tvple.com/v1/player/meta\?data=')

dataMeta = parseSoup.find(True, {"data-meta": pattern}) dataMetaUrl = dataMeta['data-meta']가져온 `html` 소스 중에서 http://api.tvple.com/v1/player/meta\?data= 문자열 패턴이 있는 "data-meta" `attribute` 를 검색합니다.

성공한다면 dataMetaUrl 에 `data-meta` 값이 저장됩니다.

예시

```

http://api.tvple.com/v1/player/meta?data=.eJw1y1EKwyAQRdG9zHcQRkylbkaEeQXBqExNIITsPUmhnxfuOWjLghazUGDH3rqJFEsbiElEKRBbNvyajeW3YedpovUL_YG6lvLsH6hC_40qveU6bpt6jr2kHWoWjETnBWz9I68.DUnANw.WJwXY-YGqXEsuDOCpNHzLR7ZAHM

```

infoJsonData = session.get(dataMetaUrl)

jsonDicData = json.loads(infoJsonData.text)

가져온 `data-meta` url 에 요청을 보내면 영상 링크, 구름 데이터 링크 등이 `json` 형태로 반환됩니다.

cloudReadUrl = jsonDicData["cloud"]["read_url"]

videoUrl = jsonDicData["stream"]["sources"]["a"]["urls"]["mp4_avc"]

구름 데이터와 영상 데이터 링크는 위와 같이 가져올 수 있습니다.

해당 링크에서 가져온 데이터를 적당한 곳에 저장한 후 다음 단계로 넘어가겠습니다.

HTML으로 실제 티비플 서비스처럼 시뮬레이션 하기

시뮬레이션을 위해 준비물이 필요합니다.

위에서 가져온 영상 데이터(.mp4), 구름 데이터(.json)

`html` 파일을 생성한 후 `canvas` 와 `video` 태그를 생성합니다.

영상이 재생될때 변화하는 현재 재생시점을 알아내기 위한 이벤트 함수를 생성합니다.

마지막으로 해당 시점에 출력해야할 구름을 캔버스에 그리면 됩니다.

마무리 하며

상용 서비스는 어떤식으로 작동하는 걸까? 하는 궁금증에서 시작한 간단 프로젝트였습니다. 그중 눈에 띄었던것이 유투브에 돌아다니는 티비플 영상들 이였기 때문에 시간내어 진행하게 되었습니다.

분석하는 과정중 생기는 문제를 해결하기위해 스택오버플로우, 구글링을 하면서 간단한 작업 마저도 같이 한다는 느낌을 가질 수 있었습니다.

전체 소스코드

[github](https://github.com/stories2/tvpleSimulator)

참고자료

[reference git gist](https://gist.github.com/Sait2000/e71d6a6ccaa960964ac4)
[reference naver blog](https://m.blog.naver.com/PostView.nhn?blogId=wlzla000&logNo=220579678964&proxyReferer=https%3A%2F%2Fwww.google.co.kr%2F)