This document describes how to run the TRTC web quick demo (Vue.js 2.0). English | [简体中文](./README-zh_CN.md) ## Tryout We offer an [online web demo (Vue.js 2.0)](https://web.sdk.qcloud.com/trtc/webrtc/demo/quick-demo-vue2-js/index.html) for you to try out TRTC features. Enter your application’s `SDKAppID` and secret key on the webpage to enter a room. For how to get the `SDKAppID` and secret key, see [Getting Application Information]. After joining a room, you can use a share link to invite others to try the audio/video call feature with you. ## Local Run #### Download the demo source code Download the source code of the TRTC web quick demo (Vue.js 2.0) at [GitHub](https://github.com/LiteAVSDK/TRTC_Web) (in `TRTC_Web/quick-demo-vue2-js`). #### Run the demo Note: A node environment of v14.16.0 and above is recommended. - Run the demo locally ```shell npm start ``` - The [http://localhost:8080/](http://localhost:8080/) address will be opened in your default browser automatically. > ! > > The default port number is 8080. Please use the number of the actual port used to run the demo locally. > > For the browsers supported by the TRTC web SDK, see [Supported Platforms](https://intl.cloud.tencent.com/document/product/647/41664#supported-platforms). > > For the URL protocols supported by the TRTC web SDK, see [URL Protocol Support](https://intl.cloud.tencent.com/document/product/647/41664#url-protocol-support). > > For information about the ports and domain names used by the TRTC web SDK, see [Dealing with Firewall Restrictions](https://intl.cloud.tencent.com/document/product/647/35164#what-ports-and-domain-names-should-i-add-to-the-allowlist-of-my-firewall-for-webrtc.3F). + Enter the `SDKAppID` and secret key. For detailed directions, see [Getting Application Information]. #### Try the demo - Click **Join Room** to enter a room. - Click **Publish** to publish the local stream. - Click **Unpublish** to stop publishing the local stream. - Click **Leave Room** to leave the room. - Click **Start Screen Share** to share the screen. - Click **Stop Screen Share** to stop sharing the screen. #### Others - To package the code to deploy to production, run the command below: ```shell npm run build ``` - If an "eslint" error occurs when you modify the code, run the command below to troubleshoot the issue: ```shell npm run lint:fix ``` ## Getting Application Information #### Create an application - Log in to the [TRTC console](https://console.cloud.tencent.com/trtc), and select **Development Assistance > [Demo Quick Run](https://console.cloud.tencent.com/trtc/quickstart)** on the left sidebar. - Select **New** and enter an application name such as `TestTRTC`. If you have already created an application, select **Existing**. - Add or edit tags according to your actual needs and click **Create**. ![img](https://qcloudimg.tencent-cloud.cn/raw/7805a202a8e0c96b748116f17aa8524c.png) #### Get the `SDKAppID` and `userSig` - Copy the `SDKApppID` and secret key. ![img](https://qcloudimg.tencent-cloud.cn/raw/85489ab5999afbd64604a4e3c76f2249.png) # rtctest