網路攝像機(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) 地圖展示→