RestAPI综合运用2(WEB)
# FastWeb之RestAPI综合运用2
- 适用平台：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设计器，分别加入下插图之控件。或者点击左上角的[导入]选择模板文件来打开对应模板。
本示例与FastWebRestAPI综合运用1相同，故在此仅对新增以及有修改的部分控件进行说明。
①：TUniTabSheet组件，控件名称为UniTabSheet01、UniTabSheet02。
②：TUgPageControl组件，控件名称为UgPageControl01。
③：TUgFlvPlayer组件，控件名称为UgFlvPlayer02。
④：TUgFlvPlayer组件，控件名称为UgFlvPlayer03。
⑤：TUgComboBox组件，控件名称为ShinobiMonitorList。
⑥：TUgFlvPlayer组件，控件名称为UgFlvPlayer04。
⑦：TUgFlvPlayer组件，控件名称为UgFlvPlayer05。
UgWebRunFrame属性设置
Height：设置页面高度=600。Width：设置页面宽度=1280。AlignmentControl：设置对齐的控件模式，设置为uniAlignmentClient。
②UgPageControl01属性设置
需新增两个页面，分别设置其
Caption属性为远程桌面、监控。Align：设置对齐方式alClient。
UniTabSheet02属性设置
Caption：设置字幕显示内容：监控。Layout：设计布局，设置为vbox。
UgContainerPanel03属性设置
此控件位于
监控面板下。Layout：设计布局，设置为hbox。LayoutConfig.Flex：设计布局的占比，设置为1。LayoutConfig.Width：设计布局占用的宽度，设置为100%。
UgContainerPanel04属性设置
此控件位于
监控面板下。Layout：设计布局，设置为hbox。LayoutConfig.Flex：设计布局的占比，设置为1。LayoutConfig.Width：设计布局占用的宽度，设置为100%。
③UgFlvPlayer02属性设置
此控件位于
UgContainerPanel03面板下。LayoutConfig.Flex：设计布局的占比，设置为1。LayoutConfig.Height：设计布局占用的宽度，设置为100%。
④UgFlvPlayer03属性设置
此控件位于
UgContainerPanel03面板下。LayoutConfig.Flex：设计布局的占比，设置为1。LayoutConfig.Height：设计布局占用的宽度，设置为100%。
⑥UgFlvPlayer04属性设置
此控件位于
UgContainerPanel04面板下。LayoutConfig.Flex：设计布局的占比，设置为1。LayoutConfig.Height：设计布局占用的宽度，设置为100%。
⑦UgFlvPlayer05属性设置
此控件位于
UgContainerPanel04面板下。LayoutConfig.Flex：设计布局的占比，设置为1。LayoutConfig.Height：设计布局占用的宽度，设置为100%。
restlogin设置
双击控件，打开API选择器，选择Shinobi登录的API。
- restMonitor设置
双击控件，打开API选择器，选择获取监视器的API。
- restStart设置
双击控件，打开API选择器，选择开启监控的API。
- restStop设置
双击控件，打开API选择器，选择停止监控的API。
- restMyrtilleLogin设置
双击控件，打开API选择器，选择Myrtille登录的API。
- restMyrtilleLogout设置
双击控件，打开API选择器，选择Myrtille登出的API。
# 3. 程序设计
点击程序设计界面右下角的按钮，切换至单元选择界面，勾选需要使用的单元。该程式的程序需要引用MessageInfo单元。
# 3.1. 程序初始设置
设置全局变量。
//JScript
var shinobiURL,shinobiAuthToken,shinobiGroupKey,shinobiMonitorID,myrtilleAuthToken;
1
2
2
//PasScript
Var
shinobiURL: String;
shinobiAuthToken: String;
shinobiGroupKey: String;
shinobiMonitorID: String;
myrtilleAuthToken: String;
...
Begin
End.
1
2
3
4
5
6
7
8
9
10
11
12
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事件
点击按钮以登录。
//JScript
function btnLoginOnClick(sender)
//登录按钮
{
restLogin.Send;
//UGCM.NetHttpPost(,,,,)
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
//PasScript
procedure btnLoginOnClick(sender: tobject);
//登录按钮
Var
vString: String;
begin
restLogin.Send;
end;
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
// Make sure to add code blocks to your code group
- restLogin-ResultData事件
获取登录信息并解析变量。
//JScript
function restLoginOnResultData(sender,aresult)
//登陆获取token
{
var vJSON = new TJSONObject();
var vValue = new TJSONValue();
Try{
vJSON = TJSONObject(vJSON.ParseJSONValue(aresult,False,False));
shinobiAuthToken = UGCM.GetJSONString(vJSON,"$user.auth_token");
shinobiGroupKey = UGCM.GetJSONString(vJSON,"$user.ke");
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//PasScript
procedure restLoginResultData(sender: tobject;aresult: string);
//登陆获取token
var
vJSON: TJSONObject;
vValue: TJSONValue;
begin
vJSON := TJSONObject.Create;
vValue := TJSONValue.Create;
Try
vJSON := TJSONObject(vJSON.ParseJSONValue(aresult,False,False));
shinobiAuthToken := UGCM.GetJSONString(vJSON,'$user.auth_token');
shinobiGroupKey := UGCM.GetJSONString(vJSON,'$user.ke');
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Make sure to add code blocks to your code group
- btnMyrtilleLogin-OnClick事件
Myrtille登录。
//JScript
function btnMyrtilleLoginOnClick(sender)
//Myrtille登录
{
restMyrtilleLogin.Send;
UgPageControl01.ActivePageIndex = 0;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
//PasScript
procedure btnMyrtilleLoginOnClick(sender: tobject);
//Myrtille登录
begin
restMyrtilleLogin.Send;
UgPageControl01.ActivePageIndex := 0;
end;
1
2
3
4
5
6
7
2
3
4
5
6
7
// Make sure to add code blocks to your code group
- restMyrtilleLogin-ResultData事件
登录发送相关讯息。
//JScript
function restMyrtilleLoginOnResultData(sender,aresult)
//登录
{
myrtilleAuthToken = StringReplace(aresult,""","");
mmLog.Lines.Add("auth_token:" + myrtilleAuthToken);
UgURLFrame.URL = "http://{MyrtilleServer}/Myrtille/?__EVENTTARGET=&cid="+ myrtilleAuthToken + "&connect=Connect%21";
}
1
2
3
4
5
6
7
8
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://{MyrtilleServer}/Myrtille/?__EVENTTARGET=&cid='+ myrtilleAuthToken + '&connect=Connect%21';
end;
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
// Make sure to add code blocks to your code group
- btnMyrtilleLogout-OnClick事件
Myrtille登出按钮点击，发送登出的API请求。
//JScript
function btnMtrtilleLogoutOnClick(sender)
//Myrtille登出
{
restMyrtillelogout.Params.Text = Format(restMyrtillelogout.Params.Text,[myrtilleAuthToken]);
restMyrtillelogout.Send;
}
1
2
3
4
5
6
7
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
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
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
2
3
4
5
6
7
// Make sure to add code blocks to your code group
- restMonitor-ResultData事件
获取到的信息进行组合放入复选框中。
//JScript
//获取结果
{
var vValueList = new TJSONArray();
Try{
vValueList = TJSONObject.ParseJSONValue(aresult,False,False) as TJSONArray;
var vCount = vValueList.Size;
if (vCount == 0) return;
for (i = 0; i <= (vCount - 1); i++)
{
shinobiMonitorID = UGCM.GetJSONString(vValueList,"["+ IntToStr(i) + "].mid"); //获取JSON序列
shinobiMonitorList.Items.Add(shinobiMonitorID);
mmLog.Lines.Add("monitorid:"+ shinobiMonitorID);
}
shinobiMonitorList.ItemIndex = 0;
}
Finally{
//vJSON.Free;
vValueList.Free;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//PasScript
procedure restMonitorResultData(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;
for i := 0 to (vCount - 1) Do
begin
shinobiMonitorID := UGCM.GetJSONString(vJSON,'['+ IntToStr(i) + '].mid'); //获取JSON序列
shinobiMonitorList.Items.Add(shinobiMonitorID);
mmLog.Lines.Add('monitorid:'+ shinobiMonitorID);
End;
shinobiMonitorList.ItemIndex := 0;
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
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// Make sure to add code blocks to your code group
- btnLive-OnClick事件
选择视频进行查看。
//JScript
function btnLiveOnClick(sender)
//查看视频
{
UgPageControl01.ActivePageIndex = 1;
shinobiURL = restLogin.Server;
shinobiMonitorID = shinobiMonitorList.Items.Strings[shinobiMonitorList.ItemIndex];
UgFlvPlayer01.SetSource(shinobiURL+ "/"+ shinobiAuthToken + "/flv/"
+shinobiGroupKey + "/"+ shinobiMonitorID + "/s.flv","flv");
shinobiMonitorList.ItemIndex = 0;
shinobiMonitorID = shinobiMonitorList.Items.Strings[shinobiMonitorList.ItemIndex];
UgFlvPlayer02.SetSource(shinobiURL+ "/"+ shinobiAuthToken + "/flv/"
+shinobiGroupKey + "/"+ shinobiMonitorID + "/s.flv","flv");
shinobiMonitorList.ItemIndex = 0;
shinobiMonitorID = shinobiMonitorList.Items.Strings[shinobiMonitorList.ItemIndex];
UgFlvPlayer03.SetSource(shinobiURL+ "/"+ shinobiAuthToken + "/flv/"
+shinobiGroupKey + "/"+ shinobiMonitorID + "/s.flv","flv");
shinobiMonitorList.ItemIndex = 0;
shinobiMonitorID = shinobiMonitorList.Items.Strings[shinobiMonitorList.ItemIndex];
UgFlvPlayer04.SetSource(shinobiURL+ "/"+ shinobiAuthToken + "/flv/"
+shinobiGroupKey + "/"+ shinobiMonitorID + "/s.flv","flv");
shinobiMonitorList.ItemIndex = 0;
shinobiMonitorID = shinobiMonitorList.Items.Strings[shinobiMonitorList.ItemIndex];
UgFlvPlayer05.SetSource(shinobiURL+ "/"+ shinobiAuthToken + "/flv/"
+shinobiGroupKey + "/"+ shinobiMonitorID + "/s.flv","flv");
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//PasScript
procedure btnLiveOnClick(sender: tobject);
//查看视频
Var
shinobiURL:String;
begin
UgPageControl01.ActivePageIndex := 1;
shinobiURL := restLogin.Server;
shinobiMonitorID := shinobiMonitorList.Items.Strings[shinobiMonitorList.ItemIndex];
UgFlvPlayer01.SetSource(shinobiURL+ '/'+ shinobiAuthToken + '/flv/'
+shinobiGroupKey + '/'+ shinobiMonitorID + '/s.flv','flv');
shinobiMonitorList.ItemIndex := 0;
shinobiMonitorID := shinobiMonitorList.Items.Strings[shinobiMonitorList.ItemIndex];
UgFlvPlayer02.SetSource(shinobiURL+ '/'+ shinobiAuthToken + '/flv/'
+shinobiGroupKey + '/'+ shinobiMonitorID + '/s.flv','flv');
shinobiMonitorList.ItemIndex := 0;
shinobiMonitorID := shinobiMonitorList.Items.Strings[shinobiMonitorList.ItemIndex];
UgFlvPlayer03.SetSource(shinobiURL+ '/'+ shinobiAuthToken + '/flv/'
+shinobiGroupKey + '/'+ shinobiMonitorID + '/s.flv','flv');
shinobiMonitorList.ItemIndex := 0;
shinobiMonitorID := shinobiMonitorList.Items.Strings[shinobiMonitorList.ItemIndex];
UgFlvPlayer04.SetSource(shinobiURL+ '/'+ shinobiAuthToken + '/flv/'
+shinobiGroupKey + '/'+ shinobiMonitorID + '/s.flv','flv');
shinobiMonitorList.ItemIndex := 0;
shinobiMonitorID := shinobiMonitorList.Items.Strings[shinobiMonitorList.ItemIndex];
UgFlvPlayer05.SetSource(shinobiURL+ '/'+ shinobiAuthToken + '/flv/'
+shinobiGroupKey + '/'+ shinobiMonitorID + '/s.flv','flv');
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 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
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
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,UGMM.LT("提示"),UGMM.LT("开启成功！"));
}
else{
ShowSweetAlert(atError,UGMM.LT("提示"),UGMM.LT("开启失败！"));
}
}
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
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
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
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
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 = 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,UGMM.LT("提示"),UGMM.LT("关闭成功！"));
}
else{
ShowSweetAlert(atError,UGMM.LT("提示"),UGMM.LT("关闭失败！"));
}
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
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
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登录点击时打开远程桌面连接。