'socket.io-stream'에 해당하는 글 2건

2017.05.11 Angular2 :: socket.IO-Stream in Angular2
2017.04.05 Angular2 :: socket.IO 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

: 내가달이다

Angular2 :: socket.IO in Angular2

MEAN stack/Angular2 2017. 4. 5. 10:18

share this post

최근 socket.io 를 사용할일이있었는데 설치하는데 애를 먹어서 포스팅을 남깁니다

1) socket.io 를 설치해준다

npm install socket.io --save

지금 하고있는 프로젝트의 케이스는 기존 서버에 소켓서버만 추가를 하고 헤더만 다르게 주워서 필요할때만 소켓 서버를 이용하게 할 생각이다

기존 서버는 express 를 이용해 http post 정도만 사용을 했다

<소스 : server.js>

<소스 : socketserver.js>

현재 서버에는 포트가 총 3개다

서버 : 4100

소켓서버 : 8000

클라이언트 : 3000

소켓이 연결이 되었을때

User Connected 로그를 남겨주도록했다 서버 실행후 localhost:8000 으로 connect 시켜주면

끝

이였으면 좋겠지만 angular2 에서 import 에서 사용할려고 하니 문제가 발생헀다 socket.io를 인식을 못하고있다..

구글링 결과

npm install --save @types/socket.io

이놈을 설치해주어야 클라이언트 <--> 서버간 통신이된다

다음포스팅은 socket.io-stream 을 이용한 mp3 파일 스트리밍을 해볼생각입니다

기존 offliberty 가 동시사용제한이있는거같네요 ....

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

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

WRITTEN BY

: 내가달이다

'socket.io-stream'에 해당하는 글 2건

Angular2 :: socket.IO-Stream in Angular2

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

Angular2 :: socket.IO in Angular2

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

티스토리툴바