개발일기

hls형식의 미디어를 재생하려면 브라우저 호환성으로 인해 hls.js를 import하여 가져오는 것이 추천된다.yarn add hls.js react에서 미디어를 재생하기 위해 react-player를 추가로 설치한다.yarn add react-player 렌더링하는 부분에 RectPlayer를 통해 master.m3u8이 재생될 수 있도록 코드를 입력한다.return ( ) 전체 코드는 다음과 같다.import react from 'react'import ReactPlayer from 'react-player'import Hls from 'hls.js'function App() { return ( )}export d..

1. HLS란?HLS는 HTTP기반의 적응형 스트리밍 프로토콜이며 미디어 파일을 일정한 세그먼트(segment) 단위로 나눠서 전송한다. 적응형 스트리밍이란 사용자의 네트워크 환경에 맞는 화질을 자동으로 선택하여 전송하는 것을 의미한다. 즉 사용자의 네트워크 속도가 느릴 경우 화질을 낮춰 전송하고 네트워크 속도가 괜찮을 경우 좋은 화질로 미디어 데이터를 전송하는 것을 의미한다. 2. 코덱과 비트레이트Video Codec: 영상을 인코딩 하거나 디코딩하는 기술로 영상 데이터를 저장하거나 전송하기에 적합한 형태로 압축을 하고 재생 시 다시 원래 형태로 복원하는 역할을 한다. 비디오 코덱의 종류에는 libx264, libx265, mpeg4 등이 있다.Audio Codec: Audio Codec은 Video ..

1. ffprobe란?ffprobe로 미디어 파일이 담고 있는 영상, 음성, 자막 등의 정보를 확인할 수 있으며 해당 파일의 크기 등을 확인할 수 있다. 이렇게 얻은 정보를 바탕을 통해 ffmpeg으로 영상을 다른 확장자로 변환하거나 스트리밍 형식으로 변환할 수 있다.Node.js에서 ffprobe를 사용하려면 ffmpeg을 다운로드 해야한다. https://ffmpeg.org/ 이 사이트에서 자신의 OS에 맞게 설치를 하거나 npm에 올라가 있는 @ffprobe-installer/ffprobe, @ffmpeg-installer/ffmpeg패키지를 설치하여 사용할 수도 있다.npm ffmpeg: https://www.npmjs.com/package/@ffmpeg-installer/ffmpegnpm ffp..

https://github.com/FlashBack102/webrtc-boilerplate GitHub - FlashBack102/webrtc-boilerplateContribute to FlashBack102/webrtc-boilerplate development by creating an account on GitHub.github.com

1. WebRTC의 기본 구성 요소WebRTC웹 브라우저 간에 실시간 통신을 할 수 있게 해주는 오픈 소스 기술이다. 별도의 플러그인 없이 브라우저만으로 미디어 데이터 스트리밍을 주고받을 수 있다.Stun Server사용자가 자신의 공인 IP주소, 포트와 NAT종류를 파악할 수 있도록 해주는 서버로 주로 공유기나 NAT 환경에 이는 사용자가 외부에서 볼 수 있는 정보를 확인하게 해주는 서버이다. NAT 뒤에 있는 기기는 보통 사설 IP를 사용하여 외부 피어가 직접 연결을 하기 힘들다. STUN은 NAT으로 인해 발생하는 연결 문제를 우회하는데 중요한 역할을 한다. 즉 Stun 서버를 통해 자신의 공인 IP와 포트 번호를 파악한 후 그 정보를 다른 피어에게 전달해주는 역할을 하는게 Stun서버이다.Turn..

1. enumerateDevices()enumerateDevices()는 연결된 장치 목록을 배열 형식으로 반환한다.navigator.mediaDevices.enumerateDevices().then((devices) => { console.log('devices: ', devices)})배열 요소에는 deviceId, groupId, kind, label이 포함된다.deviceId: 장치 하나를 고유하게 식별하는 id다. deviceId를 통해 특정 장치를 선택하여 getUserMedia() 메서드를 사용할 수 있다.groupId: 카메라와 마이크가 함께 내장되어 있는 모니터와 같은 물리적 장치를 그룹으로 묶는 id다. 단순히 같은 그룹에 속해있다는 것을 알려주는 값이다.kind: 해당 장치가 어..

btoa()와 atob()는 문자열을 각각 Base64로 인코딩하거나 디코딩할 때 사용하는 javascript의 내장 함수다. btoa(): 문자열을 Base64 인코딩된 문자열로 변환하는 함수이다.let data = { name: 'mango', price: 1000}data = JSON.stringify(data) // object to stringconst encodedData = btoa(data) // encode dataconsole.log('encodedData: ', encodedData)// encodedData: eyJuYW1lIjoibWFuZ28iLCJwcmljZSI6MTAwMH0=btoa()로 Base64 형태로 인코딩하려면 먼저 데이터를 문자열로 변경해야 한다. JSO..

1. Join서버에서만 작동하는 메서드며 연결된 소켓을 특정한 room에 참여시킬 때 사용한다. 하나의 room에만 참여시키는 게 아니라 여러 room에 참여시킬 수 있다.io.on('connection', (socket) => { console.log('Socket connected:', socket.id); socket.join('roomA') socket.join('roomB') // 다른 room에도 참여시킬 수 있다.})위와 같이 코드를 작성하면 소켓에 연결되는 모든 클라이언트는 roomA와 roomB라는 room에 속하게 된다. 1-1. Query Parameter 지정소켓에 연결하는 모든 클라이언트를 같은 room이 아닌 조건에 따라 달리 지정하려면 소켓을 연결하는 클라이언트..