Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of how to build Mini Program audio and video. The content is detailed and easy to understand, easy to operate, and has a certain reference value. I believe you will gain something after reading this article on how to build Mini Program audio and video. Let's take a look.

Upgrade Wechat to the latest version, find the page card = > Mini Program = > search for "Tencent Video Cloud" to open Mini Program Demo:

Register Mini Program and open related APIs

For policy and compliance reasons, Wechat has not relaxed all Mini Program's support for and tags for the time being:

For the time being, Mini Program of personal accounts and corporate accounts is only open to the categories in the following table:

Main subcategory [social] live [education] online education [medical] Internet hospitals, public hospitals [government affairs and people's livelihood] all secondary categories [financial] funds, trust, insurance, banking, securities / futures, self-financing of non-financial institutions, credit information business, consumer finance

Open Wechat public platform to register and log in to Mini Program, and self-activate the permission of this component in "Settings-API Settings" in Mini Program management backend.

Note: if all the above settings are correct, but Mini Program still does not work properly, maybe the internal cache of Wechat has not been updated, please delete Mini Program and restart Wechat before trying.

Install WeChat Mini Programs development tools

Download and install the latest version of the Wechat developer tool and log in to the developer tool using the WeChat code scan bound by Mini Program.

Get the Demo source code and debug

Step1: visit SDK + Demo to get the source code of Mini Program Demo.

Step2: open the installed Wechat developer tool and click the "Mini Program Project" button.

Step3: enter Mini Program AppID, and select the code directory downloaded in the previous step. (note: please select the root directory, the root directory contains project.config.json files, please do not just select the wxlite directory! ), click OK to create the Mini Program project.

Step4: click "OK" again to enter the developer tool.

Step5: please use your mobile phone for testing, and directly scan the QR code generated by the developer tool preview to enter.

Step6: enable debug mode to experience and debug internal functions. Turning on debugging can skip the work of adding these domain names to Mini Program whitelist.

Set up your own account and backend server

In this section, we will describe how to replace the default server address for Demo testing with your own server, so that you can use your own Tencent Cloud account to achieve the above features and facilitate your secondary development.

1. Built server

1.1 what can this server do?

Click on the interactive classroom function in demo, and you will see a list of rooms. How is this room list implemented?

After seeing the video room list, if you want to create a video room or enter a video room built by others, you need to pass legal parameter values for the corresponding attributes (sdkAppID, userID, userSig, roomID and privateMapKey). How to obtain these parameter values?

1.2 how to build this server?

Download webrtc_server, which is an implementation of the java version, and you can learn how to use this source code according to the instructions in README.md.

1.3 how can I use the server when it is built?

In the Mini Program source code, modify the webrtcServerUrl in the wxlite/config.js file to: https:// your own domain name / webrtc/weapp/webrtc_room

Mini Program's WebRTC capability is definitely for video calls with Chrome browsers. The source code on the browser side can be downloaded by clicking Chrome (src), and the serverDomain in the component/WebRTCRoom.js file can be modified to: https:// your own domain name / webrtc/weapp/webrtc_room.

two。 Build and server

2.1 what can this server do?

Both (for LVB joint broadcasting) and (for video calls) are extended features based on Tencent Cloud's two basic services, LVB and IM, and require the cooperation of a backend component called RoomService.

2.2 how to build this server?

Download the java version of RoomService source code and follow the instructions in README.md to learn how to use this source code.

2.3 how can I use the server when it is built?

In the Mini Program source code, modify the serverUrl and roomServiceUrl in the wxlite/config.js file to: https:// your own domain name / roomservice/

If Mini Program uses and two tags, it cannot be paired with a Chrome browser on the PC side, and needs to switch to a WebEXE hybrid solution. Modify RoomServerDomain in liveroom.html and double.html files in GitHub (WebEXE) source code to: https:// your own domain name / roomservice/

3. Wafer zero-cost server deployment solution (Node.js)

If you are a senior Web front-end engineer and cannot find a suitable server for the time being, but want to quickly have your own debugging backend, you can use Tencent Cloud's Wafer feature for zero-cost one-click deployment (Wafer only supports Node.js backend code). All you need to do is:

Step1: download Mini Program source code.

Step2: complete the deployment according to the one-click deployment guidelines.

Step3: modify the RoomServerDomain in the liveroom.html and double.html files in the GitHub (WebEXE) source code to: https:// your own domain name / roomservice/

This is the end of the article on "how to build Mini Program Audio and Video". Thank you for reading! I believe that everyone has a certain understanding of "how to build Mini Program audio and video" knowledge, if you want to learn more knowledge, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.