1.1.2 • Published 4 years ago

clost-helper v1.1.2

Weekly downloads
-
License
ISC
Repository
-
Last release
4 years ago

cs-helper

cs-helper는 Cloud Streaming 기반 웹앱과 Cloud Streaming Player 와의 연동 규격에 대한 인터페이스 모듈이며 주로 아래의 기능을 수행한다.

  • CSS로부터 전달 받은 요청을 이벤트 기반으로 웹앱에게 전달한다.
    • StartApp : T-Commerce 웹앱에 대한 클라우드 스트리밍 시작 요청
    • NotifyKey : 특정 키('이전', '종료' ,'홈')등을 웹앱에게 키이벤트가 아닌 메시지로 전달
    • HsitoryAll : 히스토리 목록 요청
    • BcsInfo : BCS 정보 요청
  • 웹앱은 cs-helper를 이용하여 아래의 요청을 CSS에게 할 수 있다.
    • StopApp : T-Commerce 웹앱에 대한 클라우드 스트리밍 종료 요청
    • OnLoad : 웹앱이 로딩 완료 시 BCS에 전달
    • TuneChannel : 채널 튜닝 요청
    • StartVod : VOD 재생 요청
    • StopVod : VOD 정지 요청
    • History : 세션 복구 시 필요한 히스토리 정보를 셋탑에 저장
    • KeyFilter : 키 입력에 대해 웹앱에서 특별한 처리를 해야하는 경우 키 필터링 요청
    • SessionTimeout : 웹앱 화면 별로 별도의 세션 타임아웃 시간 설정
    • PipResize : PIP(Picture In Picture) 요청
    • DeviceInfo : 셋탑의 정보를 요청

1) 용어

  • CS(Cloud Streaming)
  • CSS(Cloud Streaming Server)
  • ICS(Image based Cloud Streaming) : 이미지 기반 클라우드 스트리밍
  • BCS(Broadcast based Cloud Streaming
  • CSP(Cloud Strraming Player)

2) 버전

  • 0.1.2
  • 주요 변경사항 STB-CSP간 연동 규격 확정으로 인한 startVod, stopVod 메서드 수정 onVodPlayInfo, onVodTimeInfo 이벤트 추가

3) 설치

  • 가능한 npm을 통한 배포를 지원할 예정이나 현재는 오프라인으로 전달받은 cs-helper@version.tgz을 사용해야 한다.

  • npm 을 이용해서 설치 할 경우

$ npm install cs-helper
  • 오프라인으로 전달 받았을 경우 
$ tar zxvf cs-helper@[version].tgz ./your-source-code-lib-path
$ npm install --save xml2js
$ npm install --save eventemitter3

3) APIs

isCss : 현재 실행 중인 웹앱이 클라우드 스트리밍 서버(CSS)에서 동작하는지 알려준다.

  • example
import { csHelper } from './src/lib/cs-helper';
if( csHelper.isCss() ) {
    console.log('Running on the Cloud Streaming server.')
}

init(options) : cs-helper를 초기화한다. 이때 cs-helper은 CSS 와 필요한 이벤트 리스너를 등록한다.

  • options : * logging : cs-helper 라이브러리의 콘솔 로그를 on/off 한다.
  • example 
import { csHelper } from './src/lib/cs-helper';
csHelper.init( {logging:true} )

loadedApp : 웹앱이 로드가 완료되었다는 것을 알려준다.

  • 해당 API는 BCS 웹앱 일 경우에만 호출하면 된다.
  • example
import { csHelper } from './src/lib/cs-helper';
// 'load' 이벤트를 등록한다.
window.addEventListener("load", () => {
    // BCS Type 웹앱 일 경우 'load' 이벤트 발생 시 BCS에게 NOTIFY를 해줘야 한다.
    if( this.csType === constants.BCS_CS_TYPE ) {
        csHelper.loadedApp();
    }
})

closeApp(closeOption) : 웹앱에 대한 클라우드 스트리밍 종료 요청

  • closeOption : 'Exit' , 'Home'
    • Exit : 웹앱을 종료한다.
    • Home : 웹앱을 종료하고 홈 화면을 로딩을 요청한다.
  • example
import { csHelper } from './src/lib/cs-helper';
let closeOption = 'Exit'
csHelper.closeApp(closeOption)

tuneChannel(channelInfo) : 채널 튜닝 요청을 한다.

  • channelInfo : 재생 할 채널의 정보
  • example
