# openvidu

22개의 포스트
post-thumbnail

OpenVidu React ERR_OSSL_EVP_UNSUPPORTED

ERR : code: 'ERROSSLEVP_UNSUPPORTED’ 해결 에러를 해결하려면 Node.js의 버전을 16 이하로 낮추거나, OpenSSL 1.1.1을 사용하도록 설정해야 합니다. 약 OpenSSL 1.1.1을 사용하도록 설정하려면 환경 변수 NODEOPENSSLLEGACY_PROVIDER를 설정해야 합니다. 이 환경 변수는 Node.js가 OpenSSL 1.1.1 호환 모드로 동작하도록 합니다. 다음과 같이 설정할 수 있습니다: 위 명령어를 실행한 후 프로젝트를 다시 시작해보세요. 여기서 주의할 점은, Node.js의 버전을 낮추는 방법은 임시적인 해결책일 뿐, 결국에는 OpenSSL 3.0과 호환되는 방식으로 코드를 업데이트해야 한다는 것입니다.

2023년 8월 23일
·
0개의 댓글
·
post-thumbnail

OpenVidu 1:1 세션 들어온 순서 판단

정렬된 커넥션의 0 중 상대 정보와 일치하지 않는 connectionId ⇒ 자신 상대 정보와 일치하는 connectionId ⇒ 상대 $\large\color{green}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━$ 더 밑부분에 보면 streamId도 커넥션 아이디를 가지고 있다. 위 코드를 통해 뒤에서 부터 14글자만 슬라이스해서 상대 커넥션 아이디를 빼올 수 있다. 그리고 위에서 정렬한 커넥션ID와 비교하여 내가 먼저 온 유저인지 나중에 온 유저인지 알 수 있다. -

2023년 8월 22일
·
2개의 댓글
·
post-thumbnail

OpenVidu 로그 제거

2023년 8월 22일
·
0개의 댓글
·
post-thumbnail

OpenVidu Browser Signal

SignalEvent | OpenVidu Browser - v2.28.0 상호 간의 시그널 교환 시 자신이 보낸 시그널을 자신이 받는 경우가 생기므로 두 유저의 정보를 같이 넘김 useEffect를 사용하여 비동기적으로 처리

2023년 8월 22일
·
0개의 댓글
·
post-thumbnail

OpenVidu Tutorial React 코드 분석

입장 버튼을 누르면 joinSession 실행 OpenVidu 클라이언트 라이브러리에서 만들어진 세션은 streamCreated, streamDestroyed, exception 등 이벤트를 제공한다. 더 많은 이벤트는 아래 사이트 ‘Classes’에서 ‘~Event’ 참고https://docs.openvidu.io/en/stable/api/openvidu-browser/index.html setSession으로 세션 설정 $\large\color{black}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━$ ![](https://velo

2023년 8월 22일
·
0개의 댓글
·
post-thumbnail

OpenVidu Tutorial 기본 제공 서버 Connection 상태

OpenVidu Tutorial 기본 제공 서버 Connection 상태 입장했을 때 세션 객체 만들었습니다. mySessionID를 보냈습니다. 그리고 sessionId를 받습니다. $\large\color{black}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━$ 서버에 OPTIONS 요청 서버

2023년 8월 22일
·
0개의 댓글
·
post-thumbnail

OpenVidu React 함수형 컴포넌트

OpenVidu-React-functional

2023년 8월 22일
·
0개의 댓글
·
post-thumbnail

WebRTC

Openvidu API [세션을 생성하고 연결하는 과정] 1. 세션을 생성할 때 사용하는 클래스 1-1) SessionProperties 클래스 : OpenVidu Java Client 라이브러리에서 사용되는 클래스로서, 세션 생성 시에 세션의 속성을 설정하기 위해 사용한다. 다양한 설정을 지정할 수 있다. Ex) 세션 이름, 세션의 녹화 여부, 세션의 브로드캐스트 여부 Code SessionProperties.Builder()를 사용하여 SessionProperties 객체를 만들고, 각각의 속성을 설정한 후 build() 메서드를 호출하여 최종 SessionProperties 객체를 생성한다. 이렇게 생성된 SessionProperties 객체는 openVidu.createSession() 메서드에 전달하여 세션을 생성할 때 사용한다. createSession(properties) 메소드

2023년 8월 5일
·
1개의 댓글
·

[Spring] OpenVidu 미디어 서버 세션 유지하기

