คูมือการใชโปรแกรม เรื่อง ระบบประชุมทางไกลเพื่อการจัดการเรียนการสอนออนไลน แบบ Open Source RED 5 จัดการอบรมโดย โครงการมหาวิทยาลัยไซเบอรไทย (TCU) เรียบเรียงโดยทีมงาน พีห่มอโมเดล รศ.พิชิต ตรวีิทยรัตน wanna_kae@hotmail.com การติดตั้งโปรแกรม RED 5

1. เขาไปที่โฟลเดอร Install Program red5 \ Window Server

1.1 Double Click ที่ jre-1_5_0_06-windows-i586-p (Newest)

1.2 เลือก Typical setup > Accept > Finish

2. ตรวจสอบการลง Java

2.1 คลิก Start > Control Panel > System and Security > Administrative Tool > Services

2.2 ถาไมเจอลองติดตั้งโปรแกรมใหม ถาติดตั้งไมไดแสดงวามี Java แลวแตมันไมปรากฏใหเห็น

3. Double Click ที่ setup-red5-0.6.3

3.1 คลิก Next

3.2 เลือก I accept the agreement > Next

3.3 ชองขางหนา Browse จะเห็นขอความ C:\Program Files\Java\jre1.5.0_06 ถาไมใชขอความนี้ ให

คลิกที่ Browse แลวหาโฟลเดอร C:\Program Files\Java\jre1.5.0_06 ใหเจอ จากนั้นคลิก Next

3.4 ชองขางหนา Browse จะเห็นขอความ C:\Program Files\Red5 > Next

3.5 ในชอง Full Installation คลิกเลือกหนากรอบสี่เหลี่ยมใหหมด จากนั้นคลิก Next

3.6 ชองขางหนา Browse จะเห็นขอความ Red5 จากนั้นคลิก Next

3.7 คลิกเลือกเฉพาะ Register as service > Next

3.8 สังเกตชอง RTMP port 1935 และ RTMPT port 8088 > Next > Install

3.9 เลือก Start service > Finish

4. ตรวจสอบการลง Red5

4.1 คลิก Start > Control Panel > System and Security > Administrative Tool > Services

4.2 จะเจอคําวา Red5

5. Run Red 5

5.1 เขา Internet Explorer พิมพ Address เปน http://localhost:5080

5.2 ข้ึนหนาตาง Red5 Test Page

5.3 เขาไปที่โฟลเดอร Code Development

5.4 คัดลอกโฟลเดอร swf และ webapps มาวางทับโฟลเดอร swf และ webapps ใน C:\Program

Files\Red5 เพื่อเปลี่ยนภาษาอังกฤษเปนภาษาไทย

5.5 คลิก Refresh ที่หนาตาง Red5 Test Page

5.6 หนาตางจะเปลี่ยนชื่อเปน Thailand Cyber University : Red5

5.7 คลิกคําวา here จะปรากฏหนาตาง Thailand Cyber University : Project Red5 ซึ่งมีระบบสําหรับ

ใชงานใน Red5

6. การเปลี่ยนชือ่

6.1 เขาไปที่ C: Program files\red 5\webapps\root\demos\index

6.2 คลิกขวาที่ Index เลือก Open with > note pad

6.3 เปลี่ยนชื่อตามตองการ โดยลบตรงคําวา โครงการอบรมปฏิบติัการเรื่อง “ระบบประชมุทางไกล

เพื่อการจัดการเรียนการสอนออนไลน ” แบบ Open Source จัดโดย โครงการมหาวิทยาลัยไซ

เบอรไทย (TCU)

7. เขา Internet โดยเลือกจุดเชื่อมตอเปน TCU

7.1 คลิกขวาตรงเครือขายอินเทอรเน็ตที่เลือก > เลือก Status

7.2 กดปุม Detail เพื่อดู IPv4 Address

7.3 คัดลอก Address ขางหลังที่เปนตัวเลข มาวางยังชองใสที่อยูของหนา Webpage

