Plusieurs méthodes de mise en œuvre du mini-programme d'appel vidéo 1v1

---

avant-propos

Par exemple : Cet article explique comment j'ai trouvé différentes manières de réaliser l'appel vidéo 1v1 de l'applet ?

---

1. Dialogue audio et vidéo à deux dans l'applet WeChat (fosse abandonnée)

La demande d'activation
n'est actuellement ouverte qu'aux catégories suivantes de mini-programmes pour les entités nationales. Vous devez d'abord passer l'examen de la catégorie, puis activer vous-même l'autorisation d'interface dans l'arrière-plan de gestion des mini-programmes, "Développement" - "Gestion du développement " - "Paramètres d'interface".

J'utilise des outils - catégorie service client vidéo

L'examen prend environ une demi-journée

Document d'appel vidéo à deux personnes
Grâce à la fonction d'appel audio et vidéo à deux personnes (VoIP 1v1), les utilisateurs peuvent directement passer des appels vidéo ou audio individuels dans le mini programme, ce qui améliore la qualité de service du mini programme, et le coût de développement requis pour la fonction est extrêmement faible.

Pris en charge à partir de la bibliothèque de base 2.20.1

Interface frontale de l'applet WeChat

1. Activer le chat à deux : wx.setEnable1v1Chat
2. Rejoindre (créer) une conversation à deux : wx.join1v1Chat

Les conditions d'utilisation doivent aller sur le marché des services WeChat pour s'ouvrir.Tout

d'abord, la valeur par défaut est d'abord, libre d'acheter, et n'en achetez pas d'autres si vous avez besoin d'argent. Les tyrans locaux sont des exceptions.

Soumettez simplement la commande

WeChat fournit 1 000 minutes de temps d'appel gratuit par mois naturel pour un seul mini programme, 1 minute de temps d'appel vocal est déduite de 1 minute de temps d'appel gratuit et 1 minute de temps d'appel vidéo est déduite de 15 minutes de temps libre. Tout excédent sera facturé séparément. Vous devez vous rendre sur le marché des services WeChat pour obtenir du temps libre et acheter le forfait.

Ensuite, commencez à tester l'interface frontale de l'applet WeChat

    wx.setEnable1v1Chat({
    
    
      enable: true,
      success(res){
    
    
          console.log(res, 'res')
          wx.join1v1Chat({
    
    
              listener:{
    
    
                  nickname: '接听1',
                  headImage: 'https://img0.baidu.com/it/u=1250551608,2180019998&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1669741200&t=76c06e790922f54389ce78305245b994',
                openId: '',//获取小程序用户的openId
              },
              caller:{
    
    
                  nickname: '呼叫1',
                  headImage: 'https://img0.baidu.com/it/u=1250551608,2180019998&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1669741200&t=76c06e790922f54389ce78305245b994',
                  openId: '',//获取小程序用户的openId
              },
              success(res){
    
    
                  console.log('[startCallWx]res', res)
              },
              fail(err){
    
    
                  console.log('[startCallWx]err', err)
              }
          })
          
      },
      fail(err) {
    
    
          console.error("拨通失败", err)
      }
    })

Vérification des identifiants de connexion. Obtenez le code d'identification de connexion temporaire via l'interface wx.login et transmettez-le au serveur de développement pour appeler cette interface afin de terminer le processus de connexion.
auth.code2Session

    let that=this;

    wx.login({
    
    
      success (res) {
    
    
        if (res.code) {
    
    
          console.log(res,'res')
          wx.request({
    
    
            url:`https://api.weixin.qq.com/sns/jscode2session?appid=xxx&secret=xxx&js_code=${
      
      res.code}&grant_type=authorization_code`,
            success:(res)=>{
    
    
              console.log(res);
                 that.setData({
    
    
                  openId:res.data.openId
              })
            }
          })
        }
      }
    })

