Requisitos: acceso al SDK para implementar videollamadas RTC
Pasos de implementación
prefacio
提示：此处功能需求运用在window和安卓设备：
La uniapp se puede conectar inmediatamente para realizar rápidamente la función de llamadas de audio y video en tiempo real. Acceso al SDK de ZEGO Express: el SDK de audio y video en tiempo real proporcionado por ZEGO puede brindar a los desarrolladores acceso conveniente, fluidez de alta definición, interoperabilidad multiplataforma, baja latencia y servicios de audio y video de alta concurrencia.
Acerca del uso del SDK ( manual de usuario oficial )
La siguiente es una explicación detallada de mi proceso de uso (registro superficial)
1. ¿Llamadas de audio y vídeo en tiempo real?
Ejemplo: llamadas de audio y video en tiempo real
Inserte una oración: Escribí antes que la sala de transmisión en vivo de websocket de la función de transmisión en vivo del comercio electrónico tiene demasiadas personas y la cantidad de conexiones supera las 500 personas.
En esta ocasión, se utilizó uniapp para desarrollar la función de atención al cliente de consulta por videollamada de la máquina expendedora de autoservicio. Después de discutirlo, elegí el SDK instantáneo para implementarlo.
2. Utilice pasos
1. Instalación del complemento uniapp
(1) Descargue la capa de encapsulación Express SDK y js del sitio web oficial
(2) Después de la descarga, haga lo siguiente (nota: si no hay una carpeta de complementos nativos, cree una nueva y se podrá importar el complemento):
2. Uso básico de la página de videollamadas (página nvue)
Para construir la interfaz de usuario, necesito ser compatible con los navegadores y Android ( atención al desarrollo de la página nvue ):
1. Introduzca los componentes necesarios para la capa de encapsulación js en componentes, regístrelos y utilícelos.
import ZegoRemoteView from "@/components/zego-ZegoExpressUniApp-JS/zego-view/ZegoRemoteView";
import ZegoLocalView from "@/components/zego-ZegoExpressUniApp-JS/zego-view/ZegoLocalView";
components: {
ZegoLocalView: ZegoLocalView,
ZegoRemoteView: ZegoRemoteView,
},
<view class="zego-video-area">
<view class="zego-video-view">
<!-- #ifdef APP-PLUS -->
<zego-remote-view
v-if="engine"
:viewMode="AspectFill"
:streamID="playStreamID"
class="video-view"
style="height: 403.84rpx; flex: 1"
>
</zego-remote-view>
<!-- #endif -->
<!-- #ifdef H5 -->
<video
id="remote_video"
class="video-view"
autoplay
playsinline
crossorigin="anonymous"
:muted="!playVideoMuted"
></video>
<!-- #endif -->
</view>
<view class="zego-video-view">
<!-- #ifdef APP-PLUS -->
<zego-local-view class="video-view" :viewMode="AspectFill" style="height: 403.84rpx; flex: 1"></zego-local-view>
<!-- #endif -->
<!-- #ifdef H5 -->
<video
id="local_video"
class="video-view video"
autoplay
playsinline
crossorigin="anonymous"
object-fit="cover"
:muted="pubVideoMuted"
></video>
<!-- #endif -->
</view>
</view>
2. Active el permiso de la cámara cuando se inicialice la página.
async mounted() {
// #ifdef APP-PLUS
if (uni.getSystemInfoSync().platform === "android") {
await permision.requestAndroidPermission(
"android.permission.RECORD_AUDIO"
);
await permision.requestAndroidPermission(
"android.permission.CAMERA"
);
}
// #endif
// #ifdef H5
this.localVideoElem = document.querySelector("#local_video video");
this.playVideoElem = document.querySelector("#remote_video video");
// #endif
},
3. Es más conveniente según la encapsulación de ejemplos oficiales ( demostración oficial ).
Lista oficial de directorios de muestra:
tome quick-start.nvue como ejemplo, antes de ingresar a la página de videollamada , la interfaz obtuvo el token, userId y appid , y la configuración está completa
import keyCenter from '@/pages/KeyCenter.js'
keyCenter.setAppID(loginRes.appId);
keyCenter.setUserID(loginRes.userId);
keyCenter.setToken(loginRes.token);
Obtenga el número de habitación y PlayStreamID después de saltar a esta página.
La página de inicio rápido se inicializa.
1. Vincule el Id. de transmisión de inserción (PublishStreamID) y vincule (PlayStreamID)
//quick-start.vue (llame a este método)
//用了官方示例封装，直接调用对应方法
this.bindPublishStreamIDChange(PublishStreamID)
this.bindPlayStreamIDChange(PlayStreamID)
2. Operación:
(1) Crear motor
//quick-start.vue (llame a este método)
this.onClickCreate(PlayStreamID)//创建引擎/房间号用了PlayStreamID
(2) Ingrese a la sala
//mixins-"index.js
//创建引擎onClickCreate方法里面添加进入房间推流和拉流操作
```javascript
this.loginRoom(this.roomID,this.userID,this.userName)//登录房间
this.onClickPublish()//预览本地
this.onClickPlay()//播放对方视频流
(3) La videollamada ya está disponible.
Acerca de colgar y llamar al método del motor de destrucción
//quick-start.vue (llame a este método activamente)
this.destroyEngine()
(4) Cuando la otra parte entra y sale
, es necesario monitorear la operación de entrada y salida de la sala. Al crear el motor onClickCreate , se ha utilizado roomStreamUpdate para monitorear el estado de ingreso a la sala y se modifica la devolución de llamada correspondiente:
this.engine.on("roomStreamUpdate", (roomID, updateType, streamList) => {
// 流更新的相关操作, 以及关于断网后的重连出发的流更新
const stream = streamList.find(item => item.streamID === this.playStreamID)
if(stream) {
// 0 为add, 1 为delete
if (updateType == 0) {
//播放对方视频
this.startPlayingStream(this.playStreamID);
} else if (updateType == 1) {
// 对方退出了设置被动挂断
this.destroyEngine()
}
}
});
Realice el procesamiento comercial usted mismo, qué operación modificar cuando una de las partes sale
Resumir
En la página de inicialización, configure el número de habitación, el ID de transmisión de inserción y la ID de transmisión de extracción. Obtenga el ID de usuario y el token del usuario actual.
De acuerdo con los parámetros, comience (1) ingrese a la sala (2) comience a transmitir (3) comience a extraer la transmisión (4) comience a monitorear la sala al mismo tiempo e ingrese la devolución de llamada para realizar las operaciones comerciales requeridas para ingresar y salir de la espacio al implementar video 1 a 1, como salir de la página actual