91 lines
4.6 KiB
Markdown
91 lines
4.6 KiB
Markdown
|
<p align="center">
|
|||
|
|
<a href="https://trtc.io/">
|
|||
|
|
<img width="200" src="https://web.sdk.qcloud.com/trtc/webrtc/assets/trtc.io-logo.png">
|
|||
|
|
</a>
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<h1 align="center" style="margin-top: -40px">TUICallKit</h1>
|
|||
|
|
|
|||
|
|
<div align="center">
|
|||
|
|
|
|||
|
|
TUICallKit is a UIKit component for audio and video calls.
|
|||
|
|
|
|||
|
|
 [](https://www.npmjs.com/package/@tencentcloud/call-uikit-vue) [](https://trtc.io/document/51015) [](https://github.com/tencentyun/TUICallKit)
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<p align="center">
|
|||
|
|
<b> English </b> | <a href="https://github.com/tencentyun/TUICallKit/blob/main/Web/README.zh-CN.md"> 简体中文 </a>
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## Introduction
|
|||
|
|
TUICallKit is a UIKit component for audio and video calls developed by Tencent Cloud. By integrating this component, you can easily add video calling functionality to your app with just a few lines of code.
|
|||
|
|
|
|||
|
|
- [Online Demo](https://trtc.io/demo/homepage/#/detail?scene=callkit)
|
|||
|
|
- [Changelog](https://trtc.io/document/51019)
|
|||
|
|
- [API Documents](https://trtc.io/document/51015)
|
|||
|
|
- We offer TUICallKit for Web, Android, iOS, MiniProgram, Flutter, explore more in [trtc.io](https://trtc.io/products/call).
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## Environment Supports
|
|||
|
|
TUICallKit supports major modern browsers. For details, please refer to [Browsers Supported](https://web.sdk.qcloud.com/trtc/webrtc/v5/doc/en/tutorial-05-info-browser.html).
|
|||
|
|
|
|||
|
|
```text
|
|||
|
|
Please be sure to use HTTPS protocol or localhost to deploy your Web App, otherwise a navigator.mediaDevices not found error will occur!
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
| [<img src="https://web.sdk.qcloud.com/trtc/webrtc/assets/logo/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://web.sdk.qcloud.com/trtc/webrtc/assets/logo/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/> Edge | [<img src="https://web.sdk.qcloud.com/trtc/webrtc/assets/logo/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://web.sdk.qcloud.com/trtc/webrtc/assets/logo/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari | [<img src="https://web.sdk.qcloud.com/trtc/webrtc/assets/logo/safari-ios_48x48.png" alt="iOS Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>iOS Safari | [<img src="https://web.sdk.qcloud.com/trtc/webrtc/assets/logo/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Opera |
|
|||
|
|
| --------- | --------- | --------- | --------- | --------- | --------- |
|
|||
|
|
| 56+ | 80+ | 56+ | 11+ | 11+ | 46+ |
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## Install
|
|||
|
|
npm:
|
|||
|
|
```
|
|||
|
|
npm install @tencentcloud/call-uikit-vue --save
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
yarn:
|
|||
|
|
```
|
|||
|
|
yarn add @tencentcloud/call-uikit-vue
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
## Usage
|
|||
|
|
Refer to the following two tutorials for a quick run-through of the demo and how to use the TUICallKit to implement basic audio and video calling functionality.
|
|||
|
|
|
|||
|
|
- [Demo Quick Run](https://trtc.io/document/50993)
|
|||
|
|
- [TUICallKit Github Demo](https://github.com/tencentyun/TUICallKit/tree/main/Web/basic-vue3)
|
|||
|
|
|
|||
|
|
Explore TUICallKit API documents：[TUICallKit API](https://trtc.io/document/51015)
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## API Overview
|
|||
|
|
- Initialize TUICallKit [init](https://trtc.io/document/51015#init)
|
|||
|
|
- Start one-to-one call [call](https://trtc.io/document/51015#call)
|
|||
|
|
- Start group call [groupCall](https://trtc.io/document/51015#groupCall)
|
|||
|
|
- Set language [setLanguage](https://trtc.io/document/51015#setLanguage)
|
|||
|
|
- Set user nickname and avatar [setSelfInfo](https://trtc.io/document/51015#setSelfInfo)
|
|||
|
|
- Customize the user's incoming call ringtone [setCallingBell](https://trtc.io/document/51015#setCallingBell)
|
|||
|
|
- Enable/Disable floating window [enableFloatWindow](https://trtc.io/document/51015#enableFloatWindow)
|
|||
|
|
- Enable/Disable incoming call ringtone [enableMuteMode](https://trtc.io/document/51015#enableMuteMode)
|
|||
|
|
- Destroyed the TUICallKit instance [destroyed](https://trtc.io/document/51015#destroyed)
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## Directory
|
|||
|
|
```text
|
|||
|
|
├── debug
|
|||
|
|
├── src // component source file
|
|||
|
|
├── types // ts declaration file
|
|||
|
|
├── README-zh_CN.md
|
|||
|
|
├── README.md
|
|||
|
|
├── package.json
|
|||
|
|
├── tuicall-uikit-vue.es.js // sdk file base on ES modules
|
|||
|
|
└── tuicall-uikit-vue.umd.js // sdk file base on umd modules
|
|||
|
|
```
|