网络摄像机(WEB)

# FastWeb之网络摄像机

适用平台：WEB(桌面)

# 1. 说明

本范例使用TUgWebCam控件实现网络摄像机的功能，该范例需在接入SSL的情况下，并且在浏览器中启用该网址的摄像头使用权限才可以使用。该网络摄像机可实现拍照功能，将照片传送至服务器的指定目录中。

通过本范例学习，可以掌握TUgWebCam的使用方法。

# 2. 设计明细

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

①：TUgWebCam组件，控件名称为UgWebCam01。

②：TUgComboBox组件，控件名称为UgComboBox01。

③：TUgFSToast组件，控件名称为UgFSToast01。

④：TUgImage组件，控件名称为UgImage01。

⑤：TUgCheckBox组件，控件名称为UgCheckBox01。

⑥：TUgCheckBox组件，控件名称为UgCheckBox02。

⑦：TUgEdit组件，控件名称为UgEdit01。

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

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

⑩：TUgButton组件，控件名称为UgButton02。

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

(12)：TUgButton组件，控件名称为UgButton05。

UgWebRunFrame属性设置
- Height：设置页面高度=447。
- Width：设置页面宽度=700。
UgPanel02属性设置 该控件用于在其中放置相机控件。
- Height：设置控件高度=301。
- Width：设置控件宽度=306。
- Floating：外观显示悬浮效果，设置为True。
UgPanel03属性设置 该控件用于在其中放置图片控件。
- Caption：设置面板显示的背景字幕=照片显示区。
- Height：设置控件高度=301。
- Width：设置控件宽度=300。
- Floating：外观显示悬浮效果，设置为True。
- Font：设置显示字幕的字体，其中Color设置为clGray，Size设置为16，Size中设置fsBold为True。
①UgWebCam01属性设置
- Align：该控件位于UgPanel02中，设置控件的对齐方式=alClient。
②UgComboBox01属性设置
- FieldLabel：设置选框对应的标签字幕=相机列表。
- FieldLabelFont：设置选框标签的字体信息，设置其中的Style.fsBold为True。
④UgImage01属性设置
- Align：该控件位于UgPanel01中，设置控件的对齐方式=alClient。
⑤UgCheckBox01属性设置
- Caption：设置其中显示的字幕=水平翻转(镜像模式)。
⑥UgCheckBox02属性设置
- Caption：设置其中显示的字幕=捕捉后解冻相机。
- Checked：设置默认勾选状态=True。
⑦UgEdit01属性设置
- FieldLabel：设置文本编辑框显示的标签信息=文件地址。
- FieldLabelFont：设置文本编辑框标签的字体信息，设置其中的Style.fsBold为True。
⑧UgButton01属性设置
- Caption：设置按钮显示的字幕=开启相机。
- Font：设置按钮字幕显示的字体，设置其Size为12。
⑨UgButton03属性设置
- Caption：设置按钮显示的字幕=关闭相机。
- Font：设置按钮字幕显示的字体，设置其Size为12。
⑩UgButton02属性设置
- Caption：设置按钮显示的字幕=拍照。
- Font：设置按钮字幕显示的字体，设置其Size为16。
(11)UgButton04属性设置
- Caption：设置按钮显示的字幕=冻结相机。
- Font：设置按钮字幕显示的字体，设置其Size为12。
(12)UgButton05属性设置
- Caption：设置按钮显示的字幕=解禁相机。
- Font：设置按钮字幕显示的字体，设置其Size为12。

# 3. 脚本设计

# 3.1. 脚本初始设置

该程序无脚本初始设置。

# 3.2. 事件设置

①UgWebCam01-OnCameraList事件

相机启动时加载可用的摄像机列表。

//JScript
function UgWebCam01onCameraList(sender)
//加载摄像机列表
{
  UgComboBox01.Items.Clear;
  for (var i = 0; i <=UgWebCam01.CameraList.Count-1; i++ )
    UgComboBox01.Items.Add(UgWebCam01.CameraList.Names[i]);
  if (UgComboBox01.Items.Count>0)
    UgComboBox01.ItemIndex= 0;
}

1
2
3
4
5
6
7
8
9
10
11

//PasScript
procedure UgWebCam01onCameraList(sender: tobject);
//加载摄像机列表
var
  i: Integer;
