'socket.'에 해당하는 글 1건

2017.05.11 Angular2 :: socket.IO-Stream in Angular2

Angular2 :: socket.IO-Stream in Angular2

MEAN stack/Angular2 2017. 5. 11. 13:47

share this post

오랜만에 글 올리네요 5월에 쉬는날도많고 헤이해져서 글을 올리지못했습니다

지난 글은 socket.io 를 설치해 간단한 통신을 해보았습니다

지금 만들고 있는 개인프로젝트 같은경우는 mp3 파일을 다운을 할필요없이 youtube 에서 mp3 를 추출해

실시간 스트리밍을 할예정입니다

이를 위해 우선 youtube 영상을 다운받는 모듈은 ytdl 이 대표적인데 저는 youtube-audio-stream 을 사용해볼까합니다

https://github.com/jameskyburz/youtube-audio-stream

Youtube-audio-stream 모듈을 이용하면 ytdl 을 이용해 ffmpeg 코드를 직접코딩할필요없이 youtube영상에서 음원을 추출한후

스트리밍해줍니다

Server Side

ss.createStream() -> 스트림을 생성해준다

ss(socket).on(‘PlayTrack’) -> Client side 에서 PlayTrack 호출시 실행된다

Client Side

var socket = io.connect('http://localhost:4100/stream')
    var stream = ss.createStream()
    ss(socket).emit('PlayTrack',stream,{track:videoURL})
    
    ss(socket).on('result',function(data){
         data = data || {};
        
         var payload = data.payload
         var ms = new MediaSource()
         var url = URL.createObjectURL(ms)

audio.src = url
      
         ms.addEventListener('sourceopen',callback,false)
         ms.addEventListener('sourceended',function(e){
          console.log('mediaSource readystate: ' + this.readystate)
         },false)
         
         function callback(){
           var sourceBuffer = ms.addSourceBuffer('audio/mpeg')

sourceBuffer.addEventListener('updatestart', function (e) {
                                        },false);

sourceBuffer.addEventListener('update', function () {
              //  console.log('update: ' + ms.readyState);
            },false);

sourceBuffer.addEventListener('updateend', function (e) {
                // console.log('updateend: ' + ms.readyState)
            },false);

sourceBuffer.addEventListener('error', function (e) {
                console.log('error: ' + ms.readyState);
            },false);
            sourceBuffer.addEventListener('abort', function (e) {
                console.log('abort: ' + ms.readyState);
            },false);
            // strem data
            payload.stream.on('data', function (data) {           
                sourceBuffer.appendBuffer(data);
            });
              // 데이터 전송이 완료되었을 경우 발생한다.
            payload.stream.on('end', function () {
                console.log('endOfStream call');
                ms.endOfStream();
            });
         }
    });

 var url = URL.createObjectURL(ms)

Blob URL 주소를 생성해준다

payload.stream.on ‘data’ -> Server Side 에서 stream data 를 받는다

SourceBuffer.appendBiffer(data) -> 버퍼에서 받은 stream data 를 할당해준다

'MEAN stack > Angular2' 카테고리의 다른 글

MVVM 패턴 (0)	2017.05.23
Angular2 :: socket.IO in Angular2 (0)	2017.04.05
Angular2 :: @ngrx/store (0)	2017.02.18
Angular2 :: 'unsafe value' exception (0)	2017.02.01
Angular2 :: Jquery 사용법 (0)	2017.01.24

WRITTEN BY

: 내가달이다

'socket.'에 해당하는 글 1건

Angular2 :: socket.IO-Stream in Angular2

'MEAN stack > Angular2' 카테고리의 다른 글

티스토리툴바