Welcome to my GitHub

Github.com/zq2599/blog…

Content: all original article classification summary and supporting source code, involving Java, Docker, Kubernetes, DevOPS, etc.;

This paper gives an overview of

  • Some time ago, BECAUSE of my work, I got in touch with the real-time audio and video playback of wechat small program. Here I will record the process in detail as a reference in the future.
  • In terms of the overall scheme, I use OBS to push the stream to Tencent Cloud, and then use the live-player component of the small program to pull the stream and play it from Tencent Cloud. The architecture diagram is as follows:

  • This content is all the operations in the above figure, starting from the configuration of OBS push stream, to the configuration of Tencent cloud live broadcasting service, and then to the operation of small programs.

Important premises (subject is an enterprise applet, a usable domain name)

There are five important prerequisites that need to be met in order to succeed:

  1. The body of the applets must be an enterprise, because only the enterprise type can turn on the following switches, not the personal type:

  1. Small application service category must be within the scope of the live – player support, my tools – here is within the scope of the video service, below the red box, please refer to the specific range: developers.weixin.qq.com/miniprogram…

  1. There is an available domain name, here is Zq2599.com, is in Ali Cloud application;
  2. Register an account on Tencent Cloud;
  3. I have an available PC and camera, in my case a Windows desktop + Logitech C270i camera;
  • After the above prerequisites are ready, the next step is to start the operation, starting from the push flow;

OBS Push stream Settings

  • The goal of this chapter is to complete the push-stream configuration of the video source. The video source content is a USB camera on a Windows computer. In order to check how long the playback delay of the small program is, a layer of current time should be pasted in the video content.

  • Download the Windows version of OBS and install, my version is 26.1.1 here, link: cdn-fastly.obsproject.com/downloads/O…

  • Open OBS and add a camera: Source -> + -> Video capture Device -> Select the camera you want to use, as shown below:

  • If the camera is normal, the preview page should show the content captured by the camera:

  • Right click on the preview page and select Resize output (to source) :

  • In order to check the amount of delay in the small program, we attach a time float layer to the video content and add another source, the type is browser, as shown below:

  • Select New, name time patch:

  • On the Settings page, set the URL field to naozhong.net.cn/shijian/

  • At this point, the content of the website will fill the preview page, as shown in the picture below. In fact, all we need is the time of the webpage, and the rest of the screen should be used to display the content of the camera, so next we will crop the content of the website:

  • Right-click on the time patch: Transform -> Edit Transform:

  • Set parameters as shown in red box 2 below, and the effect in red box 3 can be obtained:

  • At this point, the video source setting is complete, temporarily do not push the stream, etc. Tencent cloud setting is completed;

Tencent cloud live push stream Settings

  • In the previous chapter, we have prepared the video source, and now we need to find a media server to push the stream. Here, I use the cloud live streaming service of Tencent Cloud, which gives 20G of traffic to new users. The operation is simple and the documents are detailed.

  • Open the browser: console.cloud.tencent.com/live/livest…

  • There is no need to create a new push basin name, Tencent cloud has prepared one, as shown in the red box below, please make sure it is enabled:

  • Click the content in the red box above to enter the configuration page of push stream name, as shown below. Fill in the expiration time in red box 4, then fill in the name in red box 5, and click “Generate push stream address” button to generate the address in red box 6:

  • Above the red box 6 push flow in the address, it can be divided into two sections, the first half is rtmp://138824.livepush.myqcloud.com/live/, During the second half is demo? TxSecret = af840445fb899f88772916454ea15338 & txTime = 60 a21ef1, next we configure OBS flow address will be used;

  • Open OBS and click the Settings button in the red box below:

  • On the setting page of push stream, select “Custom” for the service, fill in the first half of the push stream address for the server, fill in the second half of the stream key for the push stream address, and then click “OK” in the lower right corner:

  • At this point, the setting is complete, and you can push the stream to Tencent Cloud. Click the start in the red box below to start the stream:

  • If you want the final display to be as low as possible, you can make some adjustments to the OUTPUT of OBS. Here is my configuration for reference:

  • At this time, I can see the stream has been pushed up on the Tencent cloud page, as shown below:

  • Click the red box 5 in the above image to preview the stream in the browser. As shown below, there is a two-second delay:

  • At this point, push stream Settings are all completed, and then play related Settings;

Tencent Cloud live broadcast Settings

  • When the video stream is pushed to Tencent cloud, the playing address needs to be configured before it can be played on the mini program, as shown in the picture below. Add a domain name, the type is playing domain name. Please fill in your own legitimate domain name in the domain name field:

  • In your own DNS configuration page do configuration (for example, my domain name resolution is on ali cloud), I am here, for example, tencent cloud configuration is www.zq2599.com, that DNS address is www.zq2599.com.tlivecdn.com, Tlivecdn.com. As a reference, the configuration on the Ali Cloud is shown as follows:

  • After the domain name is configured, the player address can be generated according to the player domain name, as shown in the following figure. Fill in the stream name in the position of red box 5 to be consistent with the push basin name, and then click the button in red box 6 to generate the player address of various protocols. Let’s choose the RTMP protocol address shown in red box 7 below:

Applets development

  • First of all, please download and install a small program IDE, I here is version 1.05, address: dldir1.qq.com/WechatWebDe…

  • Please open the small program IDE after installation, the interface effect is as follows:

  • Browser to access: developers.weixin.qq.com/miniprogram… , click the link in red box 3 below, it will automatically import the real-time audio and video playback demo project into the small program IDE:

  • Please fill in your own APPID in the red box and click the import button in the lower right corner:

  • After importing the demo, open index. WXML and change the SRC attribute of the live-player tag to the playing address shown on Tencent Cloud:

  • Next, click the Compile button in the red box below and then click the Preview button in the green box below:

  • At this time, a TWO-DIMENSIONAL code will pop up on the page, take out the phone to scan this code, will open the small program on the phone, the small program interface is as follows:

  • After clicking the play button, the video of the camera starts to display, and the whole process is complete. Put the OBS on the mobile phone and computer together to take photos, and you can understand the delay situation, as shown in the picture below. Here IT is about one second, and the effect is good:

  • If you do not use Tencent cloud push and pull flow, it is best to disable both domain name services, so as not to consume traffic due to carelessness, as shown in the red box below:

  • At this point, wechat small program + Tencent cloud live real-time audio and video combat is completed, if you are looking for low delay small program playing scheme, I hope this article can give you some reference;

You are not alone, Xinchen original accompany all the way

  1. Java series
  2. Spring series
  3. The Docker series
  4. Kubernetes series
  5. Database + middleware series
  6. The conversation series

Welcome to pay attention to the public number: programmer Xin Chen

Wechat search “programmer Xin Chen”, I am Xin Chen, looking forward to enjoying the Java world with you…

Github.com/zq2599/blog…