퀵 스타트 가이드

퀵 스타트 소개

퀵 스타트는 PallyCon 서비스를 적용하기 전에 먼저 체험할 수 있도록, PallyCon 서비스와 연동되는 게이트웨이 페이지와 패키징 및 재생 기능에 대한 샘플을 제공합니다.

allsteps

주의

  • 퀵 스타트는 콜백 게이트웨이 방식을 기준으로 작성되었습니다. 토큰 방식의 연동에 대한 내용은 라이선스 토큰 API 가이드를 참고하시기 바랍니다.
  • 퀵 스타트를 통해 구축된 서버는 테스트용으로만 사용 가능하며, 실제 서비스 적용을 위해서는 별도의 서버 환경에 구축하셔야 합니다.

퀵 스타트 1단계

step1

퀵 스타트 1단계에서는 기본으로 제공되는 샘플 페이지를 테스트 환경에 구축하게 됩니다.

1. 관련 웹 서비스 가입

퀵 스타트 진행을 위해, PallyCon 어드민 사이트클라우드 개발환경(Codeanywhere)에 각각 가입합니다.

  • PallyCon 어드민 사이트: PallyCon 서비스 가입 및 연동 관련 각종 설정과 조회를 할 수 있는 사이트입니다. 사이트 가입 후 이메일 인증을 해야 하며, 신규 가입한 계정의 경우 자동으로 트라이얼 플랜이 적용됩니다.

PallyCon Admin 바로가기

  • Codeanywhere 사이트: 클라우드 상의 가상 머신에 개발 환경을 탑재해서 제공해주는 서비스입니다. 온라인에서 직접 코드 작성과 실행이 가능하여 퀵 스타트 샘플 페이지를 구동하는 테스트용 웹 서버로 사용됩니다. 무료 플랜은 한 개의 가상 환경만 생성 가능하며, 신용카드 정보 등이 필요 없이 이메일 만으로 가입됩니다. (가입 후 이메일 인증 필요)

Codeanywhere 사이트 바로가기

2. Codeanywhere 계정 설정 및 Connection 생성

2.1 계정 설정

Codeanywhere 가입 후 로그인 하면 에디터 화면으로 이동하는데, 퀵스타트에 필요한 계정 설정을 위해 우측 상단의 버튼을 눌러 대시보드로 이동합니다. (Connection Wizard가 표시되어 있으면 닫기 버튼을 눌러 취소합니다.)

ca-dashboard

참고

아직 Codeanywhere 계정의 이메일 인증을 마치지 않은 경우, 다음 단계로 넘어가기 전에 인증을 완료해야 합니다.

대시보드 화면 좌측의 'Account' 메뉴를 클릭하고 'Account Information' 항목의 'Edit' 버튼을 클릭합니다.

ca-dashboard

'Account Information' 항목의 'Username'은 가입 시 입력한 이메일의 앞 부분과 임의의 숫자로 자동 생성됩니다. 해당 Username을 사용하기 편한 이름으로 수정할 수 있습니다.

참고

Username은 나중에 가상 개발 환경의 웹 서버 URL을 구성하게 됩니다. Username에 '_'와 같은 특수 문자가 있으면 연동 과정에 오류가 발생할 수 있으니, 특수 문자를 포함하지 않도록 주의하시기 바랍니다.

ca-dashboard

2.2 Connection 생성

Codeanywhere의 에디터 화면으로 이동 후, 가상 개발 환경을 설정하기 위해 아래와 같은 과정으로 'Connection'을 생성합니다.

참고

퀵스타트의 DASH 재생 테스트를 위해, DASH-CENC가 지원되는 웹 브라우저로 접속해야 합니다. IE11에서는 Codeanywhere가 정상 동작하지 않으니 크롬, 파이어폭스, 엣지 등의 브라우저를 이용해 주시기 바랍니다.

  • 좌측 메뉴에서 'Git from URL'을 선택 후, 다음과 같이 PallyCon 퀵스타트 샘플의 Github URL을 입력합니다.
https://github.com/inka-pallycon/pallycon-quickstart-node

ca-giturl

  • 'Next' 버튼을 클릭하고 다음 화면에서 임의의 프로젝트 명을 입력합니다. 기본 환경 설정을 위해 'Search stack' 항목에 'node'를 입력하고, 아래 검색 결과 중에서 'Ubuntu' 환경을 선택합니다.

참고

