SimpleWebrtc와 함께 WEBRTC 비디오 채팅 애플리케이션 구축

단순한 WebRtc

를 기반으로 라이브 화상 채팅 응용 프로그램을 구축하십시오 이 책 "6 JavaScript Projects"에는이 기사가 포함되어 있으며, 현대의 JavaScript 개발에 대한 통찰력을 얻는 데 도움이됩니다. WEBRTC의 증가와 실시간 지점 간 통신을 처리 할 수있는 브라우저의 기능이 향상됨에 따라 실시간 응용 프로그램을 구축하는 것이 그 어느 때보 다 쉬워집니다. 이 튜토리얼은 SimpleWebrtc와 WebRTC를 구현할 때 우리의 작업을 단순화 할 수있는 방법을 살펴 봅니다. 프로세스 전체에서 우리는 메시징 기능을 갖춘 WebRTC 비디오 채팅 애플리케이션을 구축 할 것입니다. WebRTC 및 P2P 커뮤니케이션에 대한 배경 지식이 필요한 경우 "Webrtc의 Dawn"및 "GetUsermedia API의 초보자"를 읽는 것이 좋습니다.

코어 포인트

SimpleWebrtc는 WebRTC의 구현을 단순화하고 브라우저 특정 코드를 작성하지 않고 다른 브라우저에서 실행할 수있는 실시간 비디오 및 오디오 애플리케이션을보다 쉽게 ​​만들 수있는 JavaScript 라이브러리입니다.

이 튜토리얼은 Express Server에서 단일 페이지 응용 프로그램을 설정하는 것이 포함되며 종속성 관리를 위해 Node.js 및 NPM이 필요합니다.

주요 종속성에는 SimpleWebrtc, 스타일 설정을위한 시맨틱 UI CSS, DOM 작업 용 jQuery, 템플릿 핸들 바 및 웹 서버로 표현됩니다. 응용 프로그램은 채팅방 생성 및 가입, 메시지 보내기 및 여러 비디오 스트림 처리를 지원하여 SimpleWebrtc의 복잡한 지점 간 통신 시나리오를 관리 할 수있는 능력을 보여줍니다. 응용 프로그램을 Zeit의 CLI 도구를 사용하여 쉽게 배포 할 수있어 응용 프로그램의 빠른 설정 및 공개 공유가 가능합니다.

이 튜토리얼은 SimpleWebRTC를 사용하여 기능이 풍부한 실시간 통신 애플리케이션을 구축하는 방법에 대한 포괄적 인 안내서를 제공하여 라이브러리의 사용 편의성 및 크로스 브라우저 호환성을 강조합니다.