OpenVidu 플랫폼을 이용해서 미디어 서버를 구축하고 N:N 화상 스터디를 구현하는 과정에서 문제가 발생하였다. 문제는 스터디룸의 역할을 하는 OpenVidu 서버 내에 생성된 세션이 주기적으로 삭제가 되는 것이였는데, 찾아보니 비활성화 된 세션을 주기적으로 모니터링하며 삭제하는 Garbage Collector가 존재하였다. 결국 Garbage Collector 제어가 필요했는데 .env 파일을 수정해서 제어하는 방법이 존재하였다. OPENVIDUSESSIONSGARBAGEINTERVAL 값을 0으로 수정하면 Garbage Collector가 비활성화됨과 동시에 OPENVIDUSESSIONSGARBAGETHRESHOLD 속성 또한 무효화가 되기 때문에 Interval 값을

2023년 6월 15일
·
0개의 댓글
·
post-thumbnail

트러블슈팅(openvidu)

openvidu 서버 start시 생기는 에러 문제상황1. opt/openvidu/ 경로에 .env 파일을 찾을 수 없다는 에러가 발생 하지만 경로에는 .env 파일이 분명 존재하는데 읽어 올 수 없다고 함. sudo chmod +r /opt/openvidu/.env 명령어를 통해 파일 읽기 권한을 추가해주었는데도 해결이 되지 않음. 해결방법 방법1: docker-compose.yml 파일에서 .env 파일의 위치를 지정하는 부분을 절대경로를 사용하여 바꿔주었다.명령어

2023년 6월 5일
·
0개의 댓글
·
post-thumbnail

openvidu 리액트 함수형 컴포넌트

Openvidu 라이브러리를 사용하는 과정에서 기본 제공 코드가 클래스형 컴포넌트였습니다. 클래스형 컴포넌트는 함수형 컴포넌트와 hook을 사용하는 제 프로젝트와 같이 사용하기엔 불편함이 있어서 함수형 컴포넌트로 리팩토링을 진행했습니다. 코드는 아래 링크에서 확인할 수 있습니다. https://github.com/moonthree/openvidu-tutorials openvidu-react-fuctional 폴더를 사용하면 됩니다. openvidu에서 제공하는 아래 링크의 openvidu-react 코드의 기능을 그대로 유지한 채 함수형 컴포넌트로 리팩토링 했습니다. https://github.com/OpenVidu/openvidu-tutorials

2023년 5월 24일
·
0개의 댓글
·
post-thumbnail

[카카오 프로젝트] 오픈비두 설정

1) 오픈비두 사용 2) 프로젝트 환경은 EC2 인스턴스 위에 WebRTC 어플리케이션 배포 배포 가능한 방법은 2가지 (이해가 정확하지 않을 수 이씀...) 1. 공식 문서에 따라 AWS Cloudformation 을 활용해서 등록 이 부분에서의 문제는 사용자가 적용할 어플리케이션 파일을 어떻게 탑재시킬 것인가 공식 유트브 에 따르면 aws 자체적으로 배포한 서비스의 주소를 스택에 연결 2. 공식 문서 에 따라 인스턴스 안에 openvidu 기반 앱을 만들고 도커 이미지를 활용해

2023년 3월 18일
·
0개의 댓글
·
post-thumbnail

SSAFY PJT - 시작

