Hướng dẫn tạo một ứng dụng flash có tương tác Red5 đơn giản

Mình chia sẻ cách tạo ứng dụng flash có dùng Red5.
1. Test Red5
Mình mặc định là các bạn đã cài đặt được Red5 thành công khi bạn đang đọc bài viết này. Tuy nhiên, các bạn có thể kiểm tra xem đã cài đặt Red5 thành công hay chưa bằng cách bạn gõ đường trên trình duyệt như sau http://localhost:5080/. Nếu như hiện lên một trang như hình bên dưới thì bạn đạ thành công.

2. Cấu trúc thư mục
– src: thư mục chứa code java.
– www
– WEB-INF
– classes: chứa các file *.class được biên dịch.
– red5-web.properties
– red5-web.xml
-web.xml
– streams : chứa các file flv, mp3, file record…
3. Tạo ứng dụng phía server (Red5)
a. Tạo Java project
Dùng Eclipse để tạo project java như các hình bên dưới.

b. Thêm thư mục
Sau khi đã tạo xong project java, các bạn thêm các thư mục như mục số 2. Cấu trúc thư mục sẽ giống như hình bên dưới

c. Thêm thư viện red5.jar
Sau khi chúng ta đã thêm các thư mục và các file cần thiết, chúng ta cần add thêm thư viện red5.jar.

d. Thay đổi thư mục export class

e. Tạo package và các class cần thiết
Bạn right click lên thư mục src, chọn New/Package. Ta tạo package tên là red5.app.firstapp. Các bạn right click lên package vừa tạo, chọn New/Class, các bạn tạo class tên là Application. Sau khi các bạn làm xong các bước này, cấu trúc thư mục của chúng ta như hình bên dưới

Chúng ta thêm một ít code vào class Application

package red5.app.myapp;
import org.red5.server.adapter.ApplicationAdapter;
public class Application extends ApplicationAdapter
{
  public String echo()
  {
    return "Chương trình Red5 bắt đầu!";
  }
}

Sau khi các bạn đã thêm code cho file Application xong. Các bạn right click lên package vừa tạo, chọn New/Class, các bạn tạo class tên là TestService. Chúng ta sẽ triệu gọi đến class này phía client. Sau khi các bạn làm xong các bước này, cấu trúc thư mục của chúng ta như hình bên dưới

Chúng ta thêm một ít code vào class TestService

package red5.app.firstapp;
public class TestService
{
  public String saySomething(String echo)
  {
    return "Red5 xin chào " + echo;
  }
}

f. Chỉnh file red5-web.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-nstance" xmlns:lang="http://www.springframework.org/schema/lang" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.0.xsd http://www.springframework.org/schema/lang
http://www.springframework.org/schema/lang/spring-lang-2.0.xsd">
<bean id="placeholderConfig">
<property name="location" value="/WEB-INF/red5-web.properties" />
</bean>
<bean id="web.context" autowire="byType" />
<bean id="web.scope" init-method="register">
<property name="server" ref="red5.server" />
<property name="parent" ref="global.scope" />
<property name="context" ref="web.context" />
<property name="handler" ref="web.handler" />
<property name="contextPath" value="${webapp.contextPath}" />
<property name="virtualHosts" value="${webapp.virtualHosts}" />
</bean>
<bean id="web.handler" class="red5.app.firstapp.Application" />
<bean id="testservice.service" class="red5.app.firstapp.TestService"/>

g. Chỉnh file red5-web.properties

webapp.contextPath=/FirstApp
webapp.virtualHosts=*

