UOB Direct front-end access control

Here version Dahua direct control of the introduction of WEB3.2personal feeling this plug in the daily development of the api to do is still very good, then introduce the features of the version of the control, live some of the points of access and encountered question, if you want to learn more, please visit anthology - vue integrated surveillance video .

Feature

• Dahua web3.2 control can be said to be very typical (old) of the front end of the playback controls, through the <object>label controls introduced by <script for="..." event="...">or built- AddEventListenerbinding event.
• web3.2 api return value is the standard, the successful return true, failure to return false.
• web3.2 api is the synchronization method.
• first set the preview mode before web3.2 play, as detailed below playing a live section.
• web3.2 control does not support a screenshot (black question mark face) by api.

Secondary development

Access

Because Dahua web3.2 did not do the second package of plug-ins, so we need to add <object>tags. Because there is demand for a multi-plug switch, so there needs to be inserted automatically by the code.

insertDom() {
    const { ele } = this.options
    let object = parseToDOM(`<object id="ocx" width="100%" height="100%" classid="CLSID:7F9063B6-E081-49DB-9FEC-D72422F2727F">
                            </object>`
                            )
    document.querySelector(ele).appendChild(object)
    return document.querySelector(`${ele} > #ocx`)
}

parseToDOM(str) {
    let div = document.createElement("div")
    div.innerHTML = str
    return div.childNodes[0]
}

Get here first to <object>label domthe object, and then inserted into the specified elelower element, and finally returns to the plug object.

Plug-in is loaded

Dahua web3.2 control does not provide a direct way to determine whether the plug-in is loaded, I did not find in the document, there are big brother knows please tell me, thank you . So spend directly target a return here to check whether the loading is complete.

init() {
    this.videoObj = this.insertDom()
    return this.videoObj ? true : false
}

Log Equipment

web3.2 is very simple to log out, log in using LoginDeviceExthe method, using the logout LogoutDevicemethod can be. LoginDeviceExAccepted methods are the ip address, port number, user name, password and logon type . Log type is an integer representing different login way, the most commonly used is 0(TCP login mode).

login(videoInfo) {
    let { ip, port, username, password, logintype } = videoInfo
    return this.videoObj.LoginDeviceEx(ip, port, username, password, logintype)
}

LoginDeviceExThe return value is not simple true/false, but an error code 0means that the login is successful, other error codes correspond to the following table:

this.ERROR_CODE = {
    1: '密码不正确',
    2: '用户名不存在',
    3: '登录超时',
    4: '帐号已登录',
    5: '帐号已被锁定',
    6: '帐号被列为黑名单',
    7: '资源不足，系统忙',
    8: '子连接失败',
    9: '主连接失败,视频源无法访问',
    10: '超过最大用户连接数'
}

Real Player

web3.2 required before playing the first by SetModuleModethe method of setting the playback mode 1(preview mode), before it passes through ConnectRealVideoExplaying the video method, which accepts two parameters, a channel number parameter 1, parameter 2 is a stream type, the master key stream 1, subcode stream 2.

realPlay(videoInfo) {
    try {
        let { channel, streamType } = videoInfo
        //设为预览模式
        this.videoObj.SetModuleMode(1) 
        //连接主线视屏
        this.videoObj.ConnectRealVideoEx(channel, streamType) 
        return true
    }
    catch (e) {
        return false
    }
}

Set the number of window

web3.2 settings window number of a bit of trouble, because it is through the SetWndStatemethod takes more than one parameter jsonstring set, and the development of documentation for jsonthe format string also said that even less, finally picking demo to find the correct format :

setWindowNum(windowNum) {
    try {
        this.videoObj.SetWndState(JSON.stringify({ 
            "WndState": { 
                "IsFullScreen": false, 
                "PicWndIndex": 0, 
                "PicWndMode": 2, 
                "PicWndNum": 0, 
                "VideoWndIndex": 0, 
                "VideoWndMode": 1, 
                "VideoWndNum": windowNum
            } 
        }))
        return true
    }
    catch (e) {
        return false
    }
}

to sum up

Dahua direct control of web3.2 api set of fairly standard, some parts of the document is not perfect, need more binding demo code development.