전체 글
효과적인 개발 공부 방법 (초보 개발자)
시간은 중요하다. 누구도 시간을 살 수 없다. 돈보다 중요한 것은 시간임을 잊지 말 것. 자신을 잘 알아야 한다. 자신이 어디로 나아가려는지 분명히 안다면 모든 것을 배우느라 시간을 낭비하지 않아도 된다. 초보자인 경우에는 파이썬이나 자바스크립트 중 하나를 선택해 시작하자. 한 언어를 마스터하라. 좋아하는 언어를 제대로 배우자. 모범 사례를 읽고, 커뮤니티에 참여하고, 컨퍼런스에 가자. 데이터구조, 알고리즘과 같은 미리미리 공부해두자. 그러나 너무 빨리 배울 필요는 없다. 배포까지 할 줄 아는 수준이 될 때 배우기 시작하자. SQL을 배워두자. 결국에 필요하다. 코드 에디터 사용 방법(단축키 등)과 커스터마이징 하는 방법을 공부하자. 겸손한 마음으로 꾸준히 계속해서 학습하자.
[WebRTC] 7. 라이브 스트리밍 구현 (3) Sender / 카메라 및 오디오 전환하기
스트림이 진행되는 동안 카메라나 오디오를 전환하려면 어떻게 해야 할까요? 이 때는 1) 상대방의 연결을 확인하고, 2) 사용하는 기기를 확인한다음, 3) sender를 통해 스티리밍 track을 변경해줄 수 있습니다. Sender 찾기 먼저, getSenders()를 사용하면 webRTC 연결에서 sender 정보를 받아올 수 있습니다. 이 정보를 업데이트하면 기기 전환을 구현할 수 있습니다. async function handleCameraName() { await getMedia(cameras.value, undefined); if (myPeerConnection) { console.log(myPeerConnection.getSenders()); } } async function handleAudio..
[WebRTC] 6. 라이브 스트리밍 구현 (2) IceCandidate & Track
Peer A와 Peer B가 offer와 answer를 주고 받았다면 이제 IceCandidate이벤트를 실행하여 스트리밍을 진행할 수 있습니다. IceCandidate는 Internet Connectivity Establishment의 약자로 연결 가능한 네트워크 주소 후보 Candidate를 찾는 역할을 합니다. 각 Peer는 Candidate에 연결하여 서로의 데이터를 스트리밍할 수 있습니다. IceCandidate 이벤트 리스닝 RTCPeerConnection이 생성되면 icecandidate 이벤트 리스너가 발동되도록 합니다. 다음으로 스트림(myStream)에 트랙을 추가해줍니다. 로그를 찍어보면 아래와 같은 icecandidate 들이 출력됩니다. // app.js function makeC..
[WebRTC] 5. 라이브 스트리밍 구현 (1) offer & answer
WebRTC 라이브 스트리밍은 다음의 흐름을 따라 구성됩니다. Peer A가 Offer를 생성하여 서버를 통해 Peer B에 전달합니다. Peer B는 해당 Offer를 받고 Answer를 생성하여 서버를 통해 Peer A에게 전달합니다. Peer A가 candidate를 전달하고 Peer B는 이를 추가합니다. Peer B가 candidate를 전달하고 Peer A는 이를 추가합니다. 스트리밍이 진행됩니다. RTC 연결 생성하기 아래와 같이 RTCPeerConnection을 통해 새로운 RTC 연결을 생성할 수 있습니다. // app.js function showVideoOption() { videoInteface.hidden = true; streamingInterface.hidden = false;..
[WebRTC] 4. 채팅방 기능 구현하기
지금까지는 자신의 영상 및 음성을 처리하는 기능을 구현했습니다 이제 동일한 방에 참여한 사람들끼리 영상 채팅을 할 수 있는 기능을 하나씩 구현해보도록 하겠습니다. home.pug에서 채팅방을 입력받을 수 있는 인터페이스를 구현해주겠습니다. // home.pug div#videoRoomSelect form h2 Video input("type"="text", palcehodler="Please select a room", required) button Join div#videoStreaming h2 Video Chat video#myFace(autoplay, playsinline, width="400", height="400") select#cameras select#audios button#audioMu..
선택에 대하여 ⏐ 61 ⏐ 일상 에세이
지난 9월 직장을 그만뒀다. 직장 생활과 프리랜서 생활을 오가던 나는 그렇게 다시 온전한 프리랜서가 됐다. 사실 오래도록 지금의 때를 기다려왔다. 직장인이 아니라 혼자서 나의 일을 하는 솔로 워커가 되기를 마침내 선택하는 순간을. ‘그래서 이제 뭐할거에요?’라는 질문에 ‘계획은 없고요. 일단 놀고 싶습니다.’ 라고는 결코 말할 수 없었던 내게는 이미 몇 가지 계획이 있었고, 그 중 하나는 나의 꿈을 일목요연하게 정리해보는 것이었다. 그런데 꿈에 대해 파고들수록 ‘진짜 나만의 꿈’은 내게서 멀어져가는 느낌이었다. ’진짜‘ ’나만의‘ ’꿈‘이라는 단어에 대해 고심할수록 현실적인 대답은 요원해졌다. 꿈을 좇으려 할 수록 현실의 나는 자꾸만 삐걱거렸다. 결론적으로 내겐 ’진짜‘ ’나만의‘ ’꿈‘과 같이 평생에 ..
[WebRTC] 3. 카메라 오디오 전환하기
이제 영상 카메라와 오디오 기기를 변경하는 옵션을 추가해보도록 하겠습니다. home.pug에서 select 옵션 태그를 추가해줍니다. // home.pug div#video h2 Video Chat video#myFace(autoplay, playsinline, width="400", height="400") select#cameras // 카메라 선택 옵션 select#audios // 오디오 선택 옵션 button#audioMute Mute button#cameraOff Camera Off 이제 사용할 수 있는 기기 정보들을 얻어보도록 하겠습니다. enumrateDevice() 메소드를 사용하면 연결된 기기 정보를 모두 불러올 수 있습니다. 다음으로 kind 키를 통해 videoinput과 audio..
[WebRTC] 2. 영상 및 음성 켜고 끄기
지난 포스팅에서는 영상 및 음성을 출력하는 것을 구현했는데요. 이번에는 해당 영상과 음성을 켜고 끄는 버튼을 구현해보도록 하겠습니다. 먼저, home.pug로 이동하여 해당 버튼들을 만들어주겠습니다. // home.pug div#video h2 Video Chat video#myFace(autoplay, playsinline, width="400", height="400") button#audioMute Mute button#cameraOff Camera Off 다음으로 app.js로 이동하여 아래와 같이 요소를 선택합니다. ON/OFF를 판단할 수 있는 변수인 audioOn과 cameraOn도 만들어주겠습니다. // app.js const myFace = document.getElementById("m..