2학기 시작 = 2023년 첫 프로젝트에 대해 회고를 뒤늦게 올려본다. 그동안 프로젝트를 진행하느라 바빠서 못 올렸는데, 프젝이 끝난 지금은 어느 정도 여유가 생겼다. 우리 조의 주제는 웹기술. WEB RTC를 이용한 화상회의 서비스를 만드는 것이 목표 > Web RTC? 우리 조는 나를 포함 프론트엔드 3명, 그리고 백엔드 3명으로 구성되었다. 프젝이 끝나고서 보니 아주 적절한 구성과 최적의 조합이었다. 호흡도 너무 잘 맞았고, 여러모로 재미있게 진행되었다. 먼저 우리 팀은 주제에 대한 브레인스토밍을 진행했다. 회의는 노션으로 진행하였다. 각자 눈치 보지 않고 실시간으로 의견을 주고받을 수 있을거라 판단했기 때문. 그리고 이는 매우 효과적이었다. 각자 아이디어가 샘솟았고, 많은 아이디어를 생각해낼 수 있었다. 약 10여일간은 아이디어를 선정하고 구체화하는데 힘을 쏟은 것 같다. 그렇게 선정한 최종 5개의 아이디어 ![](https://velog.ve

2023년 2월 19일
·
0개의 댓글
·
post-thumbnail

[React] Openvidu Tutorial 따라하기

목적: Openvidu를 이용한 WebRTC 비디오 공유 연습 기술스택 : Python, React, Docker Docker 컨테이너로 Openvidu 환경 세팅 Docker 잘 돌아간다. Python Server 실행 Openvidu가 제공하는 Tutorial repo를 clone한다. 연습을 위해 익숙한 언어로 서버환경을 셋팅하기 위해 파이썬 선택했다. 가상환경 설정 및 활성화 Requirements 설치 서버 실행 로컬 서버도 잘 실행된다. > ** Mac에서 `Add

2023년 1월 19일
·
0개의 댓글
·
post-thumbnail

[WebRTC] ReactJS + EC2 + OpenVidu 환경에서 화상회의 구현

WebRTC? WebRTC (Web Real-Time Communication)란 별도의 플러그인이나 소프트웨어 없이 실시간으로 데이터(음성, 영상, 텍스트, 파일)를 서버(중계자) 없이 브라우저 간에 교환할 수 있도록 하는 기술이다. WebRTC 기술은 다양한 용도로 사용되는데, 주로 음성 채팅, 화상 채팅, 데이터 공유 등을 수행할 수 있다. WebRTC 동작 흐름 WebRTC 기술을 사용하면 브라우저끼리 p2p 통신을 사용하여 별도의 서버가 필요 없어 보이지만, 사실 다음과 같은 서버들을 필요로 한다. > 1) 시그널링(Signaling)이라 불리는, 클라이언트들의 통신을 조정하기 위한 메타데이터의 교환 서버 (Signaling Server) 2) NAT 환경 및 방화벽 대응을 위한 서버 (STUN / TURN Server) 이해를 돕기위해 WebRTC 전체 아키텍처를 나타내보았다. ![](https://velog.velcdn

2022년 9월 18일
·
2개의 댓글
·
post-thumbnail

[Ubuntu] OpenVidu 서버 배포(Docker)

OpenVidu 설치 후 환경 세팅 1. OpenVidu 설치 2. 설정 파일 수정(.env) openvidu 경로로 이동 3. OpenVidu 서버 실행 docker container 확인

2022년 8월 30일
·
0개의 댓글
·
post-thumbnail

220802 공통 프로젝트 개발일지

openvidu 연결 kurento 작업에서 한 번 큰 패배를 맛보고, 결국 openvidu로 연결하는 작업으로 변경하기로 했다. 부랴부랴 tutorial을 보면서, 예제코드를 하나하나 우리의 리액트에 반영하기 시작했다. 몇번의 코드를 지우고 다시쓰고를 반복하면서 느낀건, 처음 도전하는 과제일수록 크게 욕심내지 말고, 조금씩 조금씩 과정을 나눠서 처리를 하는게 좋다는 것이다. 방을 생성하고, publisher와 subscriber를 정해주고, 응답을 console.log로 찍어가면서 해보니까 어떻게 어떻게 되긴 되더라. 이전 작업들이 원할하게 잘되면서, 기고만장해 있지 않았나 싶다. 자중하면서, 현재 반영한 openvidu 코드를 우리 프로젝트 형식에 맞게 프로세스를 구축해봐야겠다.

2022년 8월 3일
·
0개의 댓글
·
post-thumbnail

[webRTC] openVidu 시작하기

webRTC란? webRTC(Web Real-Time Communication) 웹 브라우저가 서로 통신할 수 있도록 설계된 API 웹 브라우저 상에서는 어떠한 플러그인도 필요 없이 음성 채팅과 화상채팅, 데이터 교환까지도 가능하게 하는 기술 WebRTC 기술은 P2P(Peer-to-Peer) 통신에 최적화 시그널링(Signaling) RTCPeerConnection들이 적절하게 데이터를 교환할 수 있게 처리해 주는 과정 이를 수행하는 서버 = 시그널 서버 전이중 통신을 지원하는 websocket 으로 이를 구현하는 것이 가장 적합 세션제어메세지, 네트워크 구성, 미디어 기능 정보 교환 시그널링은 P2P 스트리밍 시작 전에 성공적으로 완

2022년 4월 20일
·
0개의 댓글
·
post-thumbnail

React로 OpenVidu 커스텀해보기

화상채팅 라이브러리 컨트롤 (openVidu) 기본 6인이상 캠화면을 띄워야 하기에 peer to peer 방식은 렉이 많아 화상캠 라이브러리 중 openVidu 선택 ( 동작원리는 openvidu 사용후기 글에서 설명해보려고 한다 ) 화상채팅 기반 게임이기 때문에 , 사용자의 생존여부에 따라 마이크와 비디오 on/off 기능 필요 현재 스택에 가장 알맞은 React ↔ openVidu 를 선택 CSS 요소가 node_modules에 있어서 patch-package 툴로 로 수정 시도해보았으나, 적용이 안되는 상황 React ↔ openVidu 라이브러리는 docker로 배포를 하여 이미지화 된 셋팅이 있기때문에 patch-package가 적용되지 않는다고 추측 후 드랍. 구글링 후 CSS를 컨트롤 하려면 FE ↔ BE ↔ openVidu 가 가장 적합하다고 판단하여 변경 트러블 ( 구현 기능 : 말하는사람에게 테두리 표시 & 죽은 사람의 비디오 마이

2022년 4월 5일
·
0개의 댓글
·