Après le test, les deux téléphones mobiles doivent entrer dans l'applet pour réveiller l'appel, et l'autre téléphone mobile est connecté, et l'autre continue de montrer que l'autre partie ne répond pas. Il y a un bug,
j'ai demandé à la communauté officielle de WeChat et personne n'a répondu. Fosse abandonnée

2. Audio et vidéo en temps réel Tencent Cloud (plus cher)

Y compris la solution d'intégration de l'interface utilisateur

Cet article explique comment terminer l'accès aux composants TUICallKit dans les plus brefs délais. Suite à ce document, vous obtiendrez une applet d'appel vidéo avec une interface utilisateur complète en une demi-heure. Les fonctions de base sont illustrées dans la figure ci-dessous :

Expérience de démonstration du mini programme

Si vous souhaitez découvrir directement l'applet d'appel audio et vidéo, cliquez sur Expérience démo et scannez le code QR de l'applet.
Si vous souhaitez parcourir directement un nouveau projet, veuillez lire la démo rapide du programme WeChat Mini.
Si vous souhaitez intégrer vous-même les composants TUICallKit et créer une applet d'appel audio et vidéo, veuillez suivre ce document.

Exigences de l'environnement de développement

Version minimale requise pour WeChat App iOS : 7.0.9
Version minimale requise pour WeChat App Android : 7.0.8
Version minimale requise pour Mini Program Basic Library : 2.10.0

