Angular2 :: socket.IO-Stream in Angular2

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

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

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

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

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

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

  Npm install youtube-audio-stream var youtubeStream = require(‘youtube-audio-stream’)

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

스트리밍해줍니다

Server Side

io.of('/stream').on('connection', (socket) => { console.log('User Connected...'); ss(socket).on('PlayTrack',function(stream,data){ console.log(data) var id = data.track var url = 'https://www.youtube.com/watch?v=' + id; var streams = ss.createStream() youtubeStream(url).pipe(streams) ss(socket).emit('result', { payload: { stream: streams } }); }) socket.on('disconnect', () => { console.log('User Disconnected...'); }); });

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 를 할당해준다