[폭발속도!]5분 화상 채팅 구축

4567 단어 JavaScriptSkyWay
이 글은 SkyWay Advent Calendar 2018 8일째 되는 글이다.

개시하다


오래전부터 동영상 채팅의 구축은 엄청난 비용을 들였지만 지금은 편리한 SDK와 API가 많다.
이번에는 스카이웨이의 API를 활용해 폭발적인 속도로 화상 채팅을 구축하려 한다.

화상 채팅 구축


먼저 SkyWay를 방문하십시오.
신규 등록부터 시작하여 새로 등록된 Community Edition을 선택합니다.

Community Edition은 무료로 사용할 수 있습니다.(2018/12/8시)

이름, 메일 주소, 비밀번호를 입력하여 등록하세요.

입력한 메일 주소는 인증 메일을 받을 수 있으므로 거기를 클릭하여 인증을 진행합니다.
메일 인증 후 개발자용 대시보드에 로그인합니다.
새 프로그램 추가를 선택하십시오.

프로그램 설명문에 비디오 채트를 입력하고, 사용 가능한 도메인 이름에localhost를 입력하십시오.

응용 프로그램을 만든 후 API 키를 사용할 수 있습니다.

이어 SkyWay 공식 GiitHub에서 샘플 코드를 받았다.
각각 파일을 엽니다, index.html、script.js、style.css 복사.

git를 사용할 수 있는 사람여기.은 example/fullmesh-videochat을 복제할 수 있습니다.
script.js의 다섯 번째 줄의 키를 이전에 가져온 API 키로 바꿉니다.
주의
개발 시 API 키를 직접 입력했지만, 공개 시 적절한 곳에 입력하고 보호해야 하기 때문이다.
script.js
/* eslint-disable require-jsdoc */
$(function() {
  // Peer object
  const peer = new Peer({
    key:   "Your API Key",
    debug: 3,
  });

동작 확인


샘플 코드를 저장한 디렉터리에서 로컬 서버를 시작합니다.
$ ruby -run -e httpd . -p 8080
브라우저에서 localhost:8080에 액세스합니다.
'마이크'와'카메라'의 사용 허가를 요구하는 팝업이 뜨기 때문에'허가'버튼을 눌러라.
방 이름을 입력하고 Join 버튼을 눌러 주세요.
주의
같은 방 이름을 쓰면 낯선 사람과 연결될 수 있다.

다른 브라우저를 시작하고 아까와 같은 방 이름을 입력한 다음 Join을 진행합니다.
이렇게 두 화면이 되면 성공이야.
만약 진행이 순조롭지 않다면 로컬 서버가 일어났는지, 경보가 경고되었는지, Constore가 출력에 오류가 있는지 확인하십시오.

이렇게 하면 영상통화를 사용할 수 있다.
코드에 대해 자세히 알고 싶으신 분들은 공식 문서 참고하세요.
나중에 서버를 디버깅하면 사용할 수 있습니다!

끝맺다


간단하게 화상 채팅을 구축할 수 있다.
API와 프로그램 라이브러리를 사용하면 다양한 것을 간단하게 실현할 수 있다.
또한Firebase의 depro 방법은Firebase의 채팅 기능을 사용해도 간단하게 실현할 수 있다.
이번 보도는 이쪽 노트의 일부분 발췌문이다.
WebAPI 응용 프로그램'초'기반 Firebase 및 API 웹 회의 시스템 제작

HTML, CSS, 자바스크립트만 초프로그래머도 쉽게 만들 수 있는 콘텐츠다.
관심 있으시면 구독할 수 있습니다.
끝까지 읽어주셔서 감사합니다.

좋은 웹페이지 즐겨찾기