Avertissement :
étant donné que le compte de test du mini programme n'a pas l'autorisation d'utiliser et, veuillez utiliser le compte d'entreprise du mini programme pour demander les autorisations appropriées pour le développement.
Étant donné que les outils de développement WeChat ne prennent pas en charge les composants natifs (c'est-à-dire les balises), l'expérience doit être exécutée sur un appareil réel.

Préparation au développement de petits programmes

Étape 1 : Ouvrez le programme Enterprise Mini

La balise de flux push-pull de mini-programme ne prend pas en charge les mini-programmes personnels, uniquement les mini-programmes de type entreprise. Il est nécessaire de renseigner le type de sujet en tant qu'entreprise lors de l'inscription, comme indiqué dans la figure suivante :

Étape 2 : Ouvrir l'interface audio et vidéo en temps réel dans la console de l'applet

L'autorisation d'utiliser la balise de flux push-pull du mini-programme n'est pour le moment ouverte qu'à des catégories limitées. Pour les catégories spécifiques prises en charge, reportez-vous à cette adresse.
Pour les petits programmes qui répondent aux exigences de la catégorie, vous devez activer automatiquement l'autorisation du composant dans la plateforme des comptes officiels WeChat > ​​Développement > Gestion du développement > Paramètres de l'interface.

Étape 3 : Configurer le nom de domaine dans la console de l'applet

Définissez le nom de domaine légal de la demande et le nom de domaine légal du socket dans la plateforme officielle WeChat > ​​développement > gestion du développement > paramètres de développement > nom de domaine du serveur.
demander un nom de domaine légal :

https://official.opensso.tencent-cloud.com
https://yun.tim.qq.com
https://cloud.tencent.com
https://webim.tim.qq.com
https://query.tencent-cloud.com
https://web.sdk.qcloud.com

Nom de domaine légal socket :

wss://wss.im.qcloud.com
wss://wss.tim.qq.com

Comme illustré dans la figure, la configuration du nom de domaine du serveur :

Intégration du code source TUICallKit

Etape 1 : Initialiser le projet d'applet

1. Créez un projet Mini Program sur WeChat Developer Tools et choisissez de ne pas utiliser de modèles.
   

2. Créez une nouvelle borne.
   

3. Exécutez la commande npm init -y pour générer le fichier package.json.

npm init -y

Étape 2 : Téléchargez et importez les composants TUICallKit

1. Téléchargez le composant TUICallKit.

npm i @tencentcloud/call-uikit-wechat

version mac

mkdir -p ./TUICallKit && cp -r node_modules/@tencentcloud/call-uikit-wechat/ ./TUICallKit

version windows

xcopy node_modules\@tencentcloud\call-uikit-wechat .\TUICallKit /i /e

2. Après avoir exécuté les commandes ci-dessus, un dossier TUICallKit sera généré dans votre répertoire, qui contient les composants TUICallKit. Le répertoire est le suivant :
   
3. Construisez npm, WeChat Developer Tools > Build npm, ajoutez le répertoire miniprogram_npm. Le répertoire est le suivant :
   

Étape 3 : Obtenir SDKAppID, SecretKey

1. Connectez-vous à la console IM , cliquez sur Créer une nouvelle application, saisissez le nom de votre application dans la boîte de dialogue contextuelle, puis cliquez sur OK.
2. Cliquez sur l'application créée pour accéder à la page de configuration de base afin d'obtenir SDKAppID et SecretKey.
3. Sur la page de configuration de base, cliquez sur Essai gratuit pour activer le service d'essai gratuit de 7 jours de TUICallKit.
4. Si vous devez lancer l'application officielle, vous pouvez cliquer sur Acheter la version officielle pour accéder à la page d'achat.
   

Étape 4 : Obtenez UserSig

généré par le client

En raison de la rapidité d'utilisation de UserSig, si vous devez utiliser TUICallKit pendant une longue période, il est recommandé d'utiliser cette méthode.

1. Cliquez sur Télécharger le dossier de débogage pour copier le répertoire de débogage dans votre projet, comme indiqué dans l'image ci-dessous :
   
2. Renseignez le SDKAppID et la SecretKey du fichier GenerateTestUserSig.js.
   

console générée

Si vous souhaitez faire l'expérience de TUICallKit rapidement, vous pouvez générer un UserSig temporairement utilisable via l'outil auxiliaire de la console .

Étape 5 : appelez le composant TUICallKit

Bienvenue dans la documentation Tencent Cloud pour vérifier

Enfin, notez qu'il
existe un essai gratuit de sept jours pour créer une application. Si vous souhaitez la déployer officiellement en ligne, cela vous coûtera plus de 1 000 yuans par mois. Ne convient pas aux entreprises en démarrage.

Aucune solution d'intégration d'interface utilisateur

Cet article explique principalement comment parcourir rapidement la version du programme WeChat Mini de TRTC Demo, vous pouvez obtenir le code correspondant à partir du répertoire WXMini sur Github . Les trois premiers éléments fonctionnels de la démo illustrent trois scénarios d'application différents :
salle de chat vocal : interaction vocale pure, prise en charge du chat vocal interactif multi-personnes et effets sonores tels que le mixage et la réverbération. Il convient aux scènes sociales telles que le meurtre de loups-garous en ligne et la diffusion vocale en ligne.
Appel à deux personnes : l'appel vidéo 1v1, avec Web IM SDK, peut réaliser une consultation en ligne, un service client en ligne et d'autres scénarios de communication nécessitant une communication en face à face.
Conférence multi-personnes : prend en charge les fonctions avancées liées aux vidéoconférences telles que les appels vidéo multicanaux et les grands et petits écrans, et convient à la formation à distance, à l'éducation en ligne et à d'autres scénarios.

Pour plus de détails, veuillez consulter la documentation Tencent Cloud

3. Achetez instantanément zego (actuellement l'un des plus rentables)

exemple de code source

Exemple de guide d'exécution de code

L'exemple de code source est uniquement pour les composants natifs de WeChat.
Ce document fournit uniquement les directives d'accès pour l'exemple de framework natif d'applet, et les directives d'accès de l'exemple de framework uni-app et les précautions associées, veuillez vous référer au fichier readme.md dans l'exemple de code source sous le framework uni-app ci-dessus.

Exemple de structure de répertoire de code source

.
├── components  # 小程序组件
│   ├── zego-player # zego-player组件，封装了live-player拉流
│   └── zego-pusher # zego-pusher组件，封装了live-pusher推流
├── libs    # 依赖库文件夹，存放如sdk的js文件等
│   └──ZegoExpressMiniProgram.js    # 小程序sdk
├── miniprogram_npm # 一些项目依赖的npm包
│   └── miniprogram-api-promise # 用于扩展微信小程序api支持promise
├── pages   # 小程序页面 
│   ├── base    # 视频直播《基础推拉流》
│   ├── base_zego   # 视频直播 推拉流组件
│   ├── bgm     # 视频直播 背景音
│   ├── cdn     # 视频直播 CDN
│   ├── customlive  # 自定义推拉流
│   ├── main    # 首页
│   ├── message     # 视频直播《实时消息》
│   ├── mix     # 视频直播 混流
│   ├── multi   # 重试 多节点
│   ├── native      # 基础演示 摄像头、麦克风等
│   ├── setting     # 自定义设置 设置APPID
│   ├── snapshot    # 视频直播 截图
│   └── tokenRole   # token鉴权 token v3
├── resource    # 资源文件夹，存放如图片等静态资源
├── script      # 一些测试脚本
├── utils       # 存放共享的工具类、方法等的js文件夹
├── app.js      # 微信小程序的入口文件
├── app.json    # 微信小程序公共设置
├── app.wxss    # 微信小程序全局样式
├── package.json    # npm包描述文件
├── project.config.json # 微信小程序项目配置描述文件
└── sitemap.json    # sitemap配置文件，用于配置小程序及其页面是否允许被微信索引

exécuter un exemple de code

Le SDK dans l'exemple de code est une version bêta, ne l'utilisez pas pour la version de production.
Pour obtenir le jeton requis pour se connecter à la salle, veuillez vous référer à Utilisation de l'authentification par jeton. Si vous avez besoin de déboguer rapidement, vous pouvez utiliser le jeton temporaire généré par la console. Pour plus de détails, veuillez vous référer à Console - Assistance au développement.
Veuillez utiliser un appareil réel pour le débogage, et lors du débogage, dans les outils de développement WeChat, cochez la case pour ne pas vérifier le nom de domaine.

1. Ouvrez le projet téléchargé avec un éditeur (tel que vscode, webstorm).
2. Modifiez le zegoAppID et le serveur dans le fichier app.js en AppID et Server obtenus respectivement dans la condition préalable , et en même temps, transmettez les valeurs correctes dans userID et token, sinon l'exemple de code ne peut pas s'exécuter normalement.

Pour faciliter le débogage par les développeurs, la console ZEGO fournit la fonction de génération de jetons temporaires. Les développeurs peuvent obtenir directement des jetons temporaires à utiliser, mais dans le propre environnement en ligne du développeur, veuillez générer des jetons via leur propre serveur.

3. Utilisez l'outil de développement WeChat pour ouvrir l'exemple de code source, et dans les "Paramètres locaux", cochez l'option "Ne pas vérifier le nom de domaine légal, la vue Web (nom de domaine professionnel), la version TLS et le certificat HTTPS".

4. Compilez et exécutez l'exemple de code, veuillez utiliser votre téléphone portable pour scanner le code à prévisualiser.

Découvrez les fonctions audio et vidéo en temps réel

Exécutez le projet sur l'appareil réel. Une fois l'exécution réussie, vous pouvez voir l'écran vidéo local.

Pour la commodité de l'expérience, ZEGO fournit un exemple de débogage côté Web Sur cette page, entrez les mêmes AppID et RoomID, et entrez un UserID différent pour rejoindre la même salle et communiquer avec de vrais appareils. Lorsque l'appel audio et vidéo est démarré avec succès, vous pouvez entendre l'audio à l'extrémité distante et voir la vidéo à l'extrémité distante.

Résumer

Instant zego offre 1 000 minutes gratuites par mois, ce qui satisfait essentiellement notre affichage de démonstration.
Le compte Tencent Cloud a 1 000 minutes, mais il ne sera pas effacé après le mois prochain.