프로젝트/WebRTC써보기
(5)
-
프로젝트/WebRTC써보기2023.01.16
Spring Boot, Vanilla JS, WebRTC를 활용한 실시간 영상공유 (배포)
(목차) https://okane-on-cliff.tistory.com/257 1. openssl이란 프로젝트에 인증서를 만들수 있게 해주는 툴인거 같다. 이걸로 인증서 만들면 https통신을 할 수 있다. http로는 통신할 수 없게 된다. 2. openssl 왜 써야됨? https 통신안하면 소켓통신이 안된다. webrtc도 안된다. https통신하려면 원래 돈드는데 openssl은 돈안든다. 근데 내가 임의로 만드는 거라서 브라우저가 아는 인증서가 아니다. 그래서 경고 준다 이 인증서 첨보는데 진짜 들어갈래하고. 이걸 브라우저에 등록시켜주면 이제 이용이 가능해진다. 3. openssl을 통해 인증서를 springboot 프로젝트에 등록시켜 보자 일단 openssl을 설치한다. 그리고 환경변수 설정도..0 -
프로젝트/WebRTC써보기2023.01.16
Spring Boot, Vanilla JS, WebRTC를 활용한 실시간 영상공유 (프론트 코드)
(목차) https://okane-on-cliff.tistory.com/257 1. 전체 코드 오퍼를 생성해요 내 영상이에요 피어의 영상이에요 2. 하나하나 뜯어 보자 var conn = new WebSocket('wss://서버아이피주소:포트/웹소켓컨피겨러에적은거(socket)'); wss로 되어있는건 ws로는 통신을 하지 못하기 때문이다. 배포에서 살펴볼 생각이다. var configuration = { "iceServers" : [{ "url" : "stun:stun.l.google.com:19302" }] } var myPeerConnection = new RTCPeerConnection(configuration); RTC객체를 만든다 스턴서버도 들러서 자신이 누군지 알 수 있게 됐다0 -
프로젝트/WebRTC써보기2023.01.16
Spring Boot, Vanilla JS, WebRTC를 활용한 실시간 영상공유 (백코드)
(목차) https://okane-on-cliff.tistory.com/257 1. 디렉터리 구조 눈 여겨 볼것은 1. SocketHandler 2. SocketConfigurer 3. ssafykey.p12, application.properties 4. pom.xml 이다. 2. pom.xml 그냥 의존성으로 (1) 스프링 웹, (2) 데브 툴, (3) 웹소켓 추가하면 된다. 3. ssafykey.p12, application.properties 이건 배포때 설명할 예정 4. SocketConfigurer package rtc; import org.springframework.context.annotation.Configuration; import org.springframework.web.socke..0 -
프로젝트/WebRTC써보기2023.01.16
Spring Boot, Vanilla JS, WebRTC를 활용한 실시간 영상공유 (WebRTC의 작동 원리)
(목차) https://okane-on-cliff.tistory.com/257 1. 개관 이 프로젝트에 사용된 개념은 다음과 같다. 핵심만 따지자면 시그널링 서버, 클라이언트 1, 클라이언트 2 만 있으면 된다 (1) 먼저 1이 서버에게 2에게 자신을 소개시켜 달라고 한다(offer) (2) 그리고 1은 이에 그치지 않고 자신과 연락하는 방법도 좀 전해달라고 한다.(setLocalDescription()으로 인해 트리거 되는 onicecandidate에서 server로 자신과의 연락방법을 2에게 전송) (3) 이런 연락을 받은 2는 대답을 보냄(answer) (4) 이 과정이 지나면 1과 2는 서로 자신이 누구고 상대가 누군지 또한 서로에 대한 연락방법 모두 알게 된다. 이제 각자 상대방이 주는 스트림을..0
'프로젝트/WebRTC써보기' 카테고리의 글 목록
'프로젝트/WebRTC써보기' 카테고리의 글 목록