前言
项目开发中使用萤石云平台提供的直播地址获取视频流，与Web端开发不同的是，想要通过该方法控制摄像头移动、放大和缩小需要使用Http接口提供的方法完成相应的操作。
萤石云http接口(在设备中查找云台):/doc/zh/book/index/device_ptz.html#device_ptz-api3
使用海康威视设备在Web端显示实时视频 /qq_38289815/article/details/84779753
海康威视Web端视频开发/qq_38289815/article/details/92428396
Web端和移动端接入萤石云平台的视频数据/qq_38289815/article/details/92615824
源码下载地址/download/advance/16200119
1.开始云台控制
接口功能：对设备进行开始云台控制，开始云台控制之后必须先调用停止云台控制接口才能进行其他操作，包括其他方向的云台转动。
请求地址：/api/lapp/device/ptz/start
请求方式：POST
请求参数：
HTTP请求报文
POST /api/lapp/device/ptz/start HTTP/1.1Host: Content-Type: application/x-www-form-urlencodedaccessToken=at.4g01l53x0w22xbp30ov33q44app1ns9m&deviceSerial=502608888&channelNo=1&direction=2&speed=1返回数据{"code": "200","msg": "操作成功!"}
2.停止云台控制
接口功能：设备停止云台控制。
提示：建议停止云台接口带方向参数。
HTTP请求报文
POST /api/lapp/device/ptz/stop HTTP/1.1Host: Content-Type: application/x-www-form-urlencoded
accessToken=at.25ne3gkr6fa7coh34ys0fl1h9hryc2kr&deviceSerial=568261888&channelNo=1&direction=1
返回数据
{
"code": "200",
"msg": "操作成功!"
}
Html：
<divclass="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" οnclick="control(0)"></button>
<button class="layui-icon layui-icon-down" lay-submit="" lay-filter="add" οnclick="control(1)"></button>
<button class="layui-icon layui-icon-left" lay-submit="" lay-filter="add" οnclick="control(2)"></button>
<button class="layui-icon layui-icon-right" lay-submit="" lay-filter="add" οnclick="control(3)"></button>
<button class="layui-icon icon-pause" lay-submit="" lay-filter="add" οnclick="stop()"></button>
<button class="layui-icon icon-plus-circle" lay-submit="" lay-filter="add" οnclick="control(8)"></button>
<button class="layui-icon icon-minus-circle" lay-submit="" lay-filter="add" οnclick="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('/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('/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>
