<template>
<view class="content">
<view class="contentXiao">
<zego-local-view>zego-local-view>
<button class="btna" @click="go()">开始button>
<view class="contentXiaoNei">
view>
<button class="btn">1button>
view>
view>
template>
<script>
// 导入
import ZegoExpressEngine from '@/components/zego-ZegoExpressUniApp-JS/lib/ZegoExpressEngine';
export default {
data() {
return {
title: 'Hello',
}
},
onLoad() {
},
methods: {
// 登录
go() {
// 采用通用场景
const profile = {
appID: 571429559,
appSign: '89a0fe01f268891b35e8fea3be39a9f8d3e8931c3391a862b4e8f28ad6f5ee0f',
scenario: 0
};
ZegoExpressEngine.createEngineWithProfile(profile)
// ---------------------------------------------------------------------------------------------------------
let roomConfig = {};
//token 由用户自己的服务端生成,为了更快跑通流程,也可以通过即构控制台获取临时的音视频 token
roomConfig.token =
"04AAAAAGOruVYAEG9yem9heXQ5a2diNmozZmMAsAGVzoeWLVGAbq5rxOhqtIeRA/yQBs94aXqvVjPB97iz09ihcJCknmM8OZarcX5zvcWPIDFiqGXvbHLZj8B3YSaUbU1RZEmv+fM9fF36ba35tpJuSdTAU3gT5uWnMWqNKOyrk4RBtLZNiBgBcydaN2844wOPKpB/56QN/Vai+tbd+4Dp6xcwnErNVJd7EHbbnYZagg9NTQbGo+lXpqPSZfrImcpbEJ93xgevYU/Kcg5Y";
// 只有传入 “isUserStatusNotify” 参数取值为 “true” 的 ZegoRoomConfig,才能收到 onRoomUserUpdate 回调。
roomConfig.isUserStatusNotify = true;
// 登录房间
// 开始登录房间
ZegoExpressEngine.instance().loginRoom('room1', {
'userID': '123456',
'userName': 'admin123'
}, roomConfig);
/** 开始预览 */
ZegoExpressEngine.instance().startPreview();
/** 开始推流 */
ZegoExpressEngine.instance().startPublishingStream("456");
}
}
}
script>
<style lang="scss">
.content {
width: 100vw;
height: 100vh;
.contentXiao {
width: 100%;
height: 100%;
background-color: #fff;
position: relative;
.btna {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
background-color: green;
text-align: center;
line-height: 100rpx;
color: #fff;
position: absolute;
top: 20rpx;
left: 0;
}
.contentXiaoNei {
width: 270rpx;
height: 410rpx;
background-color: #ccc;
position: absolute;
right: 0;
}
.btn {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
background-color: red;
text-align: center;
line-height: 100rpx;
color: #fff;
position: absolute;
bottom: 20rpx;
left: 50%;
transform: translate(-50%, 0);
}
}
}
style>
components: {ZegoExpressEngine},
https://blog.csdn.net/ZEGO123/article/details/125999385
借鉴下
https://www.cnblogs.com/zegoinfo/p/14281263.html
看起来你正在使用小程序中的组件,但是没有正确引入它。
要正确引入组件,你需要在代码中执行以下步骤:
import zegoLocalView from './components/zego-local-view/zego-local-view.vue';
export default {
components: {
zegoLocalView
},
// ...
}
然后,你就可以在模板中使用自定义标签 来使用这个组件了。
如果你正在使用的是小程序的插件,则需要在 "app.json" 文件的 "usingComponents" 选项中注册组件,例如:
"usingComponents": {
"zego-local
view": "./components/zego-local-view/zego-local-view"
}
然后,你就可以在模板中使用自定义标签 <zego-local-view></zego-local-view>
来使用这个插件了。
请注意,如果你在使用小程序中的递归组件(即组件中使用自身组件的组件),则需要在组件的选项中提供 "name" 属性。例如:
export default {
name: 'zego-local-view',
// ...
}
Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
报错含义:
未知的自定义元素:-是否正确注册了组件?对于递归组件,请确保提供“name”选项。
根据你的报错,找到一篇同样的报错的实例供你参考,链接:https://blog.csdn.net/songJunFeng1/article/details/114537231
需要在 main.js 中全局注册这个组件,方法如下:
在 main.js 中添加以下代码:
import ZegoLocalView from '@/components/zego-local-view';
Vue.component('zego-local-view', ZegoLocalView);
如果使用了其他的组件,也需要在 main.js 中全局注册。
另外需要确保组件名称与模板中的组件名称一致。如果使用的是基于组件的文件名的自动解析,则需要确保文件名的大小写与模板中的组件名称一致。
此外请确保组件已经正确定义,包括 template、script 和 style 块。
这个 标签是自定义的 HTML 标签,不是 HTML 的原生标签。
如果要在 Vue 项目中使用这个标签,你需要在项目中先定义这个标签,然后才能使用。
你可以在 Vue 组件中定义这个标签,然后使用 Vue 的 template 标签在组件的模板中使用这个标签。
具体方法如下:
在项目中新建一个 Vue 组件,并在组件中定义这个 标签。
在组件的 template 中使用这个标签。
在需要使用这个组件的地方,使用 Vue 的 component 标签引入这个组件。
具体实现可以参考以下代码:
// 定义组件
Vue.component('zego-local-view', {
template: '
// 使用组件
https://ext.dcloud.net.cn/plugin?id=7748 使用的uniapp插件,直接去看官方文档啊
有没有到ZEGO官网申请了appid和做了token鉴权?登录房间时必须 使用 Token 鉴权
启动本地预览 如果希望看到本端画面,可使用 <zego-local-view> 标签设置预览视图,并调用 startPreview 接口启动本地预览
<template>
<zego-local-view style="height: 403.84rpx;flex: 1;"></zego-local-view>
</template>
js部分:
/** 开始预览 */
ZegoExpressEngine.instance().startPreview()
在使用 Web 开发技术(如 Vue.js 或 Angular )时,通常会遇到此错误消息。它指示框架无法识别代码中使用的自定义 HTML 元素。
此错误有几个潜在原因:
自定义元素可能未在框架中正确注册。例如,在 Vue.js 中,你需要使用 Vue.component() 方法来注册一个自定义组件。在 Angular 中,您需要使用 @Component 装饰器来定义组件。
自定义元素可能未正确导入或包含在项目中。确保元素已正确导入或包含在项目中,并且导入路径正确。
如果使用递归组件(引用自身的组件),则需要在组件定义中提供 name 选项。这是因为框架需要知道组件的名称以避免无限循环。
如果遇到此错误,请尝试通过检查这些潜在原因来解决问题。如果仍然无法解决问题,请查看正在使用的特定 Web 开发框架的文档以获取有关如何正确注册和使用自定义组件的详细信息可能会有所帮助。