h. Chỉnh file web.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" version="2.4">
<display-name>First App</display-name>
<context-param>
<param-name>globalScope</param-name>
<param-value>default</param-value>
</context-param>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/red5-*.xml</param-value>
</context-param>
<context-param>
<param-name>locatorFactorySelector</param-name>
<param-value>red5.xml</param-value>
</context-param>
<context-param>
<param-name>parentContextKey</param-name>
<param-value>default.context</param-value>
</context-param>
<context-param>
<param-name>webAppRootKey</param-name>
<param-value>/FirstApp</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<security-constraint>
<web-resource-collection>
<web-resource-name>Forbidden</web-resource-name>
<url-pattern>/streams/*</url-pattern>
</web-resource-collection>
<auth-constraint/>
</security-constraint>
</web-app>

i. Các bạn tiến hành build java project. Sau đó, các bạn copy toàn bộ thư mục www của bạn vào thư mục cài đặt red5/webapps
j. Các bạn đổi tên www thành FirstApp
k. Vào Services, restart lại Red5. Bạn cần thực hiện bước này nếu không thì phía client không gọi được.
4. Tạo ứng phía client
Chúng ta đã hoàn tất xây dựng ứng dụng phía server(Red5), bây giờ chúng ta xây dựng ứng dụng phía client để triệu gọi phía server. Các bạn tạo một file TestRedApp.fla và một file TestRed5App.as và đặt những file này cùng thư mục. Sau đó, các bạn thêm ít code sau đây vào file TestRed5App.as

package
{
  import flash.display.*;
  import flash.external.ExternalInterface;
  import flash.events.*;
  import flash.net.*;
  import flash.net.NetConnection;
  import flash.net.ObjectEncoding;
  import flash.events.NetStatusEvent;
  import flash.text.*;
  public class TestRed5App extends Sprite
  {
    private var txt:TextField;
    private var btn:SimpleButton;
    private var nc:NetConnection;
    public static var resString:String;
    private var numButtonWidth:Number = 100;
    private var numButtonHeight:Number = 50;
    function TestRed5App():void
    {
      txt = new TextField();
      txt.awidth = 300;
      txt.text = "Bạn hãy bấm nút để gọi Red5";
      btn = new SimpleButton();
      btn.upState = drawButtonState(0xDAD8F3);
      btn.overState = drawButtonState(0x4F42C6);
      btn.downState = drawButtonState(0xDDF2FF);
      btn.hitTestState = drawButtonState(0xDDF2FF);
      btn.useHandCursor = true;
      btn.addEventListener(MouseEvent.CLICK, btnClicked);
      nc = new NetConnection();
      nc.objectEncoding = ObjectEncoding.AMF0;
      nc.addEventListener(NetStatusEvent.NET_STATUS , netStatus);
      nc.connect("rtmp://localhost/FirstApp");
      addChild(txt);
      addChild(btn);
    }
    private function btnClicked(evt:MouseEvent):void
    {
      var responder:Responder = new Responder(onComplete, onFail);
      nc.call("testservice.saySomething", responder, "bà con cô bác");
      txt.text = "Đang gọi dịch vụ";
    }
    private function netStatus(event:NetStatusEvent):void
    {
      if ( event.info.code == "NetConnection.Connect.Rejected" )
      {
        trace(event.info.application);
      }
      trace(event.info.code);
    }
    private function onComplete(results):void
    {
      txt.text = results.toString();
    }
    function onFail(results):void
    {
      var failString:String;
      for each (var thisResult in results){
        failString += thisResult;
      }
      txt.text = failString;
    }
    private function drawButtonState(rgb:uint):Sprite
    {
      var sprite:Sprite = new Sprite();
      sprite.graphics.lineStyle(4,0x33621E,1);
      sprite.graphics.beginFill(rgb);
      sprite.graphics.drawRoundRect(((this.stage.stageWidth/2)-(numButtonWidth/2)),((this.stage.stageHeight/2)-(numButtonHeight/2)), numButtonWidth,numButtonHeight,10,10);

      return sprite;
    }
  }
}

Sau đó, các bạn build và chạy client app, bạn click vào nút ra kết quả như hình bên dưới, thì ứng dụng của bạn đã thành công

Tham khảo thêm: xây dựng ứng dụng chụp hình với red5
Code: FirstAppWithRed5