• 단순한 webrtc는 무엇입니까?
계속하기 전에 사용할 주요 도구를 이해하는 것이 중요합니다. SimpleWebrtc는 WEBRTC 지점 간 데이터, 비디오 및 오디오 통화를 단순화하는 JavaScript 라이브러리입니다.
• SimpleWebrtc는 브라우저 WEBRTC 구현의 래퍼 역할을합니다. 이미 알고 있듯이 브라우저 공급 업체는 다른 기능 구현에 대한 단일 접근 방식에 전적으로 동의하지 않으므로 각 브라우저마다 다른 WEBRTC 구현이 있습니다. 개발자는 지원하려는 각 브라우저마다 다른 코드를 작성해야합니다. Simplewebrt는이 코드의 래퍼 역할을합니다. 노출 된 API는 사용하기 쉽고 이해하기 쉽기 때문에 브라우저 크로스 브라우저 WEBRTC를 구현하기위한 훌륭한 선택입니다.
빌드 webrtc 비디오 채팅 응용 프로그램
• 이제 앱을 직접 구축 할 시간입니다. Express 서버에서 실행되는 단일 페이지 응용 프로그램을 작성합니다.
GitHub 저장소 에서이 자습서의 코드를 다운로드 할 수 있습니다. 그것을 실행하거나 집에서 따르려면 노드와 NPM을 설치해야합니다. 이들에 익숙하지 않거나 설치 도움말이 필요한 경우 이전 자습서를 확인하십시오 :
• .
  nvm 를 사용하여 여러 버전의 node.js를 설치하십시오 npm 시작 가이드 —Node 패키지 관리자
  • 웹캠이있는 컴퓨터 나 노트북도 필요합니다. 그렇지 않은 경우 모니터 상단에 연결할 수있는 USB 웹캠이 필요합니다. 원격 연결을 테스트하려면 친구 나 두 번째 장치가 필요할 수 있습니다.
  종속성

  우리는 다음의 종속성을 사용하여 프로젝트를 구축 할 것입니다 :

  .

  단순한 webrtc - webrtc 라이브러리 Semantic UI CSS - 우아한 CSS 프레임 워크 jQuery - 페이지에서 요소 및 이벤트 처리에 사용됩니다. 핸들 바 - 메시지에 대한 HTML을 생성하는 데 사용할 JavaScript 템플릿 라이브러리 Express - Nodejs Server.

  프로젝트 설정

  작업 공간으로 이동하여 라는 폴더를 만듭니다. vscode 또는 좋아하는 편집기에서 폴더를 열고 다음 파일 및 폴더 구조를 만듭니다.
  또는 원하는 경우 명령 줄을 통해 동일한 작업을 수행 할 수 있습니다.
  를 열고 다음을 복사하십시오
  • git 리포지토리를 사용하려는 경우 파일에 추가하십시오. 다음 명령을 사용하여
  파일을 생성하십시오.
  • 당신은 다음과 같은 출력을 받아야합니다 :
  지금 우리의 종속성을 설치하자 :
  • 설치 중에이 코드를
  : 로 복사하십시오
  • 서버 코드는 매우 표준입니다. 무슨 일이 일어나고 있는지 댓글을 읽으십시오.
  다음 다음,
  파일을 설정하겠습니다 :

  (index.html 코드는 여기에 삽입해야하며 공간 제한으로 인해 여기에서 생략됩니다. 전체 코드를 얻으려면 원본 텍스트를 참조하십시오) 다음으로, 기본 클라이언트 JavaScript 코드를 설정합시다. 이 코드를 : 로 복사하십시오 마지막으로 GitHub 저장소 에서이 이미지를 다운로드하여 폴더에 저장하십시오.

  이제 우리는 응용 프로그램을 실행할 수 있습니다 :

  브라우저에서 URL을 열면 다음이 표시됩니다. simplewebrtc-messenger (여기서는 공간 제한으로 인해 이미지를 여기에 삽입해야합니다.

  (다음 컨텐츠는 원래 텍스트 구조에 따라 코드 세그먼트를 계속 처리합니다. 공간 제한으로 인해 모든 후속 코드 세그먼트와 그림이 여기에서 생략됩니다. 전체 코드는 원본 텍스트를 참조하십시오. 그림.)

  <code>simplewebrtc-messenger
  ├── public
  │   ├── images
  │   │   └── image.png
  │   ├── index.html
  │   └── js
  │       └── app.js
  ├── README.md
  └── server.js</code>

  결론

  <code>mkdir -p simplewebrtc-messenger/public/{images,js}
  cd simplewebrtc-messenger
  touch public/js/app.js public/index.html .gitignore README.md server.js</code>

  이 튜토리얼에서는 SimpleweBRTC와 라이브 응용 프로그램을 만드는 방법을 배웠습니다. 특히, 우리는 사용자가 텍스트를 보내고 원격 동료에게 화상 통화를 할 수있는 메시징 응용 프로그램을 만들었습니다. SimpleweBRTC는 웹 응용 프로그램에서 WEBRTC를 쉽게 구현할 수있는 훌륭한 크로스 브라우저 라이브러리입니다.

  이 튜토리얼에 사용 된 코드는 GitHub에서 사용할 수 있다는 것을 잊지 마십시오. 그것을 복제하고, 멋진 것을 만들고 재미있게 보내십시오!

  (FAQ 부품은 여기서 공간 제한으로 인해 생략되어 여기에서 생략됩니다. 전체 FAQ 컨텐츠는 원본 텍스트를 참조하십시오.)

위 내용은 SimpleWebrtc와 함께 WEBRTC 비디오 채팅 애플리케이션 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!