import { csHelper } from './src/lib/cs-helper';
let channelInfo = { sourceId : 102 }
csHelper.tuneChannel(channelInfo)

startVod(contentInfo) : VOD 콘텐츠 재생 요청을 한다.

  • contentInfo : 재생 할 VOD 콘텐츠의 정보
  • example(SK stoa)
import { csHelper } from './src/lib/cs-helper';
let contentInfo = { 
	type : '',
    contentId : '',
	contentUrl : '',
	hasNextPlay : false,
	x : 0,
	y : 0,
	width : 1280,
	height : 720
} 
csHelper.startVod(contentInfo)

stopVod : VOD 콘텐츠 종료 요청을 한다.

  • example
import { csHelper } from './src/lib/cs-helper'
csHelper.stopVod()

setVodControl(controlInfo) : VOD 콘텐츠 재생을 제어한다.

  • controlInfo : 제어 정보
  • example
import { csHelper } from './src/lib/cs-helper';
let controlInfo;
controlInfo = { status : 'pause|play' } // pause & play
controlInfo = { status : 'speed' , value: 'FF' }  // ff
controlInfo = { status : 'speed' , value: 'REW' } // rew
csHelper.setVodControl(controlInfo)

setHistoryInfo(historyInfo) : 히스토리 정보 저장을 요청한다.

  • historyInfo : 히스토리 정보
  • example
import { csHelper } from './src/lib/cs-helper';
let historyInfo = { } // 히스토리 정보에 대한 정의는 웹앱 개발 업체가 한다.
csHelper.setHistoryInfo(historyInfo)

setKeyFilter(filterInfo) : 키 입력에 대해 웹앱에서 특별한 처리를 해야하는 경우 키 필터링 요청

  • filterInfo : 필터링 정보
  • example
import { csHelper } from './src/lib/cs-helper';
let filterInfo = { useNumberkey : true } 
csHelper.setKeyFilter(filterInfo)

setSessionTimeout(timeoutInfo) : 화면별로 별도의 타임아웃 시간 설정이 필요한 경우 요청

  • timeoutInfo : 타임아웃 정보
  • example
import { csHelper } from './src/lib/cs-helper';
let timeoutInfo = { timeout : 15000  } 
csHelper.setSessionTimeout(timeoutInfo)

setScreenResize(resizeInfo) : 영상 영역을 주어진 값에 따라 조정한다.

  • resizeInfo : 화면 리사이즈 정보
  • example
import { csHelper } from './src/lib/cs-helper';
let resizeInfo = { 
	x : 0,
	y : 0,
	width : 1280,
	height : 720
} 
csHelper.setScreenResize(resizeInfo)

sendMessage(message) : CSS로 부터 받은 이벤트에 대한 회신 메세지를 전송한다.

  • message : 회신할 메세지, 메세지의 내용은 이벤트마다 상이하며 아래 이벤트 등록에 상세히 다룬다.
  • example
// 요청에 대한 응답 메시지 전송
let data = {
    result : true
}
let message = {
    type : 'request|response',
    msgId : new Data().getTime(), // 현재 시간을 밀리초로 변환, 회신일 경우 
    command : 'StarApp|StopApp',
    contents : '',
    data : data
}
csHelper.sendMessage(message)

on(event, func) : 웹앱은 cs-helper로 부터 전달 받아야하는 이벤트에 대해 콜백함수를 등록한다.

  • event : 현재 등록 가능한 이벤트는 아래와 같다.
    • 'onStart' : 웹앱에 대한 클라우드 스트리밍 시작 요청 시
    • 'onNotify' : 특정 키('이전', '종료' ,'홈')등을 전달 시
    • 'onBcsInfo' : BCS 정보 요청 시
    • 'onVodPlayInfo' : VOD 콘텐츠 재생에 관련 이벤트 전달 시
    • 'onVodTimeInfo' : VOD 콘텐츠 재생 시간 이벤트 전달 시
  • func : 콜백함수
  • example
    • onStart
import { csHelper } from './src/lib/cs-helper';
csHelper.initialize()
csHelper.on('onStart', (payload, err) => {
    // 에러처리
    if(err) {
        console.log('[%s]:Error occured onStart %s', TAG, err)
        return;
    }
    // 요청에 대한 응답 메시지 전송
    let data = {
        result : true
    }
    let message = {
        type : 'response',
        msgId : payload.msgId,
        command : payload.command,
        contents : payload.contents,
        data : data
    }
    csHelper.sendMessage(message)
})

콜백함수의 payload 에는 아래의 내용들이 포함되어 있다.

