使用ZEGO打包之后不能正常显示视频通话画面
出现黑屏
<template>
<view class="content">
<view class="wraperWai">
<view class="zego-video-area wraperWaia">
<view class="zego-video-view wraperWaia">
<zego-remote-view class="video-view" :streamID="playStreamID" :viewMode="viewModeIndex">
</zego-remote-view>
<video id="remote_video" class="wraperWaiabenyu" autoplay playsinline :muted="playVideoMuted"
:show-mute-btn="true" @error="playError"></video>
</view>
</view>
</view>
<view class="wraperXiao">
<view class="wraperXiaobenyu">
<zego-local-view style="height: 403.84rpx;flex: 1;"></zego-local-view>
<video id="local_video" class="asdfsd" autoplay playsinline :muted="true"></video>
</view>
</view>
<view class="footer" @click="goOut()">
<u-icon class="icon" name="phone-fill" color="#fff" size="38"></u-icon>
</view>
</view>
</template>
<script>
// import permision from "@/pages/permission.js";
import ZegoExpressEngine from "@/components/zego-ZegoExpressUniApp-JS/lib/ZegoExpressEngine";
import ZegoRemoteView from "@/components/zego-ZegoExpressUniApp-JS/zego-view/ZegoRemoteView";
// import main from "@/mixins";
import play from "@/mixins/play";
import ZegoLocalView from "@/components/zego-ZegoExpressUniApp-JS/zego-view/ZegoLocalView";
import {
getHuanShi,
isCalling
} from '../../utils/login.js'
export default {
mixins: [play],
components: {
ZegoRemoteView: ZegoRemoteView,
ZegoLocalView: ZegoLocalView,
},
data() {
return {
guaFlag: false,
defaultMicrophone: true,
defaultCamera: true,
cameraSelections: ["Back", "Front"],
cameraCurrentSelect: 1,
mirrorArray: [{
name: "OnlyPreview",
},
{
name: "Both",
},
{
name: "No",
},
{
name: "OnlyPublish",
},
],
mirrorIndex: 0,
viewModeArray: [{
name: "AspectFit",
},
{
name: "AspectFill",
},
{
name: "ScaleToFill",
},
],
viewModeIndex: 0,
playStreamID: "1",
publishStreamID: "2",
// ------------------
playVideoElem: null,
isPlayingStream: false,
playBtnName: "Start Playing",
playVideoMuted: false,
pubVideoMuted: false,
roomID: "001",
// ----------------
// userID: 'user_254789582457',
// userName: 'user_254789582457',
// token: '04AAAAAGLAA1EAEHczdXNhc3prOWc4dW43NTAAsOw+uMStQWiH8tKV3cT40XbqIL6PLiLSinF8P5mTwHOM8lNq85lqT6h1dWKH4s9oHDXLkwDtB57TEdPEk9mR5i9gb/GW/AHsCxkd92Y800iyOgqULDFiwgxJ8eIXM+1fbcDvpG9ZZDs6rUpI+6kQoVKPJG81IwbqEwc7CkOapRNpPcXEjcwCjnrFmkUdMfwz/uld7PCh/Ec8nfTWo6XdjgTc9RR2NiqpcguDLxD4jlFE',
defaultVideo: true,
defaultAudio: true,
viewModeArray: [{
name: "AspectFit",
},
{
name: "AspectFill",
},
{
name: "ScaleToFill",
}
],
viewModeIndex: 0,
shiToken: "", //视频通话的Token
shiId: "", //视屏通话用的ID
shiName: "", //视屏通话用的name
shiroomNum: "", //视频通话用的房间号
lunXun: null, //轮询
patientId: "1", //患者ID
}
},
onShow() {
clearInterval(this.lunXun)
this.lunHu()
},
async onLoad(e) {
console.log(e);
var obj = JSON.parse(e.obj);
console.log(obj);
this.shiToken = obj.shiToken
this.shiId = obj.userId
this.shiName = obj.shiName
this.shiroomNum = obj.roomId
this.patientId = obj.patientId
await this.cai()
this.deng()
this.benyu()
this.onClickPublish()
this.onClickPlay()
console.log(this.shiId, this.shiName, this.shiroomNum, this.shiToken);
},
// async mounted() {
// console.log("mounted");
// if (uni.getSystemInfoSync().platform === "android") {
// await permision.requestAndroidPermission(
// "android.permission.RECORD_AUDIO"
// );
// await permision.requestAndroidPermission(
// "android.permission.CAMERA"
// );
// }
// await this.setup();
// },
async mounted() {
// if (uni.getSystemInfoSync().platform === "android") {
// await permision.requestAndroidPermission(
// "android.permission.RECORD_AUDIO"
// );
// await permision.requestAndroidPermission(
// "android.permission.CAMERA"
// );
// }
// #ifdef H5
this.localVideoElem = document.querySelector("#local_video video");
// #endif
// #ifdef H5
this.playVideoElem = document.querySelector("#remote_video video");
// #endif
await this.cai()
this.deng()
this.benyu()
this.onClickPublish()
this.onClickPlay()
},
methods: {
// 轮询看那边是否挂断
lunHu() {
this.lunXun = setInterval(() => {
isCalling({
patientId: this.patientId
}).then(res => {
if (res.data.data == false) {
clearInterval(this.lunXun)
uni.navigateBack({
delta: 1
})
}
console.log(res);
})
}, 2000)
},
// sdfawdsd() {
// this.cai()
// this.deng()
// this.benyu()
// this.onClickPublish()
// this.onClickPlay()
// },
// 点击挂断
goOut() {
/** 停止推流 */
ZegoExpressEngine.instance().stopPublishingStream();
/** 停止本地预览 */
ZegoExpressEngine.instance().stopPreview();
/** 停止拉流 */
ZegoExpressEngine.instance().stopPlayingStream(this.playStreamID);
/** 退出房间 */
ZegoExpressEngine.instance().logoutRoom(this.shiroomNum);
/** 销毁引擎 */
ZegoExpressEngine.destroyEngine();
getHuanShi({
id: this.shiId,
onCall: '1'
}).then(res => {
uni.redirectTo({
url: "/pages/index/index"
})
})
},
// 是否接听
sdfsdf() {
this.guaFlag = true
this.onClickPlay()
},
// #ifdef APP-PLUS
bindMirrorChange: function(e) {
this.mirrorIndex = e.detail.value;
this.setVideoMirrorMode(e.detail.value);
},
bandCameraChange: function(e) {
this.useFrontCamera(e.currentIndex == 1 ? true : false);
},
// #endif
bandEnableCameraChange: function(e) {
this.enableCamera(e.detail.value);
},
bandEnableMicrophoneChange: function(e) {
this.muteMicrophone(!e.detail.value);
},
bindViewModeChange: function(e) {
this.setViewMode(e.detail.value);
},
bindEnableVideoChange: function(e) {
this.enablePlayVideo(e.detail.value);
},
bindEnableAudioChange: function(e) {
this.enablePlayAudio(e.detail.value);
},
setViewMode(e) {
this.viewModeIndex = e;
let _this = this;
setTimeout(function() {
_this.startPlayingStream(_this.playStreamID);
}, 100);
},
enablePlayVideo(e) {
this.engine.mutePlayStreamVideo(this.playStreamID, !e);
},
enablePlayAudio(e) {
this.engine.mutePlayStreamAudio(this.playStreamID, !e);
},
// addListeners() {
// this.engine.on("apiCalledResult", (errorCode, funcName, info) => {
// if (errorCode == 0) {
// this.appendSuccessInfo(`[${funcName}]: ${info}`);
// } else {
// this.appendFailureInfo(
// `[${errorCode}][${funcName}]: ${info}`
// );
// }
// });
// this.engine.on(
// "playerStateUpdate",
// (streamID, state, errorCode, extendedData) => {
// this.appendCallbackInfo(
// `playerStateUpdate:streamID:${streamID}, state:${state}, errorCode:${errorCode}, extendedData:${JSON.stringify(
// extendedData
// )}`
// );
// }
// );
// },
// 采用通用场景
async cai() {
// 采用通用场景
const profile = {
appID: 571429559,
// AppSign 仅满足简单的鉴权需求,如果需要升级为更加安全的鉴权方式,请参考[如何从 AppSign 鉴权升级为 Token 鉴权](https://doc-zh.zego.im/faq/token_upgrade?product=ExpressVideo&platform=all)
// AppSign 可通过[控制台](https://console.zego.im/dashboard)获取,格式为 @"39011cbxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
scenario: 0
};
await ZegoExpressEngine.createEngineWithProfile(profile)
console.log('12312');
},
// 登录房间
deng() {
let roomConfig = {};
// 只有传入 “isUserStatusNotify” 参数取值为 “true” 的 ZegoRoomConfig,才能收到 onRoomUserUpdate 回调。
roomConfig.isUserStatusNotify = true;
roomConfig.token = this.shiToken;
// 登录房间
// 开始登录房间
ZegoExpressEngine.instance().loginRoom(this.shiroomNum, {
'userID': this.shiId,
'userName': this.shiName
}, roomConfig);
// // 登录房间后的回调事件
// ZegoExpressEngine.instance().on('roomStateUpdate', (roomID, state, errorCode, extendedData) => {
// // 房间状态更新回调,登录房间后,当房间连接状态发生变更(如出现房间断开,登录认证失败等情况),SDK会通过该回调通知
// });;
// ZegoExpressEngine.instance().on('roomUserUpdate', (roomID, updateType, userList) => {
// // 用户状态更新,登录房间后,当房间内有用户新增或删除时,SDK会通过该回调通知
// });
},
// 单击开始或停止推流
async onClickPublish() {
// await this.loginRoom(this.roomID, this.userID, this.userName);
await ZegoExpressEngine.instance().startPublishingStream(this.publishStreamID);
// this.isPublishingStream = !this.isPublishingStream;
},
addPublishListeners() {
this.engine.on(
"publisherStateUpdate",
(streamID, state, errorCode, extendedData) => {
this.appendCallbackInfo(
`publisherStateUpdate:streamID:${streamID}, state:${state}, errorCode:${errorCode}, extendedData:${JSON.stringify(
extendedData
)}`
);
if (state === 2) {
this.startPreview();
} else if (state === 0) {
this.stopPreview()
}
}
);
},
// 开始推流
async setup() {
await this.createEngine();
this.setVideoMirrorMode(this.mirrorIndex);
this.enableCamera(this.defaultCamera);
this.muteMicrophone(!this.defaultMicrophone);
this.useFrontCamera(true);
this.setDummyCaptureImage();
this.addListeners();
// await this.loginRoom(this.roomID, this.userID, this.userName);
},
setVideoMirrorMode(e) {
this.appendActionInfo(
`set Video Mirror Mode: mode=${this.mirrorArray[e].name}`
);
this.engine.setVideoMirrorMode(e);
},
setViewMode(e) {
this.viewModeIndex = e;
this.appendActionInfo(
`set View Mode: mode=${this.viewModeArray[e].name}`
);
let _this = this;
setTimeout(function() {
_this.startPreview();
}, 100);
},
useFrontCamera(e) {
this.appendActionInfo(`Switch Camera: ${e ? "Front" : "Back"}`);
this.engine.useFrontCamera(e);
},
enableCamera(e) {
this.appendActionInfo(`Camera: ${e ? "On" : "Off"}`);
this.engine.enableCamera(e);
},
muteMicrophone(e) {
this.appendActionInfo(`Mute Microphone : ${e ? "TRUE" : "FALSE"}`);
this.engine.muteMicrophone(e);
},
async setDummyCaptureImage() {
/**
* Platform differences:
* 1. iOS: If it is a full path, add the prefix "file:", such as @"file:/var/image.png"; If it is a assets picture path, add the prefix "asset:", such as @"asset:watermark".
* 2. Android: If it is a full path, add the prefix "file:", such as "file:/sdcard/image.png"; If it is a assets directory path, add the prefix "asset:", such as "asset:watermark.png".
*/
let imagePath = "/static/logo.png";
// #ifdef APP-PLUS
imagePath = "file:" + plus.io.convertLocalFileSystemURL(imagePath);
// #endif
this.appendActionInfo(`set dummy capture image path: ${imagePath}`);
const result = await this.engine.setDummyCaptureImagePath(
imagePath
);
console.log(result);
},
addListeners() {
this.engine.on("apiCalledResult", (errorCode, funcName, info) => {
if (errorCode == 0) {
this.appendSuccessInfo(`[${funcName}]: ${info}`);
} else {
this.appendFailureInfo(
`[${errorCode}][${funcName}]: ${info}`
);
}
});
this.addPublishListeners();
},
changeLogViewSize() {
this.logHeight = this.logHeight == 80 ? 800 : 80;
},
// tui() {
// /** 开始推流 APP-PULL stream无值, Web有值,为MediaStream*/
// const stream = ZegoExpressEngine.instance().startPublishingStream("1");
// },
// 启动本地预览
benyu() {
/** 开始预览 */
let channel = 1 // 可传可不传
// #ifdef H5
let localVideoElem = document.querySelector("#local_video video")
ZegoExpressEngine.instance().startPreview(localVideoElem, channel);
// #endif
// #ifdef APP-PLUS
ZegoExpressEngine.instance().startPreview(channel)
// #endif
},
// -----------------------------------------------------
// 单击拉流操作
async onClickPlay() {
// if (this.isPlayingStream) {
// this.stopPlayingStream(this.playStreamID);
// this.playBtnName = "Start Playing";
// } else {
// await this.loginRoom(this.roomID, this.userID, this.userName);
this.startPlayingStream(this.playStreamID);
this.playBtnName = "Stop Playing";
// }
this.isPlayingStream = !this.isPlayingStream;
},
// 开始拉流
async startPlayingStream(streamID, config) {
const result = await ZegoExpressEngine.instance().startPlayingStream(streamID, config);
// #ifdef H5
console.warn(result)
this.playVideoElem.srcObject = result;
// this.playStream = result
// #endif
return result
},
// 停止拉流
stopPlayingStream(streamID) {
this.engine.stopPlayingStream(streamID);
// #ifdef H5
this.playVideoElem.srcObject = null;
// this.playStream = null
// #endif
},
addPlayListeners() {
this.engine.on(
"playerStateUpdate",
(streamID, state, errorCode, extendedData) => {
this.appendCallbackInfo(
`playerStateUpdate:streamID:${streamID}, state:${state}, errorCode:${errorCode}, extendedData:${JSON.stringify(
extendedData
)}`
);
if (state === 0) {
// #ifdef H5
// this.playStream = null
// uni.showMessage({
// content: extendedData
// })
// #endif
}
}
);
},
playError(error) {
console.warn('play error')
}
}
}
</script>
<style lang="scss">
/*#ifndef APP-NVUE*/
.content {
width: 100vw;
height: 100vh;
position: relative;
.wraperXiaobenyu {
width: 100%;
height: 100%;
}
.asdfsd {
width: 100%;
height: 100%;
}
.footer {
width: 150rpx;
height: 150rpx;
background-color: red;
border-radius: 50%;
position: absolute;
bottom: 200rpx;
left: 50%;
transform: translate(-50%, 0);
.icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.footercolora {
width: 150rpx;
height: 150rpx;
background-color: red;
border-radius: 50%;
position: absolute;
bottom: -1120rpx;
left: 80%;
transform: translate(-50%, 0);
position: relative;
.icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.footercolor {
width: 150rpx;
height: 150rpx;
background-color: green;
border-radius: 50%;
position: absolute;
bottom: -1280rpx;
left: 20%;
transform: translate(-50%, 0);
position: relative;
.icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.wraperXiao {
width: 400rpx;
height: 300rpx;
position: fixed;
top: 50rpx;
right: 50rpx;
}
.wraperWai {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
.wraperWaia {
width: 100%;
height: 100%;
.wraperWaiabenyu {
width: 100%;
height: 100%;
}
}
}
.btn {
width: 100%;
height: 50rpx;
background-color: red;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.layu {
width: 150rpx;
height: 150rpx;
border: 2rpx solid #000;
}
.benyu {
width: 300rpx;
height: 100rpx;
border: 2rpx solid #000;
}
button {
width: 200rpx;
float: left;
}
}
/*#endif*/
</style>