begin
  UgComboBox01.Items.Clear;
  for i := 0 to UgWebCam01.CameraList.Count-1 do
    UgComboBox01.Items.Add(UgWebCam01.CameraList.Names[i]);
  if UgComboBox01.Items.Count>0 then
    UgComboBox01.ItemIndex:= 0;
end;

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

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

①UgWebCam01-OnError事件

当摄像机在运行过程中出现错误时弹出显示错误内容。

//JScript
function UgWebCam01onError(sender,error)
{
  UgFSToast01.Info("",error);
}

1
2
3
4
5

//PasScript
procedure UgWebCam01onError(sender: tobject;const error: string);
begin
  UgFSToast01.Info('',error);
end;

1
2
3
4
5

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

①UgWebCam01-OnLive事件

当摄像机开启运行时，弹窗显示提示信息。

//JScript
function UgWebCam01onLive(sender)
{
  UgFSToast01.Info("","Live");
}

1
2
3
4
5

//PasScript
procedure UgWebCam01onLive(sender: tobject);
begin
  UgFSToast01.Info('','Live');
end;

1
2
3
4
5

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

①UgWebCam01-OnSnap事件

当摄像机拍照完成后，加载拍照的图片。

//JScript
function UgWebCam01onSnap(sender,filename)
{
  ugimage01.Picture.LoadFromFile(filename);
  UgEdit01.Text = filename;
}

1
2
3
4
5
6

//PasScript
procedure UgWebCam01onSnap(sender: tobject;const filename: string);
begin
  ugimage01.Picture.LoadFromFile(filename);
  UgEdit01.Text := filename;
end;

1
2
3
4
5
6

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

⑧UgButton01-OnClick事件

当按下[开启相机]时，打开相机。

//JScript
function UgButton01OnClick(sender)
{
  UgWebCam01.StopCamera;
  UgWebCam01.FlipHoriz= UgCheckBox01.Checked;
  UgWebCam01.UnfreezeSnap= UgCheckBox02.Checked;
  UgWebCam01.CameraName= UgComboBox01.Text;
  UgWebCam01.StartCamera;
}

1
2
3
4
5
6
7
8
9

//PasScript
procedure UgButton01OnClick(sender: tobject);
begin
  UgWebCam01.StopCamera;
  UgWebCam01.FlipHoriz:= UgCheckBox01.Checked;
  UgWebCam01.UnfreezeSnap:= UgCheckBox02.Checked;
  UgWebCam01.CameraName:= UgComboBox01.Text;
  UgWebCam01.StartCamera;
end;

1
2
3
4
5
6
7
8
9

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

⑨UgButton03-OnClick事件

当按下[关闭相机]时，关闭相机。

//JScript
function UgButton03OnClick(sender)
{
  UgWebCam01.StopCamera;
}

1
2
3
4
5

//PasScript
procedure UgButton03OnClick(sender: tobject);
begin
  UgWebCam01.StopCamera;
end;

1
2
3
4
5

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

⑩UgButton02-OnClick事件

当按下[拍照]按钮时，进行拍照操作。

//JScript
function UgButton02OnClick(sender)
{
  UgWebCam01.SnapPicture;
}

1
2
3
4
5

//PasScript
procedure UgButton02OnClick(sender: tobject);
begin
  UgWebCam01.SnapPicture;
end;

1
2
3
4
5

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

(11)UgButton04-OnClick事件

当按下[冻结相机]按钮时，进行相机的冻结操作。

//JScript
function UgButton04OnClick(sender)
{
  UgWebCam01.FreezeCamera;
}

1
2
3
4
5
6

//PasScript
procedure UgButton04OnClick(sender: tobject);
begin
  UgWebCam01.FreezeCamera;
end;

1
2
3
4
5

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

(12)UgButton05-OnClick事件

当按下[解禁相机]按钮时，解除相机的冻结操作。

//JScript
function UgButton05OnClick(sender)
{
 UgWebCam01.UnFreezeCamera;
}

1
2
3
4
5

//PasScript
procedure UgButton05OnClick(sender: tobject);
begin
 UgWebCam01.UnFreezeCamera;
end;

1
2
3
4
5

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

# 4. 运行结果

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

← 表格数据导入(WEB) 地图展示→