Múltiples Métodos de Implementación de Mini Programa 1v1 Videollamada

---

prefacio

Por ejemplo: este artículo explica cómo encontré una variedad de formas de realizar la videollamada 1v1 del applet.

---

1. Diálogo de audio y video de dos personas en el subprograma WeChat (pozo abandonado)

Actualmente, la solicitud de activación
solo está abierta para las siguientes categorías de miniprogramas para entidades nacionales. Primero debe pasar la revisión de categoría y luego activar el permiso de interfaz usted mismo en el fondo de administración de miniprogramas, "Desarrollo" - "Gestión de desarrollo " - "Configuración de la interfaz".

Uso herramientas - categoría de servicio al cliente de video

La revisión tarda aproximadamente medio día.

Documento de videollamada de dos personas
A través de la función de llamada de audio y video de dos personas (1v1 VoIP), los usuarios pueden realizar directamente videollamadas o llamadas de audio uno a uno en el Mini Programa, lo que mejora la calidad del servicio del Mini Programa, y el costo de desarrollo requerido para la función es extremadamente bajo.

Compatible desde la biblioteca base 2.20.1

Interfaz frontal del subprograma WeChat

1. Habilitar chat de dos personas: wx.setEnable1v1Chat
2. Únase (cree) un chat de dos personas: wx.join1v1Chat

Las condiciones de uso deben ir al mercado de servicios de WeChat para abrir.

Primero, el valor predeterminado es primero, libre de comprar, y no compre otros si necesita dinero. Los tiranos locales son excepciones.

Solo envía el pedido

WeChat proporciona 1,000 minutos de tiempo de llamada gratis por mes natural para un solo Mini Programa, 1 minuto de tiempo de llamada de voz se deduce de 1 minuto de tiempo de llamada gratis y 1 minuto de tiempo de videollamada se deduce de 15 minutos de tiempo libre. Cualquier exceso se cobrará por separado. Debe ir al mercado de servicios de WeChat para obtener el tiempo libre y comprar el paquete.

A continuación, comience a probar la interfaz frontal del subprograma 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)
      }
    })

Verificación de credenciales de inicio de sesión. Obtenga el código de credencial de inicio de sesión temporal a través de la interfaz wx.login y páselo al servidor del desarrollador para llamar a esta interfaz y completar el proceso de inicio de sesión.
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
              })
            }
          })
        }
      }
    })

Después de la prueba, los dos teléfonos móviles deben ingresar al applet para activar la llamada, y el otro teléfono móvil está conectado, y el otro sigue mostrando que la otra parte no responde. Hay un error
Le pregunté a la comunidad oficial de WeChat y nadie respondió. Pozo abandonado

2. Tencent Cloud audio y video en tiempo real (más caro)

Incluye solución de integración de interfaz de usuario

Este artículo presentará cómo completar el acceso a los componentes de TUICallKit en el menor tiempo posible. Siguiendo este documento, obtendrá un subprograma de videollamada con una interfaz de interfaz de usuario completa en media hora. Las funciones básicas se muestran en la siguiente figura:

Experiencia de demostración del mini programa

Si desea experimentar directamente el subprograma de llamadas de audio y video, haga clic en Experiencia de demostración y escanee el código QR del subprograma.
Si desea ejecutar un nuevo proyecto directamente, lea la ejecución rápida de la demostración del programa WeChat Mini.
Si desea integrar los componentes de TUICallKit usted mismo y crear un subprograma de llamada de audio y video, siga este documento.

Requisitos del entorno de desarrollo

El requisito de versión mínima para la aplicación WeChat iOS: 7.0.9
El requisito de versión mínima para la aplicación WeChat Android: 7.0.8
El requisito de versión mínima para la biblioteca básica del programa Mini: 2.10.0