[http://………….] ไมมี .com

8. ติดตั้งโปรแกรม Flash Player

8.1 เขาไปที่โฟลเดอร Macromedia.Flash.Professional.v8.0

8.2 Double Click ที่ setup เพื่อติดตั้งโปรแกรม Flash Player

8.3 เมื่อติดตั้งโปรแกรมเสร็จแลว เขาไปที่ Folder Macromedia.Flash.Professional.v8.0

8.4 เปดโปรแกรม Macromedia Flash 8 ข้ึนมา

8.5 มันจะเลือกอันที่มี buy ให ไมตองเปลี่ยน ใหคลกิที่ Continue

8.6 วาง serial number ในชองสําหรับใส serial number > คลิก remind me later

8.7 ปรากฏหนาตาง Flash Player ข้ึนมา

ขั้นตอนการทํา simplebroadcaster

1. เขาไปที่ C:\Program Files\Red5\swf\sample

2. Double Click ที่ simplebroadcaster.fla (ไฟลสีแดง สําหรับแกไขงาน)

3. ปรับแตงขอมูลตามตองการ

3.1 ปรับแตงหัวขอเรื่อง

3.1.1 เลือกลูกศรสดีํา > คลิกที ่Layer 1 ของ Logo

3.1.2 เลือกสัญลักษณ A เพื่อพิมพขอความตามตองการ สามารถปรับแตงตัวอักษรไดในสวน

ของ Properties ที่อยูดานลาง

3.2 ปรับแตง Background

3.2.1 เลือกลูกศรสดีํา > คลิกที ่Layer 1 ของ BG > กด Backspace เพื่อลบ Background เดิม

3.2.2 กด Ctrl + R เพื่อเลือกภาพพื้นหลัง

3.2.3 คลิกที่ภาพพื้นหลัง จะเห็นขอมูลของภาพในสวนของ Properties จดขอมูลในชอง W และ

H เอาไว

3.2.4 คลิก Modify ตรงแถบดานบน > เลือก document

3.2.5 ในชอง Dimension ใสขนาดของภาพพื้นหลังลงไป [ ที่เปน W กับ H ] แลวกด OK

3.2.6 สามารถขยับกรอบสีชมพ ูกรอบสงสัญญาณ กรอบปดสัญญาณไดภายในภาพพื้นหลังนั้น

3.3 ปรับแตงขนาดกรอบสีชมพู 3.3.1 เลือกลูกศรสดีํา > คลิกที ่Layer 1 ของ Content

3.3.2 เลือกสัญลักษณ กรอบสี่เหลี่ยม (Free transform tool) เพื่อปรับขนาดกรอบสีชมพู

3.3.3 กด Ctrl + Enter เพื่อ Run video

3.3.4 กด สงสัญญาณ และเลือก allow จะปรากฏหนาตาง video ข้ึน เห็นหนาเราดวย

3.4 ปรับแตงขอมูล

3.4.1 เลือกลูกศรสดีํา > คลิกที ่Layer 1 ของ Code

3.4.2 เลือกสัญลักษณ A แลวกด f 9

3.4.3 บรรทัดที่ 15 สําหรับแกไข IP ใหม

3.4.4 บรรทัดที่ 72 สําหรับปรับขนาดกรอบสีชมพู โดยออกไปกอนแลวคลิกที่กรอบสีชมพูจะ

ข้ึนขอมูลมา ในสวนของ Properties จํา W และ H ไว หลังจากนั้นนําไปแกไขในบรรทัดนี้

ถาตัวเลขไมตรง

รูปแบบ [ cam.setMode(320, 240, 30); เมื่อ 320 = W และ 240 = H เลข 30 ไมตองแก

อันที่แกไขขอมูล กรณีขอมูลไมตรง

3.4.5 กด Ctrl + Enter เพื่อตรวจสอบวาภาพที่ไมตกขอบ จากนั้นกดปด

3.4.6 ไปที่ File > Save as > เลือก Save ที่หนา Desktop

3.4.7 คัดลอกไฟล simplebroadcaster.swf (สีเทา สําหรับใชงานจริง) ซึ่งอยูใน

C:\ProgramFiles\Red5\swf\sample

3.4.8 ถาไมมีหรือเปดแลวไมเปนอันที่เราทําไว หลังจาก save แลว ใหเปดดูอีกครั้งหนึ่ง จะมี

file simplebroadcaster.swf อยูกับ simplebroadcaster.fla ตรงที่เรา save ไว ให copy

มาแลวนําไปวางทับที่ C:\ProgramFiles\Red5\swf\sample

3.4.9 นําไปวางที่ C:\ProgramFiles\Red5\webapps\root\demos จะขึ้นหนาตางใหเราเลือก

Replace แลวกด OK

3.4.10 ตรวจสอบโดยเขาหนา Web : Thailand Cyber University : Project Red5

(http://localhost:5080/demos/) แลวคลิกคําวา เขาสูระบบ ใต Simple Broadcaster ตองขึ้น

หนาจออันที่เราทําเอาไว

ขั้นตอนการทํา simplesubscriber

เหมือนการทํา simplebroadcaster แตเปลี่ยน [ cam.setMode(320, 240, 30); เมื่อ 320 = W และ

240 = H เลข 30 ใหแกเปน 15 เดิมอยูบรรทัด 72 เปลี่ยนเปนบรรทัดที่ 60

การเปลี่ยนชือ่ปุมรับสัญญาณ สงสัญญาณ

1. คลิกที่ปุมนั้น

2. ดูที่สวนลาง (Properties) เลือก Tab Parameter

3. ดูตรงชอง Label (สามารถแกไขชื่อได)

Red 5 server http://202.29.13.53

ขั้นตอนการทาํ videoconference 1. เขาไปที่ C:\ProgramFiles\Red5\swf\sample

2. Double Click ที่ videoconference.fla

3. การปรับตกแตงรูปแบบ

3.1.1 เลือกลูกศรสดีํา > Double click ตรงจุดที่จะทําการแกไจนสามารถแกไขได

สังเกตตรง Timeline จะเปน Scene 1\Video Conference\............................

3.1.2 เพิ่มกรอบ Subscriber เปน 9 ชอง โดย Doble Click จนกวาสามารถเลือกไดเพียงชองเดียว

จากนั้นกด Ctrl + C เพื่อ Copy และกด Ctrl + V เพื่อวาง และเปลี่ยนชื่อในชอง Subscriber

ในสวนของ properties ดวย เปน Subscriber 5 , 6 , 7

3.1.3 การเพิ่มพื้นหลัง เลือกลกูศรคลิกที่ Layer 1 ของ Layer 3 แลวกด Ctrl + R เพื่อเลือกภาพ

พ้ืนหลัง พรอมทั้งจัดขนาดของ Frame เปน 1024 × 768 ตามขนาดจริง เพื่อปองกันภาพตก

กรอบ

3.1.4 กดปุมสี่เหลี่ยมเพื่อใชปรับขนาดของกรอบตางๆ

3.1.5 กด Ctrl + Z เพื่อยอนการกระทํากลับ 1 ข้ัน

3.1.6 ลําโพงเปด – ปดตองซอนทับกันสนิทพอดี

3.1.7 หามแกไข Copyright ©2009 Thailand Cyber University. All rights reserved ทางดาน

ลางสุด

3.2 แกไข Mode Admin

3.2.1 เขาไปที่ C:\Program Files\Red5\swf\DEV_Source\classes\org\red5\samples\

livestream\videoconference

3.2.2 Broadcaster บรรทัดที่ 92 เปนขนาดของกลอง (ชองสี่เหลี่ยมแตละชอง) บรรทัดที่ 118

สําหรับใส IP

3.2.3 Chat บรรทัดที่ 49 เปลี่ยน Looser user เปน Default name

3.2.4 Connection และ ConnectionLight ไมมีตัวแปรใหแกไข

3.2.5 Connector บรรทัดที่ 103 – 105 ใส URL [http://…………………] ที่เราตองการเชื่อมตอ

3.2.6 Global Object ไมตองแกไข

3.2.7 Video Conference เปนการควบคุมเสียง

3.2.8 Video Pool บรรทัดที่ 37 เปนตนไป ใส Subscriber_0 ถึง Subscriber_7 กรณีมีกลอง 9 ตัว

เพราะชองซายมือบนสุดไมใช Subscriber แตเปน Container และบรรทัดที่ 108 ให

เปลี่ยนเปน i < 8 กรณีที่มี 9 กลอง

3.2.9 กด Save

3.3 เขาไปที่ C:\Program Files\Red5\swf\DEV_Deploy เพ่ือ Copy file ชื่อ videoConference.swf

3.4 นําไปวางที่ C:\ProgramFiles\Red5\webapps\root\demos

3.5 เขาไปที่หนา Web : Thailand Cyber University : Project Red5 [http://localhost:5080/demos/]

เลือกหัวขอ Video Conference จะเห็นหนา Video Conference ที่เราสรางไว

3.6 Run ที่ http://202.29.13.53/port_tester.html

หัวขอ OFLA Demo สําหรับเปน Library เก็บไฟล Media

1. เขาไปที่ C:\Program Files\Red5\swf\DEV_Source หาไฟล ofla_demo แลวเปด

2. เขาไปที่ Modify > Document เพื่อปรับขนาดเปน 1024 × 768 สังเกตวา Frame มีพ้ืนที่ใหญข้ึน

3. ไฟลที่ใสเปน .flv เทานั้น กลอง Library สําหรับใส Detail ของ file

4. จัดตกแตงตามตองการ กด Ctrl + Enter เพื่อดุการทํางานของ video ถาใชงานได กดปดแลวกด save

5. เขาไปที่ C:\Program Files\Red5\swf\DEV_Deploy เพื่อ Copy file ชื่อ ofla_demo.swf

6. นําไปวางที่ C:\ProgramFiles\Red5\webapps\root\demos

7. เขาไปที่หนา Web : Thailand Cyber University : Project Red5 [http://localhost:5080/demos/] เลอืก

OFLA Demo จะเห็นหนา OFLA Demo ที่เราสรางไว