{   
    "type": "request",
    "msgId": "1530670713180",
    "command": "StartApp",
    "contents": "",
    "data": {
        "mainAppId": "46",
        "deviceInfo": {
            "sourceId": "80001",
            "stbId": "123456789",
            "stbModel": "UC2300X",
            "macAddress": "28:32:c5:df:f9:fc"
        },
        "launchInfo": {
            "historyList": {
                "history": {
                    "menuId": "101",
                    "homeKey": "true",
                    "channelReset": "false",
                    "sourceId": "852"
                }
            },
            "extInfo": "",
            "csType": "ICS",
            "appType": "0",
            "appId": "46",
            "subAppId": "0"
        }
    }
}
*  *onNotifyKey*
csHelper.on('onNotifyKey', (payload, err) => {
    if(err) {
        console.log('[%s]:Error occured onBcsInfo %s', TAG, err)
        return;
    }
    console.log('[%s]:onNotifyKey > %s', JSON.stringify(payload.data) )
    let keyCode = parseInt(payload.data.value, 10)
    if( !isNaN(keyCode) ) {
        switch( keyCode) {
            case 111 :
                csHelper.closeApp('Exit')
                break;
            case 3:
                csHelper.closeApp('Home')
                break;
            default:
                break;
        }
    }
})

payload 에는 아래의 내용들이 포함되어 있다.

{   
    "type": "request",
    "msgId": "1530670713180",
    "command": "NotifyKey",
    "contents": "",
    "data": { value : 111 }
}
*  *onBcsInfo*
import { csHelper } from './src/lib/cs-helper';
csHelper.on('onBcsInfo', (payload, err) => {
    if(err) {
        console.log('[%s]:Error occured onBcsInfo %s', TAG, err)
        return;
    }
    // 요청에 대해서 BCSInfo 메시지를 전송한다.
    let bcsInfoData = require('assets/json/bcsinfo-data.json')
    console.log('[%s]:keycodes : %s', TAG, JSON.stringify(bcsInfoData) )

    let message = {
        type : 'response',
        msgId : '',
        command : 'Set',
        contents :'BcsInfo',
        data : bcsInfoData
    }
    csHelper.sendMessage(message)
})

payload 에는 아래의 내용들이 포함되어 있다.

{   
    "type": "request",
    "msgId": "1530670713180",
    "command": "BcsInfo",
    "contents": "",
    "data": { }
}

bcsinfo-data.json 에는 아래의 내용들이 포함되어야 한다.

{
    // 홈 화면에서 입력되는 키(left(=37), up(=38), right(=39), down(=40), enter(=13) 에 대한 정의
    "keycodes" : {
        "key" : [{
            "$" : { "value" : "37"},
                "launchInfo" : {
                    "csType": "ICS",
                    "appType" : 1,
                    "appId" : 123,
                    "subAppId" : 0
                }
        },{
            "$" : { "value" : "38"},
                "launchInfo" : {
                    "csType": "ICS",
                    "appType" : 1,
                    "appId" : 123,
                    "subAppId" : 0
                }
        }, ... ]
    },
    // 홈 화면에서 필요한 명령
    "initialCmd" : {
        "cmd" : [{
            "$" : {"value" : "0", "delay" : "0" },
            "_" : "<INTERFACE version=\"3\"><TYPE>notify</TYPE><MSGID/><COMMAND>Set</COMMAND><CONTENTS>StartDelayTime</CONTENTS><DATA><value>12000</value></DATA></INTERFACE>"
        },{
            "$" : {"value" : "1", "delay" : "100" },
            "_" : "<INTERFACE version=\"3\"><TYPE>notify</TYPE><MSGID/><COMMAND>Set</COMMAND><CONTENTS>PipResize</CONTENTS><DATA><value>0|0|1280|720</value></DATA></INTERFACE>"
        }]
    }
}
*  *onVodPlayInfo*
import { csHelper } from './src/lib/cs-helper';
csHelper.on('onVodPlayInfo', (payload, err) => {
    if(err) {
        console.log('[%s]:Error occured onVodPlayInfo %s', TAG, err)
        return;
    }
	switch(payload.data.status) {
		case 'start': // VOD 콘텐츠 재생 준비 완료
			break;

		case 'stop':  // VOD 콘텐츠 정지 
			break;

		case 'eof':   // VOD 콘텐츠 재생 완료(EOF)
			break;

		case 'error' :// VOD 콘텐츠 재생 시 에러 발생 
			break;
	}
})

