RestAPI综合运用1(WEB)

# FastWeb之RestAPI综合运用1

适用平台：WEB(桌面)

# 1. 说明

采用RestAPI通讯方式，与第三方工具的API进行整合对接，实现FastWeb上应用的扩展功能。在使用本示例前，请先阅读Shinobi文档 (opens new window)以及Myrtille文档 (opens new window)安装并配置，测试相关的API的可用性。如果访问FastWeb使用的是http，则播放视频以及网页显示的链接也应使用http；如果访问FastWeb使用的是https，则播放视频以及网页显示的链接也应使用https。这样可以避免浏览器因跨域导致资源无法访问。

通过本范例学习，可以掌握Shinobi与Myrtille API的运用方式，实现JSON的解析。

# 2. 设计明细

开启FastWeb设计器，分别加入下插图之控件。或者点击左上角的[导入]选择模板文件来打开对应模板。

①：TUgURLFrame组件，控件名称为UgURLFrame。

②：TUgButton组件，控件名称为btnLogin。

③：TUgRestApi组件，控件名称为restLogin。

④：TUgRestApi组件，控件名称为restStart。

⑤：TUgButton组件，控件名称为btnStart。

⑥：TUgButton组件，控件名称为btnMonitor。

⑦：TUgRestApi组件，控件名称为restMonitor。

⑧：TUgButton组件，控件名称为btnLive。

⑨：TUgButton组件，控件名称为btnStop。

⑩：TUgRestApi组件，控件名称为restStop。

(11)：TUgButton组件，控件名称为btnMyrtilleLogin。

(12)：TUgRestApi组件，控件名称为restMyrtilleLogin。

(13)：TUgRestApi组件，控件名称为restMyrtilleLogout。

(14)：TUgButton组件，控件名称为btnMyrtilleLogout。

(15)：TUgFlvPlayer组件，控件名称为UgFlvPlayer01。

(16)：TUgMemo组件，控件名称为mmLog。

UgWebRunFrame属性设置
- Height：设置页面高度=600。
- Width：设置页面宽度=1280。
UgContainerPanel01属性设置

UgContainerPanel01用于给界面右侧显示的控件提供布局容器。
- Align：设置控件的对齐方式，设置为alRight。
- Width：设置控件的宽度，设置为400。
UgContainerPanel02属性设置

UgContainerPanel02用于给界面中显示的按钮控件提供布局容器。
- Align：设置控件的对齐方式，设置为alTop。
①UgURLFrame属性设置
- Align：设置控件的对齐方式，设置为alClient。
②btnLogin属性设置
- Caption：设置按钮上显示的文字，设置为1.登录。
③restLogin属性设置

restLogin设置的是Shinobi的登录API。
- Body：请求体的内容。打开其中的文本编辑器，在其中输入以下内容。请注意修改mail与pass后的内容为您设置的邮箱及登录密码。
```
{
    "machineID": "jsiqsju2wesqw2",
    "mail": "admin@example.com",
    "pass": "admin",
    "function": "dash"
}
```
1
2
3
4
5
6
- Content-Type：请求的内容形式，此处设置为application/json。
- Method：设置请求的方法，设置为rmPOST。
- Params：设置请求的参数，打开其中的文本编辑器，在其中输入以下内容json=true。
- Url：设置Rest服务器的地址，设置为%s。
④restStart属性设置

restStart设置的是Shinobi中摄像头的开启监视API。
- Content-Type：请求的内容形式，此处设置为application/json。
- Method：设置请求的方法，设置为rmGET。
- Url：设置Rest服务器的地址，设置为%s/%s/monitor/%s/%s/start。
⑤btnStart属性设置
- Caption：设置按钮上显示的文字，设置为开始监控。
⑥btnMonitor属性设置
- Caption：设置按钮上显示的文字，设置为2.监视器。
⑦restMonitor属性设置

