更新记录

1.0.1（2024-07-23）

1.登录接口添加支持设备类型VMS。

1.0.0（2023-11-12）

发布插件

平台兼容性

原生插件通用使用流程：

1. 购买插件，选择该插件绑定的项目。
2. 在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
3. 根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。
4. 打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项：使用HBuilderX2.7.14以下版本，如果同一插件且同一appid下购买并绑定了多个包名，提交云打包界面提示包名绑定不一致时，需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择

概述

• 支持监控摄像头直播
• 支持监控摄像头回放
• 支持登录鉴权

登录鉴权

 const plugin = uni.requireNativePlugin('uniplugin-UniviewModule')
 login() {
    const _this = this;
    plugin.login({
            ip: _this.ip, //ip地址
            port: _this.port, //端口号
            username: _this.username, //账号
            password: _this.password, //密码
            deviceType:'VMS'  //设备类型
        },
        (ret) => {
            _this.loginresult = JSON.stringify(ret);
            if (ret.code == 200) {
                uni.showToast({
                    title: '登录成功'
                })
                uni.navigateTo({
                    url: '/pages/jump/jump?userID=' + ret.data
                })
            } else {
                uni.showToast({
                    title: '登录失败'
                })
            }
        })
 }

直播

  <template>
    <view>
        <scroll-view>
        <view>
            <uni-grid :column="2" :showBorder="false" :square="false">
                <block v-for="(item,index) in channel">
                    <uni-grid-item>
                        <univiewPlayerComponent style="width:200; height:200;margin: 15px;" :ref="'player'+item">
                        </univiewPlayerComponent>
                    </uni-grid-item>
                </block>
            </uni-grid>
        </view>
        <picker :range="channel" @change="changePcikerVal">
            点击选择通道: {{ channel[index] }}
        </picker>
        <button @click="startPlay">播放</button>
        <button @click="stopPlay">停止</button>
        <p>{{result}}</p>
        </scroll-view>
    </view>
  </template>

  <script>
    const plugin = uni.requireNativePlugin('uniplugin-UniviewModule')

    export default {
        data() {
            return {
                index: 0,
                userID: '',
                channel: [],
                result: '',
                channelID: 1,
                playerID: 0
            }
        },
        onLoad(options) {
            this.userID = options.userID;
            this.channel = options.channel.split(',');
        },
        onUnload() {
            //退出页面时停止
            this.stopPlay()
        },
        onBackPress() {
            this.stopPlay()
        },
        methods: {
            changePcikerVal(e) {
                this.index = e.detail.value;
                this.channelID = this.channel[this.index]
            },
            startPlay() {
                const _this = this;
                const ref = this.$refs['player' + this.channelID][0]
                ref.onLivePlay(this.userID, this.channelID + "", (ret) => {
                    _this.playerID = ret.data;
                })
            },
            stopPlay() {
                const ref = this.$refs['player' + this.channelID][0]
                ref.onLiveStop(this.playerID + "")
            },
        }
    }
  </script>

回放

   <template>
    <view>
        <scroll-view>
        <view v-if="channel.length>0">
            <uni-grid :column="2" :showBorder="false" :square="false">
                <view v-for="(item,index) in channel">
                    <uni-grid-item>
                        <univiewPlayerComponent style="width:200; height:200;margin: 15px;" :ref="'player'+item">
                        </univiewPlayerComponent>
                    </uni-grid-item>
                </view>
            </uni-grid>
        </view>
        <picker :range="channel" @change="changePcikerVal">
            点击选择通道: {{ channel[index] }}
        </picker>
        开始日期：<input type="text" placeholder="输入开始时间 例如:2023-09-09 01:00:00" v-model="stime" class="input-ui"  />
        结束日期：<input type="text" placeholder="输入结束时间 例如:2023-09-10 23:00:00" v-model="etime" class="input-ui"  />
        <button @click="queryRecord">查询回放记录(根据日期查询)</button>
        <p>{{result}}</p>
        <picker :range="playbackRecord" @change="changeRecord">
            <p style="height: 50px;">点击选择回放记录>>: {{ playbackRecord[recordIndex] }} </p>
        </picker>   
        <button @click="startPlay">播放(先选择回放记录)</button>
        <button @click="pausePlay">暂停</button>
        <button @click="resumePlay">恢复播放</button>
        <button @click="stopPlay">停止</button>
        <button @click="forward">快进</button>
        <button @click="backward">后退</button>
        </scroll-view>
    </view>
   </template>

   <script>

    export default {
        data() {
            return {
                index: 0,
                userID: '',
                channel: [],
                playbackRecord:[],
                recordIndex: 0,
                result: '',
                channelID: 1,
                playerID: 0,
                stime:'2023-09-09 01:00:00',
                etime:'2023-09-10 23:00:00',
            }
        },
        onLoad(options) {
            this.userID = options.userID;
            this.channel = options.channel.split(',');;
        },
           onUnload() {
            //退出页面时停止
            this.stopPlay()
        },
        onBackPress() {
            this.stopPlay()
        },
        methods: {
            changePcikerVal(e) {
                this.index = e.detail.value;
                this.channelID = this.channel[this.index]
            },
            changeRecord(e) {
                this.recordIndex = e.detail.value;
                const ref = this.$refs['player' + this.channelID][0]
                ref.onSelectRecord(this.channelID,this.recordIndex,(ret) => {
                    console.log("===Record=="+JSON.stringify(ret))
                })
            },
            startPlay() {
                const _this = this;
                const ref = this.$refs['player' + this.channelID][0]
                ref.onPlay(this.userID, this.channelID,(ret) => {
                    console.log("===onPlay=="+JSON.stringify(ret))
                    _this.playerID = ret.data;
                })
            },
            stopPlay() {
                const ref = this.$refs['player' + this.channelID][0]
                ref.onStop(this.playerID + "")
            },
            pausePlay() {
                const ref = this.$refs['player' + this.channelID][0]
                ref.onPause(this.playerID + "")
            },
            resumePlay() {
                const ref = this.$refs['player' + this.channelID][0]
                ref.onResume(this.playerID + "")
            },
            forward() {
                const ref = this.$refs['player' + this.channelID][0]
                ref.onForward(this.playerID + "")
            },
            backward() {
                const ref = this.$refs['player' + this.channelID][0]
                ref.onBackward(this.playerID + "")
            },
            queryRecord() {
                const _this=this;
                let recordNumber = 50;
                const ref = this.$refs['player' + this.channelID][0]
                ref.onQueryRecord(this.userID,this.channelID,this.stime,this.etime,recordNumber,
                    (ret) => {
                        _this.result=JSON.stringify(ret)
                        console.log("===onQueryRecord=="+JSON.stringify(ret))
                        if(ret.code == 200){
                            for(let i=0;i<ret.data.length;i++){
                                _this.playbackRecord[i]=ret.data[i];
                            }
                        }
                    })
            },
        }
    }
   </script>

   <style>
     .input-ui {
        border: 1upx solid #dadbde;
        padding: 12upx 18upx;
        border-radius: 8upx;
        font-size: 30upx;
        color: rgb(48, 49, 51);
        border-color: #3c9cff !important;
        color: rgb(48, 49, 51) !important;
        margin: 20px;
        height: 40px;
    }
   </style>