Realize video call and interactive live broadcast in the applet

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 file center ：https://www.finclip.com/mop/document/develop/component/media.html#live-pusher

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, () => {    //...

About how to generate Token or Dynamic Key See Token or Dynamic Key.