This is a pure front-end Serverless H5 voice chat room

Project Demo Demo address

Online demo address Alternate address

Browser Support

Introduction to the

This article uses the game voice solution provided by Tencent Cloud, and individual developers can use some functions for free.

Free zhenxiang 2333

This article only uses the H5 SDK, only the most basic voice chat service. There are more advanced spatial sound effects, speech recognition, etc., but it doesn’t work on the Web…

No ads included, safe to eat.

Before the Nuggets someone crazy hair some cloud team AD, really quite annoying.

Need the material

  1. Tencent Cloud Account
  2. Making account
  3. An HTTPS domain name and a server where Node can be deployed
  4. NodeJS is run locally and the server deploys the NodeJS service

Involving technology

0.0 is not covered in this article

  • Vue
  • Element-UI
  • Node.js
  • pm2

The first step is to create the application

Log in Tencent cloud official website to visit GME game multimedia engine

To create an application, select H5 for platform and Mainland China for service region. (No charge, free pv for 500 days)

Attention! Turn off services other than real-time voice services (because these are paid for)

Once created, click on the app details to see the AppID and permissions key

If you have any questions, please refer to Tencent Cloud-GME access guide

Step 2: Download the authentication program and deploy it

Authentication of specific operation, please refer to the official document cloud.tencent.com/document/pr…

General process:

  1. Download signature program
  2. Change the AppID and permission key in the program to your own
  3. Test whether the signer works properly

After testing the signer locally and getting proper authentication information, you can use PM2 to deploy the signer to your server. (note! Need to deploy to HTTPS domain name)

Step 3 fork the front-end and deploy it

Log on to Github and fork my GME-chat-Demo project (adapted from the official template and included with the SDK)

Then change the AppID and signer address in this code in index.html to your own.

Use Github Pages to deploy front-end Pages. Github automatically assigns you the HTTPS domain name 😎

And then…

Ask your friends to give it a try ~😁

If you have no friends, you can open two tabs by yourself (crying)

Read more about the GME SDK’s capabilities and apisThe official documentation

conclusion

Various cloud service providers provide more convenient cloud services for individual developers, serverless, audio and video streaming services…

Make it easy for more individual developers to make live broadcasts, chat rooms and other complex functions.

The article is sloppy, but also hope to forgive · ω · any comments are also welcome to put forward ~