프로젝트 명도 Username과 함께 가상 개발 환경의 웹 서버 URL을 구성합니다. 프로젝트 명에 '_'와 같은 특수 문자가 있으면 연동 과정에 오류가 발생할 수 있으니, 특수 문자를 포함하지 않도록 주의하시기 바랍니다.

ca-stack

  • 'Create' 버튼을 클릭하고 잠시 기다리면 Codeanywhere 가상 개발 환경이 준비됩니다.

3. 테스트용 웹서버 실행 및 샘플 재생

개발 환경 생성이 완료되면, 퀵 스타트 테스트용 웹 서버를 실행하고 샘플 영상 재생을 확인하기 위해 다음 과정을 진행합니다.

  • 화면 좌측의 프로젝트 루트 항목을 마우스 우클릭한 후, 팝업 메뉴에서 'SSH Terminal'을 선택합니다.

ca-terminal

  • 터미널 창이 표시되면 'npm install' 커맨드를 실행해 샘플 프로젝트에 필요한 각종 Node.js 모듈을 설치합니다.

  • 모듈 설치가 완료되면 웹 서버 실행 환경 설정을 위해 다시 프로젝트 루트 항목을 마우스 우클릭한 후, 팝업 메뉴에서 'Config' 항목을 실행합니다.

  • 메인 화면에 실행 환경이 표시되면 아래 화면과 같이 "commands" 항목의 값을 "node server.js"로 수정합니다.

ca-command

  • 화면 상단의 툴박스에서 'Run Project' 버튼을 클릭해 웹 서버를 실행합니다. 가상 개발 환경에서 퀵스타트 테스트용 웹 서버가 구동되고 자동으로 새 브라우저 창에서 해당 웹 페이지가 표시됩니다.

ca-run

참고

크롬과 파이어폭스는 DASH-CENC DRM 영상의 재생에 사용되는 URL에 HTTPS가 필수로 적용되어야 합니다. 'Run Project' 실행 시 자동으로 접속되는 URL은 HTTP URL이기 때문에, 현재 단계에서는 엣지 브라우저에서만 데모 영상이 재생됩니다.

  • Codeanywhere는 가상 개발 환경의 웹 어플리케이션에 HTTPS 접속도 지원합니다. 프로젝트 루트 항목을 마우스 우클릭하고 팝업 메뉴 중 'Info' 항목을 실행하면, 다음과 같은 형식의 HTTPS URL을 확인할 수 있습니다.
https://'프로젝트명'-'Codeanywhere username'.codeanyapp.com
  • 새 브라우저 창에서 위 단계에서 확인한 HTTPS URL에 접속하면 다음과 같이 DASH 플레이어 데모용 동영상이 재생됩니다.

play

참고

  • 위 페이지에서 재생되는 영상은 데모용으로 미리 패키징된 MPEG-DASH 스트리밍 영상입니다. PallyCon 멀티DRM이 적용되어 브라우저 환경에 따라 PlayReady(IE11, 엣지) 또는 Widevine(크롬, 파이어폭스) DRM이 자동 적용됩니다.
  • Codeanywhere의 가상 개발 환경은 서버 사양이 낮고 CDN이 적용되지 않아, 웹 페이지와 데모 영상의 로딩 시간이 오래 걸립니다. 이는 PallyCon 서비스의 성능과 무관하며 실제 상용 서비스에 적용 시에는 개선이 가능합니다.

퀵 스타트 2단계

step2

주의

퀵 스타트 샘플은 테스트 및 참고용으로, 실제 서비스에 적용하기 위해서는 고객사의 서비스 정책과 개발 언어에 맞는 게이트웨이 페이지를 직접 작성해서 고객사의 서비스 시스템에 구축하셔야 합니다.

퀵 스타트 2단계에서는 게이트웨이 페이지를 설정하고 샘플 영상의 패키징과 DASH 플레이어 재생을 테스트합니다. 게이트웨이는 PallyCon 클라우드 서버와 고객사의 서비스 시스템 간의 정보 교환에 사용되는 웹 페이지로, 아래와 같은 두 개의 웹 페이지가 사용됩니다.

  • 콘텐츠 ID 이슈 URL (/CIDIssue) : 콘텐츠 패키징 시에 호출되며, 해당 파일에 대한 ID(Content ID)를 생성하여 리턴합니다. CLI 패키져 실행 시 CID 파라미터를 생략하거나 APP 패키져를 사용해 패키징 하는 경우에 호출되며, CLI 패키져로 CID를 직접 입력해 패키징하는 경우에는 이 페이지가 사용되지 않습니다.

  • 콘텐츠 사용 정보 URL (/ContentUsageRightsInfo) : 패키징된 콘텐츠의 재생을 위해 라이선스를 요청할 때 호출되며, 고객사의 서비스 시스템에 연동되어 해당 사용자에 대한 콘텐츠 사용 권한을 확인 후 고객사의 BM에 따른 라이선스 설정값을 리턴합니다. (재생 가능 기간, 외부 디스플레이 허용 여부 등)