restMonitor设置的是Shinobi中查看摄像头列表的API。
- Content-Type：请求的内容形式，此处设置为application/json。
- Method：设置请求的方法，设置为rmGET。
- Url：设置Rest服务器的地址，设置为%s/%s/monitor/%s。
⑧btnLive属性设置
- Caption：设置按钮上显示的文字，设置为查看监视器。
⑨btnStop属性设置
- Caption：设置按钮上显示的文字，设置为停止监控。
⑩restStop属性设置

restStop设置的是Shinobi中停止视频监控的API。
- Content-Type：请求的内容形式，此处设置为application/json。
- Method：设置请求的方法，设置为rmGET。
- Url：设置Rest服务器的地址，设置为%s/%s/monitor/%s/%s/stop。
(11)btnMyrtilleLogin属性设置
- Caption：设置按钮上显示的文字，设置为Myrtille登录。
(12)restMyrtilleLogin属性设置

restMyrtilleLogin设置的是Myrtille登录相关的API信息。
- Body：请求体的内容。打开其中的文本编辑器，在其中输入以下内容。请注意修改与的内容为远程登录的计算机的用户名及登录密码。修改的地址为网关可连接至此远程桌面服务器的地址。修改部分为网关服务器的地址。
```
{
    "User":{
        "Domain": "",
        "UserName": "{{username}}",
        "Password": "{{password}}"
    },
    "Host":{
        "HosType": 0,
        "SecurityProtocol": 0,
        "IPAddress": "{{RDPHostAddress}}"
    },
    "VM": null,
    "AllowRemoteClipboard": false,
    "AllowFileTransfer": false,
    "AllowPrintDownload": true,
    "AllowAudioPlayback": true,
    "MaxActiveGuests": 2,
    "StartProgram": null,
    "GatewayURL": "http://{{server}}/Mytrille/"
}
```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- Content-Type：请求的内容形式，此处设置为application/json。
- Method：设置请求的方法，设置为rmPOST。
- Url：设置Rest服务器的地址，设置为http://:8008/MyrtilleAdmin/ConnectionService/GetConnectionId。请在实际设置时将部分更换为Myrtille网关服务器的地址。
(13)restMyrtilleLogout属性设置

restMyrtilleLogout设置的是Myrtille登出相关的API信息。
- Content-Type：请求的内容形式，此处设置为application/json。
- Method：设置请求的方法，设置为rmGET。
- Url：设置Rest服务器的地址，设置为http:///Myrtille/api/Disconnection/Disconnect。
(14)btnMyrtilleLogout属性设置
- Caption：设置按钮上显示的文字，设置为Myrtille登出。
(15)UgFlvPlayer01属性设置
- Align：设置对齐方式，设置为alTop。
- Height：设置控件的高度，设置为240。
(16)mmLog属性设置
- Align：设置对齐方式，设置为alTop。

# 3. 程序设计

点击程序设计界面右下角的按钮，切换至单元选择界面，勾选需要使用的单元。该程式的程序需要引用MessageInfo单元。

# 3.1. 程序初始设置

初始化时设置URL以及公共变量等相关信息。

//JScript
var shinobiURL,shinobiAuthToken,shinobiGroupKey,shinobiMonitorID,myrtilleAuthToken;

...

{
  shinobiURL = "http://{{shinobi_server}}";
}

1
2
3
4
5
6
7
8

//PasScript
Var
  shinobiURL: String;
  shinobiAuthToken: String;
  shinobiGroupKey: String;
  shinobiMonitorID: String;
  myrtilleAuthToken: String;

...
Begin
  shinobiURL := 'http://{{shinobi_server}}';
End.

1
2
3
4
5
6
7
8
9
10
11
12

// Make sure to add code blocks to your code group

# 3.2. 事件设置

②btnLogin-OnClick事件

点击登录按钮时，向Shinobi服务器发送登录信息以获取token。

//JScript
function btnLoginOnClick(sender)
//登录按钮
{
  //UgURLFrame.URL = shinobiURL;
  restLogin.URL = Format(restLogin.URL,[shinobiURL]);
  restLogin.Send;
}

1
2
3
4
5
6
7
8

