萤石云摄像头Http接口云台控制开发

前言

项目开发中使用萤石云平台提供的直播地址获取视频流，与Web端开发不同的是，想要通过该方法控制摄像头移动、放大和缩小需要使用Http接口提供的方法完成相应的操作。

萤石云http接口(在设备中查找云台):http://open.ys7.com/doc/zh/book/index/device_ptz.html#device_ptz-api3 

使用海康威视设备在Web端显示实时视频  https://blog.csdn.net/qq_38289815/article/details/84779753

海康威视Web端视频开发 https://blog.csdn.net/qq_38289815/article/details/92428396

Web端和移动端接入萤石云平台的视频数据 https://blog.csdn.net/qq_38289815/article/details/92615824

1.开始云台控制

接口功能：对设备进行开始云台控制，开始云台控制之后必须先调用停止云台控制接口才能进行其他操作，包括其他方向的云台转动。

请求地址：https://open.ys7.com/api/lapp/device/ptz/start

请求方式：POST

请求参数：

参数名	类型	描述	是否必选
accessToken	String	授权过程获取的access_token	Y
deviceSerial	String	设备序列号,存在英文字母的设备序列号，字母需为大写	Y
channelNo	int	通道号	Y
direction	int	操作命令：0-上，1-下，2-左，3-右，4-左上，5-左下，6-右上，7-右下，8-放大，9-缩小，10-近焦距，11-远焦距	Y
speed	int	云台速度：0-慢，1-适中，2-快	Y

HTTP请求报文
POST /api/lapp/device/ptz/start HTTP/1.1Host: open.ys7.comContent-Type: application/x-www-form-urlencoded
accessToken=at.4g01l53x0w22xbp30ov33q44app1ns9m&deviceSerial=502608888&channelNo=1&direction=2&speed=1
返回数据
{
    "code": "200",
    "msg": "操作成功!"
}

 

2.停止云台控制

接口功能：设备停止云台控制。

请求地址：https://open.ys7.com/api/lapp/device/ptz/stop

请求方式：POST

请求参数：

参数名	类型	描述	是否必选
accessToken	String	授权过程获取的access_token	Y
deviceSerial	String	设备序列号,存在英文字母的设备序列号，字母需为大写	Y
channelNo	int	通道号	Y
direction	int	操作命令：0-上，1-下，2-左，3-右，4-左上，5-左下，6-右上，7-右下，8-放大，9-缩小，10-近焦距，11-远焦距	N

提示：建议停止云台接口带方向参数。
HTTP请求报文
POST /api/lapp/device/ptz/stop HTTP/1.1Host: open.ys7.comContent-Type: application/x-www-form-urlencoded
accessToken=at.25ne3gkr6fa7coh34ys0fl1h9hryc2kr&deviceSerial=568261888&channelNo=1&direction=1
返回数据
{
    "code": "200",
    "msg": "操作成功!"
}

Html：

<div class="layui-col-xs12 layui-col-sm4" style="color:#104E8B;">
    <div class="layuiadmin-card-text" style="width:750px;hight:750px;color:#104E8B;">
        <div class="layui-text-top" style="color:#104E8B;" ><i class="layui-icon layui-icon-video"></i>摄像头1</div>
        <video id="player1" poster="" controls playsInline webkit-playsinline autoplay style="width:100%;hight:100%;border:#000080 1px solid">
        <source src="直播地址" type="application/x-mpegURL" />
        <p class="layui-text-bottom">
        <button class="layui-icon layui-icon-up" lay-submit="" lay-filter="add" onclick="control(0)"></button>
        <button class="layui-icon layui-icon-down" lay-submit="" lay-filter="add" onclick="control(1)"></button>
        <button class="layui-icon layui-icon-left" lay-submit="" lay-filter="add" onclick="control(2)"></button>
        <button class="layui-icon layui-icon-right" lay-submit="" lay-filter="add" onclick="control(3)"></button>
        <button class="layui-icon icon-pause" lay-submit="" lay-filter="add" onclick="stop()"></button>
        <button class="layui-icon icon-plus-circle" lay-submit="" lay-filter="add" onclick="control(8)"></button>
        <button class="layui-icon icon-minus-circle" lay-submit="" lay-filter="add" onclick="control(9)"></button>
        </p>
    </div>
</div>
根据操作命令设置control的参数，操作命令：0-上，1-下，2-左，3-右，8-放大，9-缩小

Js：

<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
<link rel="stylesheet" href="../../layuiadmin/layui/font/font_2wmcsfamra2/iconfont.css">
<script src="../../layuiadmin/layui/layui.js"></script>
//这些css和layui.js可以在网上下载

<script>
    layui.config({
        base: '../../layuiadmin/'  //静态资源所在路径
    }).extend({
        index: 'lib/index'  //主入口模块
    }).use(['index', 'sample']);
    //data里面封装的就是请求的参数
    data={
        accessToken: '个人token,7天就会过期',
        deviceSerial:'个人设备号',
        channelNo:'设备通道号'
    }

    //开始控制
    var control=function (direction) {
        data.direction=direction;//控制方式
        data.speed='2';//转动速度
        layui.use(['jquery', 'layer'], function(){
            var $ = layui.$
                ,layer = layui.layer;
            $.post('https://open.ys7.com/api/lapp/device/ptz/start',data,function(res){
                if(res.code==200){
                    layer.msg(res.msg, {time: 2000});
                }else{
                    layer.msg(res.msg, {time: 2000});
                }
            },'json');
            return false;
        });
    }

    //停止转动
    var stop=function () {
        layui.use(['jquery', 'layer'], function(){
            var $ = layui.$
                ,layer = layui.layer;
            $.post('https://open.ys7.com/api/lapp/device/ptz/stop',data,function(res){
                if(res.code==200){
                    layer.msg(res.msg, {time: 2000});
                }else{
                    layer.msg(res.msg, {time: 2000});
                }
            },'json');
            return false;
        });
    }
</script>

最终展示：