tencent cloud

PrevNext

피드백

키워드를 검색하세요

Recent Pages

문서
Tencent Real-Time Communication
    문서

    Web

    마지막 업데이트 시간:2023-02-17 16:32:38

      TUICallKit 통합

      본문에서는 TUICallKit 컴포넌트를 빠르게 통합하여 미리 만들어진 UI로 영상 통화 애플리케이션을 구축하는 방법을 보여줍니다.
      컴포넌트를 사용해 보려면 TUICallKit 기본 demo를 참고하십시오.
      시작하기 전에 데스크톱 브라우저가 TRTC를 지원하는지 확인하십시오. 자세한 내용은 [환경 요구 사항](#3-환경 요구 사항)을 참고하십시오.

      콘텐츠

      1단계: TRTC 및 IM 활성화
      2단계: TUICallKit 통합
      3단계: TUICallKit 호출
      관련 문서
      FAQ
      1. UserSig는 어떻게 생성하나요?
      2. vite 가져오기
      3. 환경 요구 사항
      (1) 브라우저 버전-브라우저 버전)
      (2) 네트워크
      (3) 웹 사이트 도메인 프로토콜-웹 사이트 도메인 프로토콜)

      1단계: 서비스 활성화

      TUICallKit은 Tencent Cloud의 두 가지 유료 PaaS 제품인 Instant Messaging(IM) 및 Tencent Real-Time Communication(TRTC)을 기반으로 하는 오디오/비디오 통신 컴포넌트입니다. 아래 단계에 따라 관련 서비스를 활성화하고 7일 무료 베타 서비스를 체험할 수 있습니다.
      1. IM 콘솔에 로그인하고 애플리케이션 생성을 클릭합니다. 팝업 창에서 애플리케이션 이름을 입력하고 확인을 클릭합니다.
      
      
      2. 방금 생성한 애플리케이션을 클릭하여 기본 구성 페이지로 이동하고 페이지 오른쪽 하단에서 Tencent TRTC 서비스 활성화의 무료 체험을 클릭하여 TUICallKit의 7일 무료 베타 서비스를 활성화합니다.
      
      
      
      3. 같은 페이지에서 SDKAppID와 Key를 찾아 기록해둡니다. 나중에 사용하게 됩니다.
      
      
      
      SDKAppID: 비즈니스 격리에 사용되는 IM 애플리케이션 ID. 즉, SDKAppID 값이 다른 호출은 상호 연결할 수 없습니다.
      Secretkey: IM의 승인된 사용을 위한 인증 자격 증명 UserSig를 생성하기 위해 SDKAppID와 함께 사용해야 하는 IM 애플리케이션 키입니다. 5단계에서 사용됩니다.

      2단계: TUICallKit 컴포넌트 가져오기

      방법1: npm을 사용하여 통합

      npm을 사용하여 TUICallKit 컴포넌트를 다운로드합니다. 향후 비즈니스를 확장해야 하는 경우 TUICallKit을 프로젝트의 src/components/ 디렉터리에 복사하는 것이 좋습니다.
      # macOS
      yarn add @tencentcloud/call-uikit-vue  # yarn을 설치하지 않았다면 npm install -g yarn을 먼저 실행하십시오
      mkdir -p ./src/components/TUICallKit/Web && cp -r ./node_modules/@tencentcloud/call-uikit-vue/* ./src/components/TUICallKit/Web
      
      # windows
      yarn add @tencentcloud/call-uikit-vue  # yarn을 설치하지 않았다면 npm install -g yarn을 먼저 실행하십시오
      xcopy .\\node_modules\\@tencentcloud\\call-uikit-vue  .\\src\\components\\TUICallKit\\Web /i /e

      방법2: 소스 코드 통합

      1. GitHub에서 TUICallKit 소스 코드를 다운로드하고 TUICallKit/Web 폴더를 프로젝트의 src/components 폴더에 복사합니다.
      
      
      
      2. 폴더를 입력하고 필요한 종속성을 설치합니다.
      cd ./src/components/TUICallKit/Web 
      yarn         # yarn을 설치하지 않았다면 npm install -g yarn을 먼저 실행하십시오

      3단계: TUICallKit 호출

      원하는 페이지에서 TUICallKit 컴포넌트를 호출하여 호출 페이지를 표시할 수 있습니다.
      1. TUICallKit UI 가져오기
      <script lang="ts" setup>
      import { TUICallKit } from "./components/TUICallKit/Web";
      </script>
      
      <template>
        <TUICallKit />
      </template>
      2. 사용자 로그인 및 전화 걸기
      2.1 이미 TUIKit 컴포넌트를 사용하고 있다면 아래 코드를 추가하여 TUICallKit을 플러그인으로 선언합니다. 아직 TUIKit 컴포넌트를 사용하고 있지 않다면 건너뛰십시오.
      import { TUICallKit } from './components/TUICallKit/Web';
      TUIKit.use(TUICallKit);
      2.2 호출하기 전에 컴포넌트를 초기화합니다.
      import { TUICallKitServer } from './components/TUICallKit/Web';
      TUICallKitServer.init({ SDKAppID, userID, userSig });
      explain
      SDKAppID 및 SecretKey를 얻는 방법은 1단계를 참고하십시오. 임시 방법으로 GenerateTestUserSig.js에서 genTestUserSig(userID)를 사용하여 userSig를 생성할 수 있습니다.
      import * as GenerateTestUserSig from "./components/TUICallKit/Web/demos/basic/public/debug/GenerateTestUserSig.js";
      const { userSig } = GenerateTestUserSig.genTestUserSig(userID, SDKAppID, SecretKey);
      vite를 사용하여 프로젝트를 시작하는 경우 vite 가져오기도 수행해야 합니다.
      notice
      본문에서 UserSig를 얻는 방법은 프런트 엔드 코드에서 SECRETKEY를 구성하는 것입니다. 이 방법에서 SECRETKEY는 디컴파일 및 리버스 엔지니어링에 취약합니다. SECRETKEY가 공개되면 공격자가 Tencent Cloud 트래픽을 훔칠 수 있습니다. 따라서 이 방법은 로컬에서 프로젝트를 실행하고 디버깅하는 데에만 적합합니다. 올바른 UserSig 배포 방법은 UserSig의 계산 코드를 서버에 통합하고 App 지향 API를 제공하는 것입니다. UserSig가 필요할 때 App은 동적 UserSig에 대한 요청을 비즈니스 서버에 보낼 수 있습니다. 자세한 내용은 Calculating UserSig on the Server를 참고하십시오.
      2.3 호출을 구현해야 하는 경우 다음 코드를 실행합니다.
      import { TUICallKitServer } from './components/TUICallKit/Web';
      TUICallKitServer.call({ userID: "123", type: 2 }); // 일대일 통화
      TUICallKitServer.groupCall({ userIDList: ["xxx"], groupID: "xxx", type: 2 }); // 그룹 통화
      이제 첫 번째 전화를 걸 수 있습니다~API 매개변수에 대한 자세한 내용은 API 문서를 참고하십시오
      3. 고급 API
      이 컴포넌트는 현재 통화 상태를 알려주는 데 사용할 수 있는 beforeCalling 및 afterCalling 콜백을 제공합니다.
      beforeCalling : 통화 전에 반환
      afterCalling : 통화 후에 반환
      예를 들어, <TUICallKit /> 컴포넌트를 확장 및 축소하는 데 사용할 수 있습니다(demo에 표시됨).
      function beforeCalling() {
        console.log("이 함수는 통화 전에 실행됩니다");
      }
      function afterCalling() {
        console.log("이 함수는 통화 후에 실행됩니다");
      }
      <TUICallKit :beforeCalling="beforeCalling" :afterCalling="afterCalling"/>

      기타 문서

      TUICallKit API
      TUICallKit 기본 demo
      UI 사용자 정의(TUICallKit)
      TUICallKit (Web) FAQs

      FAQ

      1. UserSig는 어떻게 생성합니까?

      UserSig 배포 방식은 UserSig 계산 코드를 서버에 통합하고 프로젝트 지향 API를 제공하는 것입니다. UserSig가 필요한 경우, 프로젝트에서 동적 UserSig에 대한 요청을 비즈니스 서버에 보낼 수 있습니다. 자세한 내용은 Generating UserSig를 참고하십시오.

      2. vite에서 가져오기 문제

      vite에서 프로젝트를 생성하는 경우 vite는 다른 파일 패키징 방법을 사용하므로 lib-generate-test-usersig.min.js를 index.html로 가져와야 합니다.
      // index.html
      <script src="./src/components/TUICallKit/Web/demos/basic/public/debug/lib-generate-test-usersig.min.js"> </script>
      GenerateTestUserSig.js에서 import한 메소드를 주석 처리합니다
      // import * as LibGenerateTestUserSig from './lib-generate-test-usersig.min.js'

      3. 환경 요구 사항

      (1) 브라우저 버전 요구 사항

      최신 버전의 Chrome 브라우저를 사용하여 체험하시기 바랍니다. 이 문서에 연결된 컴포넌트의 주요 데스크톱 브라우저 지원 현황은 다음과 같습니다.
      OS
      브라우저
      최소 브라우저 버전 요구 사항
      Mac OS
      Safari 브라우저(데스크톱)
      11+
      Mac OS
      Chrome 브라우저(데스크톱)
      56+
      Mac OS
      Firefox 브라우저(데스크톱)
      56+
      Mac OS
      Edge 브라우저(데스크톱)
      80+
      Windows
      Chrome 브라우저(데스크톱)
      56+
      Windows
      QQ 브라우저(데스크톱, WebKit 코어)
      10.4+
      Windows
      Firefox 브라우저(데스크톱)
      56+
      Windows
      Edge 브라우저(데스크톱)
      80+
      
      explain
      브라우저 호환성에 대한 자세한 내용은 지원되는 브라우저를 참고하십시오. TRTC 호환성 확인 페이지를 사용하여 온라인 테스트를 실행할 수도 있습니다.

      (2) 네트워크 환경 요구사항

      TUICallKit 사용 시 방화벽 제한으로 인해 음성 및 영상 통화가 안될 수 있으니 방화벽 제한 처리를 참고하여 해당 포트 및 도메인 이름을 방화벽 얼로우리스트에 추가하시기 바랍니다.

      (3) 웹사이트 도메인 프로토콜의 요구 사항

      보안 및 개인 정보 보호를 위해 HTTPS URL만 본 문서에 연결된 컴포넌트의 모든 기능에 액세스할 수 있습니다. 따라서 프로덕션 환경에서 사용자가 제품 기능을 원활하게 체험할 수 있도록 https:// 프로토콜 도메인에 귀하의 웹사이트를 배치하십시오.
      시나리오
      프로토콜
      수신(재생)
      발송(게시)
      화면 공유
      비고
      프로덕션 환경
      HTTPS 프로토콜
      지원
      지원
      지원
      권장
      프로덕션 환경
      HTTP 프로토콜
      지원
      미지원
      미지원
      -
      로컬 개발 환경
      http://localhost
      지원
      지원
      지원
      권장
      로컬 개발 환경
      http://127.0.0.1
      지원
      지원
      지원
      -
      로컬 개발 환경
      http://[로컬IP]
      지원
      미지원
      미지원
      -
      로컬 개발 환경
      file:///
      지원
      지원
      지원
      -
      
      문의하기

      고객의 업무에 전용 서비스를 제공해드립니다.

      문의하기
      기술 지원

      더 많은 도움이 필요하시면, 티켓을 통해 연락 바랍니다. 티켓 서비스는 연중무휴 24시간 제공됩니다.

      티켓 제출
      연중무휴 24시간 전화 지원
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      개인정보 처리방침서비스 약관쿠키 정책