在这里插入图片描述
我们在用Uniapp对接萤石云监控的时候发现,用默认的index.html静态页面价ezuikit.js,在发布APP的时候可以,但是在小程序中就会出现上图的情况,在开发工具中可以查看,但是上传小程序就无法打开了。
在这里插入图片描述
使用小程序插件后,就能实现这样的效果
在这里插入图片描述
那么具体实现步骤和代码是什么,小编现在就将代码放出来:

一、申请添加小程序插件

在这里插入图片描述
登录您的小程序微信公众平台,进入设置页,在第三方设置->插件管理->添加插件中申请ezplayer插件,申请的插件appId为【wxf2b3a0262975d8c2】。

二、在uniapp开发工具中引入插件

在这里插入图片描述

如图上方,小程序中加入插件应用信息。

 "plugins" : {
            "ezplayer" : {
                "version" : "1.0.1",
                "provider" : "wxf2b3a0262975d8c2"
            }
        },

三、页面中应用

在这里插入图片描述

如上图中,在需要展示视频监控的页面加入如上代码

"mp-weixin": {
					        "usingComponents": {
					              "ezplayer": "plugin://ezplayer/ezplayer"
					         }
					 }

四,具体uniapp页面代码

在这里插入图片描述
具体代码如下:

<ezplayer id="ezplayer" accessToken="at.7yn9oo2i1qrmsimxd6yiltqv0jfrlxxs-26lkq91kft-1ph3ueq-2qmsohjq4" url="rtmp://open.ys7.com/BE6635579/1/live" plugins="talk,voice,capture,ptz,privacy,mirror"
	      bind:handleError="handleError"  />

五:调试发布

在微信开发者工具点击播放视频,此时页面弹出提示:网络异常,控制台提示:开始播放失败 {errMsg: “operateLivePlayer:fail no permission”}

注意:这是一个坑!!!可不必理会,打开微信开发者工具的预览 即可

在这里插入图片描述
遇到这里,大家是不用管的,只要发布了小程序,用测试版查看就会正常

在这里插入图片描述
就会实现这样的效果,希望上面代码能帮助到大家

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