payload 에는 아래의 내용들이 포함되어 있다.

{   
    "type": "request",
    "msgId": "1530670713180",
    "command": "Set",
    "contents": "Vod",
    "data": { status : "start|stop|eof|eroror" }
}
*  *onVodTimeInfo*
import { csHelper } from './src/lib/cs-helper';
csHelper.getVodTimeInfo( {durationInfo:total} )
csHelper.getVodTimeInfo( {durationInfo:current} )
csHelper.on('onVodTimeInfo', (payload, err) => {
    if(err) {
        console.log('[%s]:Error occured onVodTimeInfo %s', TAG, err)
        return;
    }
	// TDB
})

payload 에는 아래의 내용들이 포함되어 있다.

{   
    "type": "request",
    "msgId": "1530670713180",
    "command": "Get",
    "contents": "Vod",
    "data": { } // TBD
}

remove(event) : 등록한 이벤트 리스너를 제거한다.

  • event : 이벤트 이름(onStart, onNotify, OnBcsInfo)
  • example
import { csHelper } from './src/lib/cs-helper';
csHelper.remove('onStart')

4) Animation

slideIn(identify, from, to, duration, isNextBlock=0, isRefresh=0, accel=0)

애니메이션 대상이 되는 엘리먼트를 from(x, y, w, h, z, a)에서 to(x, y, w, h, z, a)까지 이동 시킨다. 해당 함수를 호출한 후 to 영역에 엘리먼트를 렌더링해야 한다.

  • identify : 애니메이션 대상이 되는 엘리먼트의 ID
  • from : 애니메이션 대상이 되는 엘리먼트의 시작 위치 정보
  • to : 애니메이션 대상이 되는 엘리먼트의 종료 위치 정보
    • x : 애니메이션 대상이 되는 엘리먼트 x 좌표
    • y : 애니메이션 대상이 되는 엘리먼트 y 좌표
    • w : 애니메이션 대상이 되는 엘리먼트 width 값
    • h : 애니메이션 대상이 되는 엘리먼트 height 값
    • z : 애니메이션 대상이 되는 엘리먼트 z-index 값
    • a : 애니메이션 대상이 되는 엘리먼트 alpha 값 (0~1)
  • duration: 애니메이션 진행 시간 (ms)
  • isNextBlock : TBD
  • isRefresh : TBD
  • accel : TBD
import { csHelper } from './src/lib/cs-helper';
csHelper.initialize()

let from = { x:1000, y:16, w:720, h:360, z:0, a:1 }
let to = { x:266, y:16, w:720, h:360, z:0, a:1 }
if( csHelper.isCss() ){
    csHelper.slideIn(this.bannerId, from, to, 3000);
}

//위의 함수를 호출한 후 to 영역의 엘리먼트를 렌더링한다.
document.getElementById(this.bannerId).style = 'display: block'

slideInUseURL(urls, from, to, duration, isNextBlock=0, isRefresh=0, accel=0)

애니메이션 대상이 되는 이미지 목록들을 from(x, y, w, h, z, a)에서 to(x, y, w, h, z, a)까지 이동 시킨다.

  • urls : 애니메이션 대상이 이미지의 URL 목록
  • from : 애니메이션 대상이 되는 엘리먼트의 시작 위치 정보
  • to : 애니메이션 대상이 되는 엘리먼트의 종료 위치 정보
    • x : 애니메이션 대상이 되는 엘리먼트 x 좌표
    • y : 애니메이션 대상이 되는 엘리먼트 y 좌표
    • w : 애니메이션 대상이 되는 엘리먼트 width 값
    • h : 애니메이션 대상이 되는 엘리먼트 height 값
    • z : 애니메이션 대상이 되는 엘리먼트 z-index 값
    • a : 애니메이션 대상이 되는 엘리먼트 alpha값 (범위 0~1)
  • duration: 애니메이션 진행 시간 (ms)
  • isNextBlock : TBD
  • isRefresh : TBD
  • accel : TBD
import { csHelper } from './src/lib/cs-helper';
csHelper.initialize()

let urls = ['http://xxx.com/img01.png','http://xxx.com/img02.png','http://xxx.com/img03.png']
let from = { x:1000, y:16, w:720, h:360, z:0, a:1 }
let to = { x:266, y:16, w:720, h:360, z:0, a:1 }
csHelper.slideInUseURL(urls, from, to, 3000);
eventemitter3hangul-jsxml2js
1.1.2

4 years ago

1.1.1

4 years ago

1.1.0

4 years ago