초보 개발자

우리는 webm확장자에서 mp4확장자로 바꿔주려고한다. 이 때 사용할 소프트웨어는 ffmpeg이다. 또 이걸 활용하여 썸네일도 추출해보려고 한다. 원래 ffmpeg는 콘솔에서 실행해야하여 백엔드에서 해줘야한다. 근데 백엔드에서 처리하려면 좋은서버가 필요하다. 메모리..그래픽장치등 여러가지가 필요하기 때문이다. 이 문제를 해결하기위해서 webassembly를 사용해보자 webassembly는 기본적으로 웹사이트가 매우 빠른 코드를 실행할 수 있게 해준다. 원래 front상에서는 html css js밖에 못쓴다 예를들어 go , c등은 쓸 수 가없고 back에서만 쓸 수 있다. 근데 webassembly를 사용하면 프론트엔드에서 매우 빠른 코드를 실행할 수 있다. 즉 webassembly를 통해서 웹에서 f..

2021.10.09 - [Zoom 클론] - Camera Camera wetube 클론코딩을 하면서 잠깐 사용해 본적이 있었는데 다시 사용할 기회가 생겨서 좋았다. 먼저 우리는 zoom 클론코딩 중이기 때문에 카메라가 나와야 할 것이다. 따라서 카메라를 띄우고, 음소 taehyeki.tistory.com 여기에서 Camera에 관한 얘기를 담았던 적이 있다. 이 글을 한번 읽고 오는 것을 추천!!! upload.pug에 먼저 버튼을 만들고 record.js stream을 만들어 주었는데 갑자기 !? regeneratorRuntime 오류가 발생했다. 전에 ZOOM에서 사용할 때는 문제가 안났었는데 socketIO덕분이었나?? 프론트엔드상에서 async와 await를 쓰려면 regeneratirRuntim..

API라는 것을 이용해보려고한다. API를 사용하면 URL이 바뀌지 않아도 페이지에서 변화가 생긴다. interactive하게 만들수 있는 가장 기본적 방법이다. 예를들어 이 페이지에 댓글을 달아도 URL이 바뀌지 않는다. 어떠한 API가 발생한 것이다. 이번에 프론트엔드에서 자바스크립트로 요청을 해볼것이다. video element에는 특별한 event가 있다. ended이다. 미디어가 끝까지 재생완료된 시점에 발생한다. fetch()를 활용할 것인데 기본적으로 '/'만 적어도 (http://localhost8080) 우리 웹사이트에 요청을 보낼 수 있다. 하지만 handleEnded함수에서 비디오의 id를 알 수 있는 방법이 없다. id의 정보를 pug가 남기도록 해야한다. 여기서 data attri..

우리가 offer와 answer를 가지고 그걸 받는 걸 모두 끝냈을 때!! peer to peer 연결의 양쪽에서 icecandidate라는 이벤트를 실행하기 시작한다. ice candidate는 Internet Connectivity Establishment(인터넷 연결 생성)이다. 브라우저가 서로 소통할 수 있게 해주는 방법이다. 다수의 candidate(후보)들이 각각의 연결에서 제안되고 서로의 동의 하에 하나를 선택한다. RTCIceCandidate - Web API | MDN (mozilla.org) RTCIceCandidate - Web API | MDN RTCIceCandidate 인터페이스는 WebRTC API의 한 종류로서, RTCPeerConnection을 구축 할 때 사용되기도하는 I..

webRTC는 peer to peer방식이다. 소켓의 경우 front -> back 으로 메시지를 보내고 back -> front로 다시 보내는 과정을 거쳤다. 메시지를 보내기 위해서는 서버가 반드시 필요하다. 하지만 webRTC는 사람과 사람간의 소통이므로 서버를 거쳐 소통하는 것이아닌 직접 소통하는 것이라 훨씬 빠르고 유용하다. 하지만 처음에 정보를 전달할 때는 서버의 도움이 필요하다. 이번에는 webRTC를 배워볼 것이다. 가장 처음에 우리는 방에 들어가면 나를 제외한 사람들에게 welcome이라는 이벤트를 준다. 그러면 우리는 nickname arrived를 출력하도록 하였다. 바로 이 때가 RTC process를 시작해도 될 때이다. 이제부터 peer A를 먼저 실행 시킨 브라우저로 표현하고 p..

wetube 클론코딩을 하면서 잠깐 사용해 본적이 있었는데 다시 사용할 기회가 생겨서 좋았다. 먼저 우리는 zoom 클론코딩 중이기 때문에 카메라가 나와야 할 것이다. 따라서 카메라를 띄우고, 음소거를하고, 끄고, 카메라를 고를 수 있는 작업을 해볼 것이다. 먼저 가장 중요한 getMedia 함수를 만들어 주었다. 이 함수는 처음에는 인자 없이 실행되고 그 다음부터는 실행될 때는 인자가 있어야 한다. 잘 이해가 안되겠지만 설명을 한번 들어보면 이해가 될 수도 있다. 먼저 initcon selcon이 있는데 initialConstraint 와 selectedConstraint를 줄여서 저렇게 지정하였다. Constraint가 무엇이냐면 기본적으로 video : true, audio: true와 같이 지정할..

Adapter는 기본적으로 다른 서버들 사이에 실시간 어플리케이션을 동기화 해준다. 우리는 서버의 메모리에서 Adapter를 사용하고 있다. 우리가 서버를 종료하고 다시 시작할 때 모든 room과 message와 socket은 사라진다. 지금 많은 client로부터의 connection들을 메모리에 저장하고 있다. 만약 서버를 2개 3개만들어도 같은 memory pool을 공유하지 않는다. 같은 대화창을 보고 있더라도 실제로는 다른 서버에서 연결되어 있을 수 있다. 만약 우리가 Adapter를 쓰지 않는다면 서버 A에 있는 client가 서버B에 있는 client에게 메시지를 보내고싶다면 불가능하다 서버가 분리되어 있기 때문에 따라서 Adapter를 써줘야한다. 서버A client -> 서버A -> 서버..

기본적으로 user는 이미 방에 혼자 들어가있다. 그 방의 이름은 user의 socket id와 같다. 우리는 기본적으로 방에 입장하려고 한다. socket.join을 사용하는데 만약 방이 없다면 방을 만들고 방이 있다면 그 방에 들어가는 방식이다. home.pug 먼저 div#room 속 form을 하나 더 만들어 준다. app.js 새로 만든 room을 처음에 숨겨주고. roomName은 일단 정해지지 않았기에 let으로 정의만해주었다. 그리고 showForm 함수를 통해서 welcome form이 지워지고 다시 roomForm이 나타나도록 하는 함수를 만들어주었다. 그리고 전과 마찬가지로 welcomeForm의 input의 값과 enter_event를 emit으로 백엔드에 전달해주고 콜백함수에는 h..