Uniapp se da cuenta de la comunicación de audio y video
¿Sigues preocupado por las comunicaciones de audio y video de Uniapp? Para satisfacer las necesidades de los desarrolladores, anyRTC ha desarrollado especialmente una versión uniapp de comunicación de audio y video.
La comunicación en tiempo real anyRTC incluye dos módulos:
- Módulo de audio y video en tiempo real-comunicación de audio y video
- Interacción de señalización de módulo de mensajería en tiempo real, bombardeo y otras comunicaciones en la sala de transmisión en vivo
Permítame que lo lleve primero a comprender el módulo de audio y video en tiempo real
Ejemplo de proceso de ejecución del proyecto (este artículo utiliza complementos remotos)
-
Ir al mercado de complementos de Uniapp
-
Descargar demostración de muestra
-
Abra el
manifest.jsonarchivo, seleccione Configuración del complemento nativo de la aplicación => complemento remoto
-
Haz una base personalizada
-
Después de empaquetar con éxito, seleccione una base personalizada
- Buscar páginas => index => index.nvue, agregar appid
Pasos para lograr audio y video
Componente de reproducción de video
- Debes estar en el
.nvuearchivo - En uso cuando necesita mostrar el
AR-CanvasViewcomponente de video , no se muestra inicialmente, de lo contrario, un error - Necesita establecer ancho y alto
<view>本地视频</view>
<view v-if>
<AR-CanvasView :ref="localvideo" style="height:100px;width:100px"></AR-CanvasView>
</view>
<view>远端视频</view>
<view v-if>
<AR-CanvasView :ref="remotevideo" style="height:100px;width:100px"></AR-CanvasView>
</view>
js código relacionado
1. Introducir y utilizar complementos
Consulte las instrucciones para usar el complemento nativo de uni-app
const RtcModule = uni.requireNativePlugin('AR-RtcModule');
2. Inicialización del complemento
Inicializar cuando la página se carga inicialmente
- Inicializar la devolución de llamada (monitorizar la devolución de llamada); de lo contrario, no se recibirá ninguna devolución de llamada
- Inicialice el complemento (complete el ID de la aplicación), de lo contrario, el servicio no se puede utilizar
// 页面初始加载(uniapp 生命周期)
async onReady() {
// 初始化回调
await RtcModule.setCallBack((res) => {
switch (res.engineEvent) {
case "onWarning":
console.log("警告", res.warningCode);
break;
case "onError":
console.log("错误", res.errorCode);
break;
case "onJoinChannelSuccess": (本地)
console.log("用户"+ res.uid + "加入成功");
break;
case "onLeaveChannel":（本地）
console.log("用户"+ res.uid + "离开频道");
break;
case "onUserJoined":
console.log("远端用户"+ res.uid + "加入频道");
break;
case "onUserOffline":
console.log("远端用户"+ res.uid + "离开频道");
break;
case "onFirstRemoteVideoDecoded":
console.log("完成远端用户"+ res.uid + "视频首帧解码");
break;
...
}
})
// 初始化插件
await RtcModule.create({
"appId": "**********"}, (res) => {
});
}
3. Establecer roles de usuario (se utiliza un ancla en este artículo)
El complemento proporciona dos modos de función:
- Audiencia (2): puede ver al anfitrión, pero el anfitrión no puede verse a sí mismo
- Anchor (1): puedes mirarte a ti mismo en todos los canales
RtcModule.setClientRole({
"role": 1}, (ret) => {
});
4. Únase al canal
1. Utilice el método joinChannel para unirse al canal.
- token: autenticación más segura proporcionada por anyRTC (sugiera no habilitarla durante el desarrollo)
- channelId: el nombre del canal al que unirse (los usuarios deben unirse al mismo canal para verse entre ellos)
- uid: nombre de usuario (se recomienda generarlo aleatoriamente, no el mismo)
RtcModule.joinChannel({
"token": "","channelId": "uniappRTC","uid": "666"}, (res) => {
})
2. Monitoreo del onJoinChannelSuccessvideo habilitado para devolución de llamada
Utilice el componente AR-CanvasView para setupLocalVideorenderizar video local
Si el rol de usuario está en la audiencia, este código no se puede usar
En los onJoinChannelSuccessaños para unirse al código
// 启用视频模块
RtcModule.enableVideo((res) => {
});
// 初始化本地视图
this.$refs.localvideo.setupLocalVideo({
"renderMode": 1,
"channelId": "uniappRTC",
"uid": "666",
"mirrorMode": 0
}, (res) => {
});
// 本地预览
RtcModule.startPreview((res) => {
});
5. Los usuarios remotos se procesan mediante el seguimiento de las devoluciones de llamada.
Los usuarios remotos se unen al canal
Mediante monitoreo para monitorear la devolución de llamada onUserJoined
Habilitar contenedor de video remoto AR-CanvasView
Completa la decodificación del primer fotograma del video remoto.
Monitoreando la devolución de llamada de monitoreo de onFirstRemoteVideoDecodedrenderizado del video distal
En los onFirstRemoteVideoDecodedaños para unirse al código
// 初始化远端视图
this.$refs.remotevideo.setupRemoteVideo({
"renderMode": 1,
"channelId": "uniappRTC",
"uid": res.uid,
"mirrorMode": 0
}, (res) => {
})
// 远端预览
RtcModule.startPreview((res) => {
});
El usuario remoto abandona el canal
Monitoreando la devolución de llamada onUserOffline
Cerrar contenedor de video remoto AR-CanvasView
6. Sal del canal (cuelga)
- Salir del canal
RtcModule.leaveChannel((res) => {
})
- Destruye la instancia del complemento
La visualización de la operación en una página no puede destruir la instancia
RtcModule.destroyRtc((res) => {
})
Mostrar resultados
Al ingresar a la terminal principal, puede realizar una videollamada individual o de varias personas, simplemente ingrese el mismo número de habitación.
como muestra la imagen
Los visitantes solo pueden navegar y no se mostrarán en la pantalla principal.
como muestra la imagen
Ayuda integrada
Puede seguir el proyecto de ejemplo para realizar las operaciones de proceso anteriores. Si necesita ayuda durante la integración, puede ponerse en contacto con el servicio de atención al cliente de la empresa a través de la información de contacto en el mercado de complementos.