전체 글
-
webRTC 만들때 스턴(STUN)서버 와 턴(TURN)서버가 필요하다는데?! 근데 그게 뭐지???Study/WebRTC 2025. 5. 25. 01:30
저번에 이어 webRTC 관련된 주제로 블로그 글을 쓰고 있는데,요즘 같이 AI 로 검색하는 시대라 사람들이 기술 블로그를 굳이굳이 기록을 남기는 위함은 내 머리속에 조금이라도 남길 바라며공부용 으로 기록함.... 일단 저번에 이어 webRTC에 대해서 계속 블로그 글을 쓰고 있음.혹시 webRTC 구현 방법이 궁금하면 아래 링크 참고하시길...https://cbn1218.tistory.com/70 초보자도 간단하게 만들어 보는 영상통화 기능(webRTC로 영상통화 만들기)저번 시간에 이어 webRTC에 대해서 배웠다면 간단하게 영상통화 기능을 만들어 보는 방법을 공유할려함.혹시 webRTC를 모른다 하면 아래 링크 ㄱㄱ https://cbn1218.tistory.com/68 초보자도 이해 가능한 We..
-
Claude 4 출시...축복인가...재앙인가...Claude 4 어떤특징이 있는지 알아보자사는 이야기 2025. 5. 24. 01:14
요즘 저는 AI 활용에 심취하여 유튜브 알고리즘이 AI로 도배되어 있는데요,실제 업무에 적용하여 간단한 기능은 AI의 검색과 예시 코드를 활용하여 기능을 만들어 생산성을 높이고 있습니다. 사용하면서 느낀것이 그래도 AI가 디버깅이나 복잡한 프로젝트의 전체 코드 플로워는 이해 못하니까아직까지는 개발자가 필요하다 하면서 나름 안도의 한숨을 쉬었는데... 커서가 나오면서 코드의 흐름을 파악하고 간단한 디버깅도 해주니...이거 정말 얼마 안남았다 했는데이번에 Claude 4 출시를 보니 진짜 코앞까지 왔더라구요... 뭐땜에 호들갑이냐고 하실텐데...이제는 복잡한 코딩 작업 특화된 Opus 모델이 나왔습니다ㅠ 일단 클로드4 컨퍼런스 영상이 올라 왔길래 공유 하겠습니다. https://www.youtube.c..
-
http 접속시 getUserMedia 오류 카메라 오디오 기능을 못 가져와요Study/WebRTC 2025. 5. 22. 23:00
저번에 webRTC로 간단히 구현 하는 방법에 대해서 포스팅을 하였음.혹시 궁금하신분들은 아래 링크 참고https://cbn1218.tistory.com/70 초보자도 간단하게 만들어 보는 영상통화 기능(webRTC로 영상통화 만들기)저번 시간에 이어 webRTC에 대해서 배웠다면 간단하게 영상통화 기능을 만들어 보는 방법을 공유할려함.혹시 webRTC를 모른다 하면 아래 링크 ㄱㄱ https://cbn1218.tistory.com/68 초보자도 이해 가능한 WebRcbn1218.tistory.com (1)문제점테스트를 할때 각각 브라우져를 띄워 localhost로 클라이언트A와 B 로 접속할때는 문제가 없는데하나는 각각 다른 단말기로 접속시 ip를 쳐서 들어갈때 내영상이 안뜨고 Uncaught Typ..
-
초보자도 간단하게 만들어 보는 영상통화 기능(webRTC로 영상통화 만들기)Study/WebRTC 2025. 5. 20. 01:25
저번 시간에 이어 webRTC에 대해서 배웠다면 간단하게 영상통화 기능을 만들어 보는 방법을 공유할려함.혹시 webRTC를 모른다 하면 아래 링크 ㄱㄱ https://cbn1218.tistory.com/68 초보자도 이해 가능한 WebRTC 에 대해서 알아보자1. WebRTC 무엇인가?먼저 webRTC 의 진짜 본명은 WebRTC(Web Real-Time Communication) 이름에서 알수 있듯이 web기술의 하나로 웹 브라우저나 모바일 앱 간에 실시간 음성, 영상, 데이터 통신을 가능하게 해cbn1218.tistory.com 간단하게 구현 환경을 설명하자면 운영OS : 윈도우11백엔드 : node.js 프론트엔드 : html, css, javaScript node.js 다운로드 받아 깔고 필요..
-
시그날링 서버 (Signaling Server)란 무엇인가??Study/WebRTC 2025. 4. 13. 13:52
저번 webRTC 전체 흐름에 이어 오늘은 시그날링 서버(Signaling Server)에 대해서 간단히 설명하고자함. 시그날링서버가 뭘까?peer to peer가 연결되기전에 먼저 선행해야 되는게 시그날링 서버와의 연결이 선행되어야함.시그널링 서버는 피어 간 직접 연결이 설정되기 전에 필요한 정보를 중계하는 중간자 역할 을 함.예를들어, 설명을 하면 농산물을 직거래하기전 어떤 농수산물을 파는지, 신선한지, 가격이 얼마인지 등구매자와 농부가 서로 정보를 확인하는 과정에서 메신져 역할을 하는 것을 시그날링서버가 하는 역할임.그렇다면 webRTC에 연결전 시그날링 서버에서 어떤 흐름으로 메세지를 주고 받는지 아래 그림 참고. (1) 각각의 peer 가 시그널링 서버에 접속 함.(2) 각각..
-
초보자도 이해 가능한 WebRTC 에 대해서 알아보자Study/WebRTC 2025. 4. 12. 12:52
1. WebRTC 무엇인가?먼저 webRTC 의 진짜 본명은 WebRTC(Web Real-Time Communication) 이름에서 알수 있듯이 web기술의 하나로 웹 브라우저나 모바일 앱 간에 실시간 음성, 영상, 데이터 통신을 가능하게 해주는 오픈 소스 기술.즉, 별도의 프로그램 설치없이 P2P 연결을 통해 실시간 커뮤니케이션이 가능함. *여기서 P2P 연결 이란?P2P는 A와 B가 연결 할때 "중간에 서버 없이, 사용자끼리 직접 연결해서" 데이터를 주고받는 방식 임.예를들어 소비자가 농산물을 도소매를 거치지 않고 직거래로 사먹는것처럼 중간에 무언가를 거치지 않고 바로 연결되는걸 말함. 2. WebRTC 어떻게 연결이 되나 전체 연결 흐름은??(1)제일 먼저 선행 되어야할게 브라우저가 시그널..
-
초보자도 만들 수 있는 달력으로 일정 및 시간 예약 확정 알림 만들기Study/JavaScript 2025. 3. 26. 18:04
오늘은 초보자들이 많이 만드는 기능중에 하나인 예약기능에서 html에서 제공하는 달력 기능을 이용하여 날짜와 시간을 받아 알림창에 띄우는 기능을 만드는 방법에 대해서알려 드릴려고 함. 일단 무엇을 만들수 있는지 결과부터 알려드림. 1.결과 2.설명 이 요소들은 HTML5에 추가된 input 요소로, 사용자가 데이터 형식을 쉽게 입력할 수 있도록 도와주며, 브라우저에 따라 다른 모습의 UI를 제공함. 참고로 오늘 사용하고자 하는 브라우져는 크롬 임. 각각의 input의 차이점으로는 : 날짜만 입력받음.: 시간만 입력받음.: 날짜와 시간을 모두 입력받음. (1) html 날짜확정 시간확정 예약확정 html요소 중 제일 중요한 부분은 i..
-
초보자를 위한 웹 그림판 만들기(그리기,메모,블럭지정 또는 모양넣기)Study/JavaScript 2025. 3. 20. 18:13
오늘은 저번에 이어 웹그림판 만들기에서 좀더 빌드업된 버젼으로그리기 + 메모 +모양 넣기 또는 블럭을 지정하는 기능을 만듬 나는 그리기 와 메모만 필요하다는 분은 아래 링크 참고https://cbn1218.tistory.com/56 초보자도 만들 수 있는 자바스크립트로 그림판 만들기(텍스트 추가하기 기능)저번에 캔버스(canvas)를 이용하여 그림판과 같이 그림 그리기 기능을 만들었음. 혹시 궁금하시다면 아래 링크 참고하시길.... https://cbn1218.tistory.com/25 초보자를 위한 캔버스(Canvas)로 그림 그리기cbn1218.tistory.com 1.결과일단 무엇을 만들수 있는지가 제일 궁금하니 먼저 결과 화면 ㄱㄱ 그림판처럼 그리기, 메모, 모양넣기 또는 블럭지정이가능한 기능을..