JWPlayer 강좌 (8) - 스트리밍(Streaming) [1/2]

디케DIKE 운영 0 2333 2017.12.25 19:34

JW Player에서 지원하는 2가지 형태의 스트리밍에 대한 포스팅입니다.

1. JW Player - RTMP Block

* JW Player는 2가지 타입의 스트리밍을 지원.

>RTMP 스트리밍 지원 (Adobe Flash Player 기반)
>HLS 스트리밍 지원 (Apple사에서 개발 및 지원하는 프로토콜 - QuickTime, Safari, OS X, iOS 대응)

[재생 버튼에 속지 마세요!! 이미지 입니다.. ㅎㅎㅎ]

- RTMP와 HLS 에 대해 더 알아보기 -

포스팅URL : khttp://ozit.tistory.com/106

* RTMP 지원을 위해 다음의 Configuration Options 지원.

옵 션	설 명
rtmp.bufferlength	* 스트리밍을 재생하는 동안 항상 어느 정도의 미디어 데이터를 유지할지 저장하는 Video Buffer의 크기를 설정. * 버퍼를 작게하면 빠른 시작(start)과 찾기(seek)가 가능하나 re-buffering 이 자주발생 할 수 있음. * 기본 값은 3초
rtmp.subscript	* 로드밸런싱을 관리하는 더 오래된 스트리밍 서버에 의해 FC Subscribe Mechanism 사용을 가능하게 함. (권장하지 않음)
rtmp.securetoken	* 이전 Wowza 인스터스를 지원하는 이 옵션은 JW Player에 보안 토큰을 제공. (기본값 empty)

2. JW Player로 RTMP Streaming 재생 코드 작성하기

2.1) RTMP 스트리밍 기본 코드

* 단순히 Audio 파일 대신 Full Stream URL을 제공하는 것과 동일.

jwplayer("myElement").setup({
    file: "rtmp://example.com/application/mp4:myVideo.mp4",
    image: "/assets/myVideo.jpg",
    height: 360,
    width: 640
});

* 참고 : 모든 모바일 디바이스에서 플래시는 완벽 지원되지 않음. (Desktop에서만 정상적으로 동작)

- Using RTMP Streaming -

http://support.jwplayer.com/customer/portal/articles/1430358-using-rtmp-streaming

2.2) RTMP 스트리밍과 대체 재생 코드

* RTMP 스트리밍을 지원하지 못하는 디바이스 등의 환경에 대응하기 위해 RTMP와 함께 다른 형태의 재생 방식 지원.

- MP4 오디오 파일을 RTMP와 HTTP 두개의 방식으로 로드.
- 데스크탑에서 호출하면 RTMP 스트림을 통해 재생되고, 모바일에서는 HTTP 다운로드 방식으로 재생.

jwplayer("myElement").setup({
    playlist: [{
        image: "/assets/myVideo.jpg",
        sources: [{
            file: "rtmp://example.com/application/mp4:myVideo.mp4"
        },{
            file: "/assets/myVideo.mp4"
        }]
    }],
    height: 360,
    primary: "flash",
    width: 640
});

[위의 코드 설명]

* Praimary 렌더링 모드로 flash가 설정되어 있기 때문에 기본으로 MP4 재생을 위해 RTMP stream이 선택됨.
* 만약 Primary 렌더링 모드가 지원되지 않는다면 JW Player는 두번째 방식(HTTP Download)으로 재생 시도.

3. RTMP Stream 의 구성

* RTMP Stream 은 Application Path와 Stream Identifier 2부분으로 구성됨.

[RTMP Stream URL]

rtmp://example.com/vod/mp4:myFolder/myVideo.mp4

The Stream Identifier: mp4:myFolder/video.mp4 (미디어 스트리밍 정보)

The Application Path: rtmp://example.com/vod/ (서버 정보)

* JW Player는 mp4, flv, mp3 prefix: 의 위치를 기준으로 application path 와 stream identifier를 구분

3-1) RTMP Stream Prefix 종류

• mp4: prefix (video)

- MP4, M4V, MOV, F4V videos.

- rtmp://example.com/vod/mp4:myFolder/myVideo.mp4

• flv: prefix

- FLV vidoes or live streams (with FLV container)

- rtmp://example.com/vod/flv:myFolder/myVideo.flv / rtmp://example.com/live/flv:myFolder/myLiveStream

• mp3: prefix

- MP3 Audio

- rtmp://example.com/vod/mp3:myFolder/mySong.mp3

• mp4: prefix (audio)

- M4A, F4A, AAC audios

- rtmp://example.com/vod/mp4:myFolder/mySong.m4a

* JWPlayer는 Prefix 를 찾지 못하면 파일명의 마지막 /(Slash) 를 기준으로 applicatio과 stream을 구분(분리). 분리 후, mp4: mp3: 등의 prefix 를 자동으로 붙여줌.
* 참고) Wowza/Adobe Server는 내부적으로 flv prefix는 사용되지 않기 때문에 JW Player는 스트림 요청 전에 해당 prefix를 제거.

4. RTMP 의 Configuration 옵션에 대해 더 자세히 알아보기

4-1) Changing Buffer Length

* 기본 Buffer Length 값 : 3 초 (미디어의 3초 분량의 데이터를 가져오면 재생 가능 상태로 전환)
* 일반적인 Buffer Length 설정 범위 : 0.1 초 (낮은 지연 시간으로 실시간 스트리밍), 10 초 (빈번한 재 버퍼링 방지)

jwplayer("myElement").setup({
    file: "rtmp://example.com/vod/mp4:myVideo.mp4",
    height: 360,
    image: "/assets/myVideo.jpg",
    rtmp: {
        bufferlength: 0.1
    },
    width: 640
});

4-2) FC Subscribe

* Akamai, Edgecast, Limelight CDN을 통해 RTMP Live Streaming 을 하는 경우, 단순히 Live Stream에 접속 불가.
* 대신 FC Subscribe를 이용하여 서버에 접속. JW Player는 RTMP 옵션을 통해 이를 지원.

jwplayer("myElement").setup({
    file: "rtmp://example.com/xxxx/myStream",
    height: 360,
    image: "/assets/myLivestream.jpg",
    rtmp: {
        subscribe: true
    },
    width: 640
});

* FC Subscribe 을 통해서는 단일 RTMP 스트림만 지원하며, Multi-bitrate live 스트리밍을 이용하려면 HLS 프로토콜 사용.

4-3) Secure Token (보안 토큰)

* Wowza Media Server 에서 지원.
* 스트리밍 되는 미디어의 소스를 다운로드로부터 보호하기 위한 기능.

* RTMP 스트림이 시작되기 전에 서버에 검증된 토큰을 발송하여 검증받는 매커니즘.
* JW Player는 RTMP securetoken 옵션을 사용하여 이를 지원.

jwplayer("myElement").setup({
    file: "rtmp://example.com/vod/mp4:myVideo.mp4",
    height: 360,
    image: "/assets/myVideo.jpg",
    rtmp: {
        securetoken: "Kosif093n203a"
    },
    width: 640
});

- Wowza Media Security Overview -

http://www.wowza.com/forums/content.php?115

출처: http://ooz.co.kr/153?category=818548 [이러쿵저러쿵]