퀵 스타트 샘플의 게이트웨이 페이지에는 테스트용 기본 값이 설정되어 있습니다. 실제 서비스에 적용할 때에는 해당 페이지의 소스를 참고해 필요한 로직을 구현하시기 바랍니다.

1. 게이트웨이 URL 설정

참고

이전 단계에서 확인한 Codeanywhere의 테스트 페이지 HTTPS URL을 클립보드에 복사해두면 아래 단계에서 편리하게 입력 가능합니다.

  • 화면 상단의 '편집'버튼을 클릭합니다. 화면 아래쪽의 '콘텐츠 ID 이슈 URL'과 '콘텐츠 사용 정보 URL' 항목에 아래와 같이 URL을 입력합니다.
콘텐츠 ID 이슈 URL : https://'프로젝트명'-'Codeanywhere username'.codeanyapp.com/CIDIssue
콘텐츠 사용 정보 URL : https://'프로젝트명'-'Codeanywhere username'.codeanyapp.com/ContentUsageRightsInfo

참고

위 URL에서 '프로젝트명'과 'Codeanywhere username' 부분은 각각 본인의 테스트 환경에 따라 입력하시기 바랍니다. (' ' 제외)

  • '확인' 버튼을 클릭해 URL 설정값을 저장하고 '사이트 ID', '사이트 키', '액세스 키' 정보를 확인합니다. 이 값들은 다음 과정에 사용됩니다.

2. 퀵 스타트 데모 사이트 설정

PallyCon 어드민 사이트에서 확인한 '사이트ID', '사이트 키', '액세스 키' 값을 퀵 스타트 데모에 적용합니다.

  • 1단계에서 접속한 퀵스타트 데모 페이지로 이동합니다.

  • 화면 아래쪽으로 스크롤해 '설정 바로가기' 버튼을 클릭합니다.

config button

  • 설정 페이지에 게이트웨이 연동 관련 정보를 입력하고 'Save Settings' 버튼을 클릭합니다. ('API Type'은 'JSON'을 선택합니다.)

config

참고

  • 설정 페이지 하단의 '재생 테스트 설정' 부분은 다음 단계에서 패키징 테스트 후 업데이트 합니다.

3. CLI 패키져 설치 및 샘플 영상 패키징

리눅스 Command Line 환경에서 사용하는 CLI 패키져를 사용해 샘플 mp4 동영상을 DASH-CENC와 NCG DRM으로 패키징합니다.

  • Codeanywhere 에디터로 이동해 새로운 'SSH Terminal' 창을 실행합니다.

  • 아래 명령문을 실행해 CLI 패키져를 개발 환경에 설치합니다. CLI Packager는 ~/workspace/packager 경로에 설치되며, 에디터 화면 좌측의 Workspace 트리뷰에서도 확인할 수 있습니다. 패키져와 함께 패키징 테스트용 샘플 영상 파일도 자동으로 다운로드됩니다.

$ ./install_packager.sh
  • 설치가 완료되면 패키져 폴더로 이동($ cd packager) 후, 다음 명령문을 입력해 샘플 영상을 패키징합니다. 패키징된 DASH-CENC 및 NCG 파일은 ~/workspace/public/contents 폴더에 저장됩니다.
$ ./PallyConPackager --i sintel-trailer-480p.mp4 --o ~/workspace/public/contents --dash --hls --ncg --site-id 사이트ID --access-key 액세스키

패키져 명령문에서 사이트ID와 액세스키 항목은 PallyCon 어드민 사이트에서 확인한 값을 입력합니다.

4. 패키징된 DASH 콘텐츠 재생

이전 단계에서 패키징된 샘플 영상을 퀵 스타트 DASH 데모 페이지에서 재생 확인합니다.

  • 패키징된 콘텐트의 ID값을 확인하기 위해 PallyCon 어드민 사이트로 접속합니다. '콘텐츠 패키징 기록' 메뉴를 클릭하면 해당 기록을 조회할 수 있습니다.

  • 퀵 스타트 데모 사이트의 설정 페이지로 이동합니다. ('데모사이트 주소'/config)

  • PallyCon 어드민 사이트에서 확인한 콘텐츠 ID와 다음의 스트리밍 URL을 입력하고 'Save Settings' 버튼을 클릭해 저장합니다.