Advertencia:
Dado que la cuenta de prueba del Mini Programa no tiene permiso para usar, use la cuenta del Mini Programa empresarial para solicitar los permisos relevantes para el desarrollo.
Dado que las herramientas de desarrollo de WeChat no admiten componentes nativos (es decir, etiquetas), la experiencia debe ejecutarse en un dispositivo real.

Preparación para el desarrollo de programas pequeños

Paso 1: abra el programa Enterprise Mini

La etiqueta de flujo push-pull de miniprograma no admite miniprogramas personales, solo miniprogramas de tipo empresarial. Es necesario llenar el tipo de sujeto como empresa al registrarse, como se muestra en la siguiente figura:

Paso 2: abra la interfaz de audio y video en tiempo real en la consola del applet

El permiso para usar la etiqueta de transmisión push-pull del mini programa solo está disponible para categorías limitadas por el momento. Para categorías específicas admitidas, consulte esta dirección.
Para los programas pequeños que cumplen con los requisitos de la categoría, debe habilitar automáticamente el permiso del componente en la Plataforma de cuentas oficiales de WeChat > ​​Desarrollo > Gestión de desarrollo > Configuración de la interfaz.

Paso 3: Configure el nombre de dominio en la consola del applet

Establezca el nombre de dominio legal de solicitud y el nombre de dominio legal de socket en la plataforma oficial de WeChat > ​​desarrollo > gestión de desarrollo > configuración de desarrollo > nombre de dominio del servidor.
solicitar nombre de dominio legal:

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

Nombre de dominio legal del zócalo:

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

Como se muestra en la figura, la configuración del nombre de dominio del servidor:

Integración del código fuente de TUICallKit

Paso 1: inicialice el proyecto de applet

1. Cree un proyecto de miniprograma en WeChat Developer Tools y elija no usar plantillas.
   

2. Crear una nueva terminal.
   

3. Ejecute el comando npm init -y para generar el archivo package.json.

npm init -y

Paso 2: Descargue e importe los componentes de TUICallKit

1. Descargue el componente TUICallKit.

npm i @tencentcloud/call-uikit-wechat

versión mac

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

versión de Windows

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

2. Después de ejecutar los comandos anteriores, se generará una carpeta TUICallKit en su directorio, que contiene componentes TUICallKit. El directorio es el siguiente:
   
3. Cree npm, WeChat Developer Tools > Build npm, agregue el directorio miniprogram_npm. El directorio es el siguiente:
   

Paso 3: Obtenga SDKAppID, SecretKey

1. Inicie sesión en la consola de mensajería instantánea , haga clic en Crear nueva aplicación, ingrese el nombre de su aplicación en el cuadro de diálogo emergente y haga clic en Aceptar.
2. Haga clic en la aplicación creada para ingresar a la página de configuración básica para obtener SDKAppID y SecretKey.
3. En la página de configuración básica, haga clic en Prueba gratuita para activar el servicio de prueba gratuita de 7 días de TUICallKit.
4. Si necesita iniciar la aplicación oficial, puede hacer clic en Comprar versión oficial para ingresar a la página de compra.
   

Paso 4: Obtener UserSig

generado por el cliente

Debido a la puntualidad de UserSig, si necesita usar TUICallKit durante mucho tiempo, se recomienda que use este método.

1. Haga clic en Descargar carpeta de depuración para copiar el directorio de depuración a su proyecto como se muestra en la imagen a continuación:
   
2. Rellene SDKAppID y SecretKey del archivo GenerateTestUserSig.js.
   

generación de consolas

Si desea experimentar TUICallKit rápidamente, puede generar un UserSig utilizable temporalmente a través de la herramienta auxiliar en la consola .

Paso 5: Llame al componente TUICallKit

Bienvenido a Tencent Cloud Documentación para verificar

Finalmente, tenga en cuenta que
hay una prueba gratuita de siete días para crear una aplicación. Si desea implementarla oficialmente en línea, le costará más de 1,000 yuanes al mes. No apto para empresas de nueva creación.

