How to realize video call and live interaction in a small program when live broadcasting is so popular?

lately , The live broadcast room of New Oriental online is selected to bring goods in bilingual 、 Features such as teaching in fun, etc. quickly come out of the circle . Selected by Dongfang for live broadcast “ Coil powder ” Direct call from ,“ Escaped via 、 Li Jiaqi , But I didn't avoid dongyuhui ”. In recent years , video 、 Live broadcast e-commerce is growing rapidly , The main reason is video 、 The live broadcast content can carry more abundant information than the graphic content 、 Higher user acceptance . As the penetration rate of live broadcast continues to deepen , Already with entertainment 、 Study 、 shopping 、 More and more scenes such as work are integrated together . In the second half of the development of the Internet , With the layout of Internet platform and the development of vertical field application , Live broadcast industry will usher in more diversified application scenarios , The scale of potential users will continue to expand .

​

In the live broadcasting industry in full swing , More and more enterprises choose to develop their own live broadcasting platform , Or hope in the original app Medium and upper shelves audio and video 、 Live broadcast function . How difficult is it to develop a live broadcast function ？ Live broadcast is difficult ： If you want to make the live broadcast from scratch , The technical difficulty is still very high , Because there are many technical difficulties in live broadcasting , video / Audio processing , Graph processing , video / Audio compression ,CDN distribution , Instant messaging and other technologies , Every technology is very professional . Live broadcast is easy ： The good news is that the current giants in various fields , A lot of awesome frameworks have been encapsulated , We just need to use the framework that others have written , Can quickly build a live broadcast app, It's the legendary programming on the shoulders of Daniel . How can we simply and conveniently build a live broadcast platform ？ The following is used by developers in FinClip Applet Examples of video call and interactive live broadcast in ：

Prepare the development environment

1、 Please ensure that wechat developer tools have been installed locally

2、 Please make sure there is a support live-pusher and live-player Wechat public platform account of the component . Only certified enterprise accounts in specific industries can use these two components . View details FinClip Document center ： Media components | Applet development help center _ Applet FAQs _ Introduction to applet -FinClip

3、 Please ensure that in the development and setting of wechat public platform account , Give the following domain name request permission ：

• https://miniapp.agoraio.cn

• https://uni-webcollector.agora.io

• wss://miniapp.agoraio.cn

4、 If you use 1.1.2 BETA Later version , You need to add the following additional domain names

• https://miniapp-1.agoraio.cn

• https://miniapp-2.agoraio.cn

• https://miniapp-3.agoraio.cn

• https://miniapp-4.agoraio.cn

Run the sample program

• stay FinClip And Agora.io Registered account , And create your own test project , obtain App ID. If you need to get Token or Channel Key, Please enable App Certificate
• Download the sample program on this page
• open utils Folder , stay config.js Fill the file with the obtained App ID： const APPID = 'abcdefg'
• download Agora Miniapp SDK, And will SDK Rename as “mini-app-sdk-production.js"
• Will be renamed "mini-app-sdk-production.js" The file is saved in the... Of this sample program lib Under the folder
• Start the wechat developer tool and import the sample program
• Enter channel name , Join the channel . Invite your friends to join the same channel , You can start video exchange .

The network of Native SDK It can communicate with applet directly .

About Token/Dynamic Key

If enabled App Certificate, You also need to generate on the server side Token or Dynamic Key Used for authentication . The generated Token or Dynamic Key Fill in the following methods ：

//... client.join(<your key/access token here>, channel, uid, () => { //...