npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@tencentcloud/room-uikit-vue

v0.0.4

Published

_English | [简体中文](README.md)_

Downloads

26

Readme

Quick Run of TUIRoom Web Demo

English | 简体中文

This document describes how to quickly run the TUIRoom demo project to try out group audio/video interaction.

Directory structure

.
├── README.md
├── auto-imports.d.ts
├── components.d.ts
├── index.html
├─ src
│ ├─ App.vue // main page of the sample project
│ ├── TUIRoom // TUIRoom UI component source files
│ ├── assets // public resources
│ ├── config // TUIRoom configuration file
│ ├── env.d.ts
│ ├── main.ts // Example project entry file
│ ├── router // Example project routing configuration
│ └── views // Example project routing page
└── vite.config.ts

Step 1. Create a TRTC application

  1. Enter the Application Management interface of the Tencent Cloud Live Audio/Video Console, select Create Application, enter the application name,click Create Application.

  2. Find your application in the application list and Click Application Info.

  3. Follow the steps below to get the application’s SDKAppID and key.

! This component uses two basic PaaS services of Tencent Cloud: TRTC and IM. When you activate TRTC, IM will be activated automatically. For information about the billing of IM, see Pricing.

Step 2: Download the source code and configure the project

  1. Clone or download the source code in our repository (You can start the repository to save it).

  2. Find and open Web/vue3/src/config/basic-info-config.js.

  3. Configure parameters in basic-info-config.js:

Step 3: Run the example

  1. install dependencies

    cd TUIRoomKit/Web/vue3
       
    npm install
  2. Run the sample project in the development environment

    npm run dev
  3. Generate a DIST file

    npm run build

Step 4. Try out the demo

Open http://localhost:3000/#/home in a browser to try out TUIRoom.

Because Element Plus components are imported manually, it may take a relatively long time for the page to load in the development environment for the first time. This will not be an issue after building.

Anchor (userId: anchor)

    1. On the home page, click New Room.
    1. Enter a room.

| 1 | 2 | |---------|---------| | | |

Participant (userId: audience)

    1. On the home page, enter the ID of the room created by the anchor and click Join Room.
    1. Enter the room.

| 1 | 2 | |---------|---------| | | |

Step 5: Production Environment Deployment

    1. Generate a DIST file
    npm run build
    1. Deploy the dist file to the server

! Production environments require the use of https domains

FAQs

I deployed the demo project in the testing/development environment. The mic and camera did not work. What should I do?

Make sure you used an HTTPS URL. For the sake of data security and privacy protection, your browser may restrict HTTP URLs. To access all features of the TRTC web SDK (WebRTC), please use an HTTPS URL.

Other

  • Welcome to join our Telegram Group to communicate with our professional engineers! We are more than happy to hear from you~ Click to join: https://t.me/+EPk6TMZEZMM5OGY1
    Or scan the QR code