Sin solución de integración de interfaz de usuario

Este artículo presenta principalmente cómo ejecutar rápidamente la versión del programa WeChat Mini de TRTC Demo, puede obtener el código relevante del directorio WXMini en Github . Los primeros tres elementos funcionales en la demostración muestran tres escenarios de aplicación diferentes:
sala de chat de voz: interacción de voz pura, admite chat de voz interactivo de varias personas y efectos de sonido como mezcla y reverberación. Es adecuado para escenas sociales como la matanza de hombres lobo en línea y la transmisión de voz en línea.
Llamada de dos personas: videollamada 1v1, con Web IM SDK puede realizar consultas en línea, servicio al cliente en línea y otros escenarios de comunicación que requieren comunicación cara a cara.
Conferencia de varias personas: admite funciones avanzadas relacionadas con videoconferencias, como videollamadas multicanal y pantallas grandes y pequeñas, y es adecuada para capacitación remota, educación en línea y otros escenarios.

Para obtener más detalles, consulte la documentación de Tencent Cloud

3. Compra instantáneamente zego (actualmente uno de los más rentables)

ejemplo de código fuente

Guía de ejecución de código de muestra

El código fuente de muestra es solo para los componentes nativos de WeChat.
Este documento solo proporciona las pautas de acceso para el ejemplo del marco nativo del applet y las pautas de acceso del ejemplo del marco uni-app y las precauciones relacionadas. Consulte el archivo readme.md en el código fuente del ejemplo en el marco uni-app anterior.

Ejemplo de estructura de directorio de código fuente

.
├── 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配置文件，用于配置小程序及其页面是否允许被微信索引

ejecutar código de muestra

El SDK en el código de muestra es una versión beta, no lo use para la versión de producción.
Para obtener el token necesario para iniciar sesión en la sala, consulte Uso de la autenticación de token. Si necesita depurar rápidamente, puede usar el token temporal generado por la consola. Para obtener más información, consulte Consola: asistencia para el desarrollo.
Utilice un dispositivo real para la depuración y, al realizar la depuración, en las herramientas para desarrolladores de WeChat, configure la casilla de verificación para no verificar el nombre de dominio.

1. Abra el proyecto descargado con un editor (como vscode, webstorm).
2. Cambie zegoAppID y server en el archivo app.js por AppID y Server obtenidos en la condición previa respectivamente y, al mismo tiempo, pase los valores correctos en userID y token, de lo contrario, el código de muestra no puede ejecutarse normalmente.

Para facilitar la depuración por parte de los desarrolladores, la consola ZEGO proporciona la función de generar tokens temporales. Los desarrolladores pueden obtener directamente tokens temporales para su uso, pero en el propio entorno en línea del desarrollador, genere tokens a través de su propio servidor.

3. Use la herramienta para desarrolladores de WeChat para abrir el código fuente de muestra y, en "Configuración local", marque la opción "No verificar el nombre de dominio legal, la vista web (nombre de dominio comercial), la versión TLS y el certificado HTTPS".

4. Compile y ejecute el código de muestra, use su teléfono móvil para escanear el código para obtener una vista previa.

Experimente las funciones de audio y video en tiempo real

Ejecute el proyecto en el dispositivo real. Después de ejecutarlo con éxito, puede ver la pantalla de video local.

Para la comodidad de la experiencia, ZEGO proporciona un ejemplo de depuración del lado web En esta página, ingrese el mismo AppID y RoomID, e ingrese un UserID diferente para unirse a la misma sala y comunicarse con dispositivos reales. Cuando la llamada de audio y video se inicia con éxito, puede escuchar el audio en el otro extremo y ver el video en el otro extremo.

Resumir

Instant zego ofrece 1000 minutos gratis al mes, lo que básicamente satisface nuestra pantalla de demostración.
La cuenta de Tencent Cloud tiene 1000 minutos, pero no se borrará después del próximo mes.