更新记录

1.1.0（2025-05-09）

更新基本版本

1.0.0（2025-05-09）

插件发布

平台兼容性

uni-app(4.06)

uni-app x(4.61)

1.1.0（2025-05-09）

更新基本版本

1.0.0（2025-05-09）

插件发布

最新海康综合安防管理平台插件***版本（长期维护，可接单）

请试用合适再购买 请试用合适再购买 请试用合适再购买

有任何使用问题，请***私聊我

适用***版本，nvue页面使用

插件使用

1.购买插件，选择该插件绑定的项目 2.根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能 3.打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。 4.开发完毕后正式云打包

复制代码<template>
    <view>
        <dn-hikvision ref="dnPlayer" style="height: 300px;background-color: black;"></dn-hikvision>
        <button @tap="start()">开始预览</button>
        <button @tap="rePlayStart()">开始回放</button>
        <button @tap="resume()">继续播放</button>
        <button @tap="pause()">暂停播放</button>
        <button @tap="stop()">停止播放</button>
        <button @tap="seekPlayback()">按绝对时间回放定位</button>
        <button @tap="getOSDTime()">查询当前播放时间</button>
        <button @tap="getPlaybackSpeed()">获取播放倍数</button>
        <button @tap="setPlaybackSpeed()">设置播放倍数</button>
        <button @tap="screenshot()">播放抓图</button>
        <button @tap="enableAudio()">声音控制</button>
        <button @tap="changeStream()">预览码流平滑切换</button>
        <button @tap="startVoiceTalk()">开始语音对讲</button>
        <button @tap="stopVoiceTalk()">停止语音对讲</button>
        <button @tap="startRecord()">开启本地录像</button>
        <button @tap="stopRecord()">停止本地录像</button>
        <button @tap="openDigitalZoom()">开启电子放大</button>
        <button @tap="closeDigitalZoom()">关闭电子放大</button>
        <button @tap="setFishEyeEnable()">鱼眼矫正</button>
        <button @tap="setFishEyeMode()">设置鱼眼矫正方式</button>
        <button @tap="setOriginalFECParam()">设置初始鱼眼PTZ参数</button>
        <button @tap="handleFishEyeCorrect()">处理鱼眼矫正参数</button>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                url: 'rtsp://xxxxxxxx/openUrl/60geEo0',
                playbackUrl: 'rtsp://xxxxxxx/openUrl/nzXMVaw',
                voiceUrl: 'rtsp://xxxxxxxx/openUrl/RIiemly'
            }
        },

        methods: {

            /**
             * 开启预览
             * realPlayUrl为预览短链接，需要通过调用openApi获取
             */
            start() {
                var params = {
                    'hardDecode': true,
                    'privateData': true
                }
                this.$refs.dnPlayer.initPlugin((res) => {
                    console.log(JSON.stringify(res))
                })
                this.$refs.dnPlayer.startPlay(this.url)
            },
            /**
             * playbackUrl为回放短链接，需要通过调用openApi获取
             * 开启回放
             * {startTime,endTime}
             * 时间格式为 "yyyy-MM-dd'T'HH:mm:ss.SSSZ",例如："2018-05-07T14:41:57.819+03:00"
             */
            rePlayStart() {
                var params = {
                    'hardDecode': true,
                    'privateData': true
                }
                this.$refs.dnPlayer.initPlugin(params, (res) => {
                    console.log(JSON.stringify(res))
                })

                this.$refs.dnPlayer.startReplay(this.playbackUrl, {
                    "startTime": "2025-05-06T00:00:00.000+3:00",
                    "endTime": "2025-05-06T10:59:59.000+3:00"
                })
            },
            /**
             * 继续播放
             */
            resume() {
                this.$refs.dnPlayer.resume()
            },
            /**
             * 暂停播放
             */
            pause() {
                this.$refs.dnPlayer.pause()
            },
            /**
             * 停止播放
             */
            stop() {
                this.$refs.dnPlayer.stop()
            },
            /**
             * 在录像回放的开始时间和结束时间之间进行播放定位控制。
             * 使用按绝对时间回放定位接口之前，必须先调用开始回放接口
             * 定位播放时，时间格式为'yyyy-MM-dd'T'HH:mm:ss.SSSZ'
             * 
             */
            seekPlayback() {
                this.$refs.dnPlayer.seekPlayback("2025-05-06T02:00:00.000+3:00")
            },

            getOSDTime() {
                this.$refs.dnPlayer.getOSDTime((res) => {
                    console.log(res)
                })
            },
            /**
             * 获取当前回放倍速，默认一倍速
             */
            getPlaybackSpeed() {
                this.$refs.dnPlayer.getPlaybackSpeed((res) => {
                    console.log(res)
                })
            },
            /**
             * 设置回放的播放速度，默认一倍速
             * 
             *0.125  PlaybackSpeed.ONE_EIGHTH 1/8倍速
                0.25    PlaybackSpeed.QUARTER 1/4倍速
                0.5 PlaybackSpeed.HALF 1/2倍速
                1.0 PlaybackSpeed.NORMAL 1倍速
                2.0 PlaybackSpeed.DOUBLE 2倍速
                4.0 PlaybackSpeed.FOUR 4倍速
                8.0 PlaybackSpeed.EIGHT 8倍速
             * 
             */
            setPlaybackSpeed() {
                this.$refs.dnPlayer.setPlaybackSpeed(2.0, (res) => {
                    console.log(res)
                })
            },
            /**
             * 预览回放抓图
             * 返回0代表操作成功，其他为错误码
             * 在视频预览或回放时，从视频中抓取一帧，并保存至指定的本地文件路径
             */
            screenshot() {
                var bitmapPath = plus.io.convertLocalFileSystemURL("_doc/bitmapPath.png"); //要保存的图片绝对 路径(含文件名)
                var thumbnailPath = plus.io.convertLocalFileSystemURL("_doc/thumbnailPath.png"); //要保存的缩略图图片绝对路径(含文件名)
                this.$refs.dnPlayer.screenshot(bitmapPath, thumbnailPath, (res) => {
                    console.log(res)
                })
            },
            /**
             * 声音控制
             * 返回0代表操作成功，其他为错误码
             */
            enableAudio() {
                var isOpenAudio = true
                this.$refs.dnPlayer.enableAudio(isOpenAudio, (res) => {
                    console.log(res)
                })
            },
            /**
             * 预览码流平滑切换
             * 返回0代表操作成功，其他为错误码
             */
            changeStream() {
                //0:高清 1:标清 2: 流畅
                var quality = 0
                this.$refs.dnPlayer.changeStream(quality, (res) => {
                    console.log(res)
                })
            },
            /**
             * talkUrl为对讲短链接，需要通过调用openApi获取
             * headers 其他请求参数
             * 1. 如需传递token，请在headers中增加Token赋值。
             */
            setVoiceDataSource() {
                var header = {}
                this.$refs.dnPlayer.setVoiceDataSource(this.voiceUrl, header)
            },
            /**
             *  播放结果回调status 共三种状态：SUCCESS（开启对讲成功）、FAILED（开启对讲失败）、EXCEPTION（取流异常）错误码，只有 FAILED 和 EXCEPTION 才有值
             */
            setVoiceStatusCallback() {
                this.$refs.dnPlayer.setVoiceStatusCallback((res) => {
                    console.log(JSON.stringify(res))
                })
            },
            /**
             * 先设置回调再播放
             * 开启语音对讲
             */
            startVoiceTalk() {
                this.setVoiceDataSource()
                this.setVoiceStatusCallback()
                this.$refs.dnPlayer.startVoiceTalk()
            },

            /**
             * 停止语音对讲
             */
            stopVoiceTalk() {
                this.$refs.dnPlayer.stopVoiceTalk()
            },
            /**
             * 开启本地录像
             * 使用此接口保存的录像文件，只可以使用SDK进行播放
             * mediaFilePath 要保存的录像文件绝对路径（含文件名），例：“/SnapShot/测试监控点.mp4”。
             * 返回0代表操作成功，其他为错误码
             */
            startRecord() {
                //使用此接口保存的录像文件，只可以使用SDK进行播放
                var mediaFilePath = plus.io.convertLocalFileSystemURL("_doc/mediaFilePath.mp4"); //要要保存的录像文件绝对路径(含文件名)

                this.$refs.dnPlayer.startRecord(mediaFilePath, (res) => {
                    console.log(JSON.stringify(res))
                })
            },

            /**
             * 开启本地录像
             * mediaFilePath 要保存的录像文件绝对路径（含文件名），例：“/SnapShot/测试监控点.mp4”。
             * 返回0代表操作成功，其他为错误码
             */
            startRecordAndConvert() {
                var mediaFilePath = plus.io.convertLocalFileSystemURL("_doc/mediaFilePath.mp4"); //要要保存的录像文件绝对路径(含文件名)
                this.$refs.dnPlayer.startRecordAndConvert(mediaFilePath, (res) => {
                    console.log(JSON.stringify(res))
                })
            },

            stopRecord() {
                this.$refs.dnPlayer.stopRecord((res) => {
                    console.log(JSON.stringify(res))
                })
            },
            /**
             * original 最初的显示区域的坐标矩形  
             * target 目标显示区域的坐标矩形
             * 返回0代表操作成功，其他为错误码
             * 电子放大支持倍率为1-10倍。
             */
            openDigitalZoom() {
                this.$refs.dnPlayer.openDigitalZoom({
                    'left': 0,
                    'top': 0,
                    'right': 50,
                    'bottom': 50,
                }, {
                    'left': 0,
                    'top': 0,
                    'right': 100,
                    'bottom': 100,
                }, (res) => {
                    console.log(JSON.stringify(res))
                })
            },
            /**
             * 关闭电子放大
             * 返回0代表操作成功，其他为错误码
             */
            closeDigitalZoom() {
                this.$refs.dnPlayer.closeDigitalZoom((res) => {
                    console.log(JSON.stringify(res))
                })
            },
            /**
             * 电子放大和鱼眼不能同时开启
             * 开启预览后，设置是否开启鱼眼矫正效果；
             * 返回0代表操作成功，其他为错误码
             * enable boolean  开启或关闭鱼眼矫正，只作用于一路预览。
             */
            setFishEyeEnable() {
                var enable = true;
                this.$refs.dnPlayer.setFishEyeEnable(enable, (res) => {
                    console.log(JSON.stringify(res))
                })
            },
            /**
             * 
             * 设置鱼眼矫正方式
             * 返回0代表操作成功，其他为错误码
             * 矫正方式，通过注解定义。
             *
                0  CorrectType.FEC_CORRECT_PTZ PTZ
                1   CorrectType.FEC_CORRECT_180 180°矫正
                2   CorrectType.FEC_CORRECT_360 360°全景矫正
                3   CorrectType.FEC_CORRECT_LAT 维度展开
                4   CorrectType.FEC_CORRECT_SEM 半球
                5   CorrectType.FEC_CORRECT_CYC 圆柱
                6   CorrectType.FEC_CORRECT_PLA 小行星
                7   CorrectType.FEC_CORRECT_CYC_SPL 剪开圆柱

                    安装方式，通过注解定义。
                0   PlaceType.FEC_NULL 无安装
                1   PlaceType.FEC_PLACE_WALL 壁装
                2   PlaceType.FEC_PLACE_FLOOR 底装
                3   PlaceType.FEC_PLACE_CEILING 顶装

                安装方式与矫正方式关系表
                矫正方式 壁装 底装 顶装
                FEC_CORRECT_PTZ 支持 支持 支持
                FEC_CORRECT_180 支持 支持
                FEC_CORRECT_360 支持 支持 支持
                矫正方式 壁装 底装 顶装
                FEC_CORRECT_LAT 支持
                FEC_CORRECT_SEM 支持 支持
                FEC_CORRECT_CYC 支持 支持
                FEC_CORRECT_CYC_SPL 支持 支持
                FEC_CORRECT_PLA 支持 支持

             */
            setFishEyeMode() {
                var correctType = 0;
                var placeType = 0;
                this.$refs.dnPlayer.setFishEyeMode(correctType, placeType, (res) => {
                    console.log(JSON.stringify(res))
                })
            },
            /**
             * 设置初始鱼眼PTZ参数
             * 返回0代表操作成功，其他为错误码
             * originalX float  初始X坐标值
                originalY float  初始Y坐标值
                surfaceWidth int  当前播放View的宽度
                surfaceHeight int  当前播放View的高度
             */
            setOriginalFECParam() {
                var originalX = 1.0
                var originalY = 1.0
                var surfaceWidth = 200
                var surfaceHeight = 100
                this.$refs.dnPlayer.setOriginalFECParam(originalX, originalY, surfaceWidth, surfaceHeight)
            },

            /**
            * 处理鱼眼矫正参数
            * 打开鱼眼功能后，根据手势的不同，设置不同的矫正参数，展示对应的效果
            * 返回0代表操作成功，其他为错误码
             * isZoom boolean  是否缩放
            zoom float  缩放系数
            zoom3D float  3D缩放比例
            curX float  当前X坐标值
            curY float  当前Y坐标值
             */
            handleFishEyeCorrect() {
                var isZoom = true
                var zoom = 1.0
                var zoom3D = 1.0
                var curX = 0
                var curY = 0
                this.$refs.dnPlayer.handleFishEyeCorrect(isZoom, zoom, zoom3D, curX, curY)
            },
        }
    }
</script>

<style>

</style>