Stream URL: https://'프로젝트명'-'Codeanywhere username'.codeanyapp.com/contents/DASH_sintel-trailer-480p_mp4/stream.mpd

참고

스트리밍 URL에서 '프로젝트명'과 'Codeanywhere username'부분은 사용하는 Codeanywhere 프로젝트 환경에 따라 입력합니다.

play setting

  • 'Back to Sample Player' 버튼을 클릭해 DASH 데모 페이지로 이동하면, 2단계에서 패키징한 콘텐츠가 DASH 플레이어에서 재생되는 것을 확인할 수 있습니다.

퀵 스타트 3단계

step3

참고

  • 본 가이드는 PallyCon Widevine Android SDK를 기준으로 설명합니다. NCG 클라이언트 SDK나 iOS용 FairPlay Streaming SDK의 경우에도 유사한 방법으로 테스트할 수 있습니다.
  • 이 단계를 수행하기 위해서는 안드로이드 앱 개발에 필요한 기본 환경이 준비되어 있어야 합니다. (안드로이드 스튜디오, 안드로이드 SDK 플랫폼 및 빌드 툴 설치 등)

퀵 스타트 3단계에서는 모바일 SDK의 샘플 앱을 이용해 2단계에서 패키징한 DASH 콘텐트를 재생합니다.

1. 클라이언트 SDK 다운로드

  • 서비스 계약 시 요청한 OS별 클라이언트 SDK를 Admin 사이트에서 다운로드합니다. 클라이언트 SDK 요청에 대해서는 저희 고객 담당자에게 문의하시기 바랍니다.

  • 다운로드 받은 SDK 압축파일을 작업 폴더에 압축 해제합니다.

2. 클라이언트 SDK 샘플 프로젝트 수정

  • 안드로이드 스튜디오를 실행하고 '기존 프로젝트 열기' 기능으로 PallyCon Widevine Android SDK의 'sample' 폴더에 저장된 프로젝트를 로딩합니다.

  • PallyCon 어드민 사이트에 가입된 서비스 정보를 설정합니다. 프로젝트 트리 뷰에서 'app > assets > site.json' 항목을 더블클릭하고, 'siteid'와 'sitekey' 값을 각각 PallyCon 어드민 사이트의 '사이트 설정' 페이지에 표시된 값으로 입력합니다.

  • 2단계에서 패키징한 DASH콘텐츠의 URL을 소스에 추가합니다. 프로젝트 트리 뷰에서 'app > assets > media.exolist.json' 항목을 더블클릭하고 , 'streaming'과 'download' type 항목에 각각 다음와 같은 값을 설정합니다. (아래에 없는 항목은 기본값을 유지합니다.)

"uri": "이전 단계에서 사용한 DASH 콘텐츠 스트리밍 URL",
"name": "Sintel Trailer",
"userId": "valid-user",
"cid": "이전 단계에서 확인한 해당 콘텐츠의 ID",
"oid": "",

참고

  • 'uri'와 'cid' 항목은 테스트 환경에 따른 값으로 입력해야 합니다.

widevine-sample

3. 샘플 앱 빌드 및 콘텐츠 재생 확인

  • 안드로이드 OS 4.4 이상의 기기를 대상으로 샘플 프로젝트를 빌드하고 실행합니다.

  • 스트리밍 또는 다운로드 목록에서 'Sintel Trailer' 항목을 터치해 재생을 확인합니다.

play

참고

  • 재생 테스트에서 에러가 발생하는 경우, 위에 설명된 샘플 프로젝트 설정 값들이 정확하게 입력되었는지 확인합니다.
  • 또한 재생 테스트를 진행하는 동안에는 Codeanywhere의 샘플 웹 어플리케이션이 계속 실행 중인 상태이어야 합니다.

축하합니다! 여기까지 문제없이 진행하셨다면 PallyCon 멀티DRM 서비스를 적용하는데 필요한 전 과정을 체험하신 것입니다. 보다 상세한 내용은 아래 이어지는 설명과 각종 API 가이드, 그리고 SDK에 포함된 레퍼런스 문서를 참고하시기 바랍니다.


results matching ""

    No results matching ""