//PasScript
procedure btnLoginOnClick(sender: tobject);
//登录按钮
begin
  UgURLFrame.URL := shinobiURL;
  restLogin.URL := Format(restLogin.URL,[shinobiURL]);
  restLogin.Send;
end;

1
2
3
4
5
6
7
8

// Make sure to add code blocks to your code group

③restLogin-ResultData事件

返回的Shinobi登录信息中，提取token，group_key等信息。

//JScript
function restLoginOnResultData(sender,aresult)
//登陆获取token 
{
  var vJSON = new TJSONObject();
  var vValue = new TJSONValue();
  Try{
    vValue = vJSON.ParseJSONValue(aresult,False,False);
    vValue = TJSONObject(vValue).GetValue("$user");
    shinobiAuthToken = TJSONObject(vValue).GetValue("auth_token").Value;
    shinobiGroupKey = TJSONObject(vValue).GetValue("ke").Value;
    mmLog.Lines.Add("auth_token:" + shinobiAuthToken + " group_key:" + shinobiGroupKey);
  }
  Finally{
    vJSON.Free;
    vValue.Free;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//PasScript
procedure restLoginResultData(sender: tobject;aresult: string);
//登陆获取token 
var
  vJSON: TJSONObject;
  vValue: TJSONValue;
begin
  vJSON := TJSONObject.Create;
  vValue := TJSONValue.Create;
  Try
    vValue := vJSON.ParseJSONValue(aresult,False,False);
    vValue := TJSONObject(vValue).GetValue('$user');
    shinobiAuthToken := TJSONObject(vValue).GetValue('auth_token').Value;
    shinobiGroupKey := TJSONObject(vValue).GetValue('ke').Value;
    mmLog.Lines.Add('auth_token:' + shinobiAuthToken + ' group_key:' + shinobiGroupKey);
  Finally
    vJSON.Free;
    vValue.Free;
  End;
end;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// Make sure to add code blocks to your code group

(11)btnMyrtilleLogin-OnClick事件

当Myrtille登录按钮按下时，向网关服务器发送POST请求以获取token。

//JScript
function btnMyrtilleLoginOnClick(sender)
//Myrtille登录
{
  restMyrtilleLogin.Send;
}

1
2
3
4
5
6

//PasScript
procedure btnMyrtilleLoginOnClick(sender: tobject);
//Myrtille登录
begin
  restMyrtilleLogin.Send;
end;

1
2
3
4
5
6

// Make sure to add code blocks to your code group

(12)restMyrtilleLogin-ResultData事件

Myrtille登陆时返回的token信息进行处理。将获取的token填入网址中，登录至页面。

//JScript
function restMyrtilleLoginOnResultData(sender,aresult)
//登录
{
   myrtilleAuthToken = StringReplace(aresult,"'","");
   mmLog.Lines.Add("auth_token:" + myrtilleAuthToken);
   UgURLFrame.URL = "http://{{server}}/Myrtille/?__EVENTTARGET=&cid="+ myrtilleAuthToken + "&connect=Connect%21";
}

1
2
3
4
5
6
7
8

//PasScript
procedure restMyrtilleLoginResultData(sender: tobject;aresult: string);
//登录
begin
   myrtilleAuthToken := StringReplace(aresult,'"','');
   mmLog.Lines.Add('auth_token:' + myrtilleAuthToken);
   UgURLFrame.URL := 'http://{{server}}/Myrtille/?__EVENTTARGET=&cid='+ myrtilleAuthToken + '&connect=Connect%21';
end;

1
2
3
4
5
6
7
8

// Make sure to add code blocks to your code group

(14)btnMyrtilleLogout-OnClick事件

登出按钮点击操作。

//JScript
function btnMtrtilleLogoutOnClick(sender)
//Myrtille登出
{
  restMyrtillelogout.Params.Text = Format(restMyrtillelogout.Params.Text,[myrtilleAuthToken]);
  restMyrtillelogout.Send;
}

1
2
3
4
5
6
7

//PasScript
procedure btnMtrtilleLogoutOnClick(sender: tobject);
//Myrtille登出
begin
  restMyrtillelogout.Params.Text := Format(restMyrtillelogout.Params.Text,[myrtilleAuthToken]);
  restMyrtillelogout.Send;
end;

1
2
3
4
5
6
7

// Make sure to add code blocks to your code group

⑥btnMonitor-OnClick事件

点击按钮，发送查看监视器的请求。

//JScript
function btnMonitorOnClick(sender)
//获取监视器
{
  restMonitor.URL = Format(restMonitor.Url,[shinobiAuthToken,shinobiGroupKey]);
  restMonitor.Send;
}

1
2
3
4
5
6
7

//PasScript
procedure btnMonitorOnClick(sender: tobject);
//获取监视器
begin
  restMonitor.URL := Format(restMonitor.Url,[shinobiAuthToken,shinobiGroupKey]);
  restMonitor.Send;
end;

1
2
3
4
5
6
7

// Make sure to add code blocks to your code group

⑦restMonitor-ResultData事件

获取监视器信息，并进行回传。

//JScript
function restMonitorOnResultData(sender,aresult)
//获取结果
{
  var vValueList = new TJSONArray();
  Try{   
    vValueList = TJSONObject.ParseJSONValue(aresult,False,False) as TJSONArray;
    var vCount = vValueList.Size;
    if (vCount == 0) return;//exit;
    shinobiMonitorID = UGCM.GetJSONString(vValueList,"[0].mid"); //获取第一个JSON序列
    mmLog.Lines.Add("monitorid:"+ shinobiMonitorID);
  }
  Finally{
    vValueList.Free;
  }  
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//PasScript
procedure restMonitorOnResultData(sender: tobject;aresult: string);
//获取结果
var
  vJSON: TJSONObject;
  vValueList: TJSONArray;
  vCount: Integer;
  i: Integer;
begin
  vJSON := TJSONObject.Create;
  vValueList := TJSONArray.Create;
  Try
    vJSON := TJSONObject(vJSON.ParseJSONValue(aresult,False,False));
    vValueList := TJSONArray(vJSON.ParseJSONValue(aresult,False,False));
    vCount := vValueList.Size;
    if vCount = 0 then exit;
    shinobiMonitorID := UGCM.GetJSONString(vJSON,'[0].mid'); //获取第一个JSON序列
    mmLog.Lines.Add('monitorid:'+ shinobiMonitorID);
  Finally
    vJSON.Free;
    vValueList.Free;
  End;  
end;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// Make sure to add code blocks to your code group

⑧btnLive-OnClick事件

点击按钮以查看直播。

//JScript
function btnLiveOnClick(sender)
//查看视频
{
  UgFlvPlayer01.SetSource(shinobiURL+ "/"+ shinobiAuthToken + "/flv/" 
  +shinobiGroupKey + "/"+ shinobiMonitorID + "/s.flv","flv")
}

1
2
3
4
5
6
7

//PasScript
procedure btnLiveOnClick(sender: tobject);
//查看视频
begin
  UgFlvPlayer01.SetSource(shinobiURL+ '/'+ shinobiAuthToken + '/flv/' 
  +shinobiGroupKey + '/'+ shinobiMonitorID + '/s.flv','flv')
end;

1
2
3
4
5
6
7

// Make sure to add code blocks to your code group

⑤btnStart-OnClick事件

点击按钮以开启监控。

//JScript
function btnStartOnClick(sender)
//开启监控
{
  restStart.Url = Format(restStart.Url,[shinobiAuthToken,shinobiGroupKey,shinobiMonitorID]);
  restStart.Send;
}

1
2
3
4
5
6
7

//PasScript
procedure btnStartOnClick(sender: tobject);
//开启监控
begin
  restStart.Url := Format(restStart.Url,[shinobiAuthToken,shinobiGroupKey,shinobiMonitorID]);
  restStart.Send;
end;

1
2
3
4
5
6
7

// Make sure to add code blocks to your code group

④restStart-ResultData事件

当开启监控时显示弹窗信息。

//JScript
function restStartOnResultData(sender,aresult)
//开启结果 
{
  var vJSON = new TJSONObject();
  var vValue = new TJSONValue();
  Try{
    vValue = vJSON.ParseJSONValue(aresult,False,False);
    var vString = TJSONObject(vValue).GetValue("ok").Value;
    mmLog.Lines.Add(aresult);
    if (vString == "true"){ 
      ShowSweetAlert(atSuccess,"提示","开启成功！");
    }
    else{
      ShowSweetAlert(atError,"提示","开启失败！");
    }
  }
  Finally{
    vJSON.Free;
    vValue.Free;
  }   
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

//PasScript
procedure restStartResultData(sender: tobject;aresult: string);
//开启结果
var
  vJSON: TJSONObject;
  vValue: TJSONValue;
  vString: String;
begin
  vJSON := TJSONObject.Create;
  vValue := TJSONValue.Create;
  Try
    vValue := vJSON.ParseJSONValue(aresult,False,False);
    vString := TJSONObject(vValue).GetValue('ok').Value;
    mmLog.Lines.Add(aresult);
    if vString = 'true' then 
      ShowSweetAlert(atSuccess,'提示','开启成功！')
    else
      ShowSweetAlert(atError,'提示','开启失败！');
  Finally
    vJSON.Free;
    vValue.Free;
  End;   
end;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// Make sure to add code blocks to your code group

⑨btnStop-OnClick事件

点击停止监控按钮时，发送停止监控的请求。

//JScript
function btnStopOnClick(sender)
//停止开启
{
  restStop.Url = Format(restStop.Url,[shinobiAuthToken,shinobiGroupKey,shinobiMonitorID]);
  restStop.Send;
}

1
2
3
4
5
6
7

//PasScript
procedure btnStopOnClick(sender: tobject);
//停止开启
begin
  restStop.Url := Format(restStop.Url,[shinobiAuthToken,shinobiGroupKey,shinobiMonitorID]);
  restStop.Send;
end;

1
2
3
4
5
6
7

// Make sure to add code blocks to your code group

⑩restStop-ResultData事件

停止信息的发送。

//JScript
function restStopOnResultData(sender,aresult)
//关闭结果
{
  var vJSON = new TJSONObject();
  var vValue = TJSONValue();
  Try{
    vValue = vJSON.ParseJSONValue(aresult,False,False);
    var vString = TJSONObject(vValue).GetValue("ok").Value;
    mmLog.Lines.Add(aresult);
    if (vString == "true"){ 
      ShowSweetAlert(atSuccess,"提示","关闭成功！");
    }
    else{
      ShowSweetAlert(atError,"提示","关闭失败！");
    }
  }
  Finally{
    vJSON.Free;
    vValue.Free;
  }  
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

//PasScript
procedure restStopResultData(sender: tobject;aresult: string);
//关闭结果
var
  vJSON: TJSONObject;
  vValue: TJSONValue;
  vString: String;
begin
  vJSON := TJSONObject.Create;
  vValue := TJSONValue.Create;
  Try
    vValue := vJSON.ParseJSONValue(aresult,False,False);
    vString := TJSONObject(vValue).GetValue('ok').Value;
    mmLog.Lines.Add(aresult);
    if vString = 'true' then 
      ShowSweetAlert(atSuccess,'提示','关闭成功！')
    else
      ShowSweetAlert(atError,'提示','关闭失败！');
  Finally
    vJSON.Free;
    vValue.Free;
  End;   
end;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// Make sure to add code blocks to your code group

# 4. 运行结果

使用鼠标在FastWeb菜单，点击[保存至数据库]按钮，将其保存至数据库，点击[调试运行]确认能够正常打开。

首先点击1.登录按钮获取token，然后点击2.监视器获取监视器信息，点击查看视频查看视频直播信息。

底部的Myrtille登录点击时打开远程桌面连接。

← RestAPI应用(WEB) RestAPI综合运用2(WEB)→