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.width = 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


18 comments

  1. Ban cho minh hoi , minh da lam cac buoc theo huong dan nhu tren nhung den buoc build cac file .as va .fla o phia client thi minh khong biet build nhu the nao . Ban co the huong dan giup minh cach build may file tren duoc khong , minh xin cam on

  2. 1. Bạn có công cụ Adobe Flash
    2. Bạn download code về, sau đó mở file TestRed5App.fla bằng công cụ Adobe Flash
    3. Bạn bấm Ctrl + F5 để build

  3. Cho mình hỏi khi mình copy toàn bộ folder www vào red5/webapps rùi đổi tên thành Firsthost thực hiện restart service Red5 nhưng khi kết nối vào ứng dụng mới tạo nhưng conect không được , mình đã kiểm tra lại việc kết nối thành công khi mình xóa thư mục FirstApp .
    Các bạn hỗ trợ tìm ra lỗi này . thanks !

  4. Cho mình hỏi khi mình copy toàn bộ folder www vào red5/webapps rùi đổi tên thành FirstApp thực hiện restart service Red5 nhưng khi kết nối vào ứng dụng mới tạo nhưng conect không được , mình đã kiểm tra lại việc kết nối thành công khi mình xóa thư mục FirstApp .
    Các bạn hỗ trợ tìm ra lỗi này . thanks !

      1. Không báo lỗi gì cả chỉ báo không kết nối với FirstApp thui . Mình nghĩ lúc tạo ứng dụng FirstApp sợ Red5 không hiểu ,mình làm như theo hướng dẫn đó . Tại mới đụng tới Red5 nên vẫn mò mẫn lắm . Các bạn cho ý kiến .

        1. Khi mỉnh cài đặt xong red5 ban setup-Red5-0.9.1 thì test Demo với liên kết : rtmp://localhost/oflaDemo báo kết nô1 không thành công
          97) Connections: true | true
          (31042) connected?: true
          (32098) NetConnection.onStatus:
          description = No scope ‘oflaDemo’ on this server.
          code = NetConnection.Connect.Rejected
          level = error

          (32099) NetConnection.onStatus:
          level = status
          code = NetConnection.Connect.Closed

          Còn đối với rtmp://localhost/SOSample thì kết nối được , trả hiểu sao nữa .Các bạn help với .

        2. Mình nghĩ vấn đề là do bản 0.9 này. Lúc mình viết bài này, mình dùng version 0.7 hay 0.8 thì phải

  5. Mình cài thì trong folder oflademo không thấy có dữ liệu nào cả , down ban 0.8 về cài cũng như vậy không tài nào kết nối được với “rtmp://localhost/oflaDemo”. Bạn nào gặp lỗi này không giải quyết dùm cái , mình làm hoài mà mãi không được thiệt tình …

  6. Mình đã làm thành công việc kết nối với oflaDemo , bằng cách copy folder
    WEB-INF vào và chỉnh lại thông số 1 chút .
    622) Connections: true | true
    (937) connected?: true
    (2185) NetConnection.onStatus:
    fmsVer = RED5/0,9,0,0
    capabilities = 31
    description = Connection succeeded.
    code = NetConnection.Connect.Success
    level = status
    Việc kết nối đã ok nhưng để đọc 1 file .flv trong folder Streams thì chưa được , bạn Khánh Hưng chia sẻ cho mình cách cấu hình trong folder oflaDemo nhé để làm sao đọc được file .flv . Thanks !

    1. Bạn muốn đọc file .flv là như thế nào nhỉ? Nếu bạn muốn play file flv thì bạn thử tìm hiểu chức năng Streaming Audio/Video (FLV and MP3) của Red5 nha

  7. Mình đã lưu được file .flv rùi.
    Các bạn cho mình hỏi là giờ mình cài 1 máy làm máy chủ Red5 rùi mình dùng 1 máy khác kết nối tới .
    lúc trước dùng dường link trên localhost là : rtmp://localhost/oflaDemo
    giờ mình dùng rtmp://192.168.1.10/oflaDemo không kết nối được .
    Bạn nào có cách khắc phục được xin giúp đỡ .Cảm ơn !

    1. Bạn đọc thêm bài Cấu hình Red5 trên Windows Server 2003 đi, trong mục Red5 á

  8. Cảm ơn Khánh Hưng,
    Thật đơn giản là khi cài Red5 Server mình add ip của server vào là ok.
    Lúc này việc kết nối client to server trong mạng LAN trong vòng 3s với link : rtmp://192.168.1.10/oflaDemo . Nếu thực hiện kết nối internet lúc này ta phải NAT vào ip Red5 server hoặc dùng doamin với link
    rtmp://lhu.edu.vn/oflaDemo . thaks !

    1. Hì hì! Không có chi. Chúng ta cùng chia sẻ với nhau thui. Có thể những cuộc đối thoại giữa mình với bạn sẽ có ích cho nhiều người dùng Red5 sau này

  9. Mấy bữa nay mình đang viêt hóa file Publish.swf thay đổi hình ảnh và chuyển sang tiếng việt mà hoài không được ngoài việc thay được cái logo , mình đã dùng nhưng chương trình dịch ngược sang file .fla nhưng khi mở bằng flash cs5 thì báo error không chạy được , chuyển sang flex cũng Error luôn , dùng chỉnh trực tiếp như program URL Action Editor thì gặp nhiều hạn chế . các program như Sothing swf Decompile , sothing swf quicker , flash Decompiler trillix cũng vậy luôn .Bạn nào đã có nghiêm cứu về vấn này xin chỉ giáo . Thanks !

Leave a Reply

Your email address will not be published. Required fields are marked *