Friday, July 17, 2009

Integrating Red5, Xuggler and Pure-Data - Part 2

In this post, I demonstrate how to use Red5, Xuggler and PD (Pure-Data) together for frequency analysis of the sound.

What we will try to do is
  1. Get audio signal from flash client (handled by flash & red5)
  2. Decode audio file and get raw audio data (handled by xuggle)
  3. Send the raw audio stream to pure-data (no quick solution)
  4. Get the pitch of the sound (handled by pure-data)
  5. Send the pitch of the sound back to red5 (no quick solution)
  6. Send the pitch of the sound back to client (handled by red5 & flash
In this post, I will show how to setup the environment for development on Red5.

In order to develop application in Red5 you need to have an IDE (Integrated Development Environment). Even though you can use command line java compiler (javac) and your favorite text editor (notepad :)), I recommend you to use an IDE.

Eclipse is an open source java based IDE. You can download Eclipse from http://www.eclipse.org/downloads. Download and install Eclipse IDE for Java Developers.

When you run Eclipse for the first time, it will ask you the workspace directory. Workspace is a directory in which all your projects resides (for example java). You can enter <RED5_HOME>\webapps\ as the workspace if you will use Eclipse only for this project. Replace <RED5_HOME> with the directory where you install Red5 (ex. c:\Program Files\Red5).

In the previous post, we install audiotranscoder application. Now we will get the code for this application, change and compile it again.

To continue please first install audiotranscoder demo application as described here.

Now you have audiotranscoder folder under webapps directory in Red5 installation folder. In order to change audiotranscoder application we need to get source code of this demo application first. You can get the source code of audiotranscoder application from svn archieve. Since The source code is just two files you can download them directly from the following web page:
http://code.google.com/p/xuggle/source/browse/#svn/trunk/java/xuggle-xuggler-red5/src/com/xuggle/red5/demo

Download AudioTranscoderDemo.java and AudioTranscoderDemoAdapter.java.

Create a new directory called src under webapps\audiotranscoder. Also create com\eb\red5 directories under src directory. Copy the two java files under this directory. At the end you should have the following files:

  • c:\Program Files\Red5\webapps\audiotranscoder\src\com\eb\red5\AudioTranscoderDemo.java
  • c:\Program Files\Red5\webapps\audiotranscoder\src\com\eb\red5\AudioTranscoderDemoAdapter.java
Now we will update these files to reflect our needs.

First update the package declaration in both files from

package com.xuggle.red5.demo;

to

package com.eb.red5;


Open WEB-INF\red5-web.xml file, find web.handler and change it as the following

<bean id="web.handler"
class="com.eb.red5.AudioTranscoderDemoAdapter"
init-method="init">
<!-- Have the profiler spit out data every 15 seconds -->
<property name="profilerFrequency" value="15"/>
</bean>

This will tell red5 the name of the class which is responsible to handle the rtmp requests.

Create a folder called lib under WEB-INF directory. Copy <XUGGLE_HOME>\share\java\jars\slf4j-api.jar and <XUGGLE_HOME>\share\java\jars\commons-cli.jar files to lib folder. Also you can select copy these files under <RED5_HOME>\lib folder instead of <READ5_HOME>\webapps\audiotranscoder\WEB-INF\lib folder. Download and copy jetm.jar file under lib folder.

Now open eclipse. Select the workspace (c:\program files\red5\webapps). Click File/New/Java Project from main menu. Enter project name as "audiotranscoder". Click Next.
In the next screen, right click on src folder and click on "Use as Source Folder". As default output folder enter audiotranscoder/WEB-INF/classes. If there is no classes folder create it manually.
Click on Libraries tab. Click on "Add Library". This will open another form. In this form select "JRE System Library", click next and finish. Click on "Add External JARs..." Select xuggle-xuggler.jar, xuggle-xuggler-red5-3.0.662.jar and spring-core-2.5.6.jar from C:\Program Files\Red5\lib folder. Click "Add External JARs..." again and now select red5.jar from C:\Program Files\Red5 folder. Click on "Add JARs..." and select audiotranscoder\WEB-INF\lib\jetm.jar and slf4j-api-1.5.6.jar. It looks like the following


Click finish to create the project on Eclipse.


Now run Red5 from command line (c:\program files\red5\red5.bat). Open your browser and navigate to the address http://localhost:5080/demos/publisher.html.

Select Publish tab, enter stream name as "test", select audio device and click Start.
Select View tab. Enter "xuugle_test" as stream name, rtmp://localhost/audiotranscoder as server location and set Buffer to zero. Click on Connect.
Now you are publishing a stream named "test", it is decoded and encoded again (using PCM which is the raw format) and published with the stream name "xuggle_test".

What we will do now is to get the sound data from PCM stream.

PCM stands for Pulse-Code Modulation. See Wikipedia article for more information.

Now click on File/New/Class from Eclipse main menu. Enter com.eb.red5 as package, AudioListener as the name of the class and com.xuggle.red5.AudioSamplesListener as superclass. Leave other options as is and click Finish.



Paste the following code into AudioListener.java file.

package com.eb.red5;

import com.xuggle.red5.AudioSamplesListener;
import com.xuggle.xuggler.IAudioSamples;
import com.xuggle.xuggler.IAudioSamples.Format;

public class AudioListener extends AudioSamplesListener {

@Override
public IAudioSamples postDecode(IAudioSamples object) {
// TODO Auto-generated method stub
long N = object.getNumSamples();
for (long i=0;i<N;i++)
{
long sample = object.getSample(i, 0, Format.FMT_S16);
System.out.println(sample);
}
return super.postDecode(object);
}

@Override
public IAudioSamples postResample(IAudioSamples object) {
// TODO Auto-generated method stub
return super.postResample(object);
}

@Override
public IAudioSamples preEncode(IAudioSamples object) {
// TODO Auto-generated method stub
return super.preEncode(object);
}

@Override
public IAudioSamples preResample(IAudioSamples object) {
// TODO Auto-generated method stub
return super.preResample(object);
}

}

AudioListener will be responsible for listening encoded and decoded streams. While Xuggle decodes the stream, it calls postDecode method with the parameter including the decoded sample. object.getNumSamples(); line gets the number of samples in the decoded part. Remember that postDecode method is called regularly for a single stream. The number of sample depends on configuration, so in your system it can be 256, 1024 or another number. Suppose that you are decoding a sample sound recorded 8kH. That means that every second we have 8000 samples. If the number of samples is 1024 postDecode method is called 8000/1024 ~= 8 times in a second. By using getSample method you can get raw data from decoded stream. Also you can get raw byte array from sample. Check Xuggler API documentation for further information.

For this to work you should also modify AudioTranscoderDemo.java file and have the following partial code in it.

Before:

Transcoder transcoder = new Transcoder(aStream,
outputStream, outputStreamInfo);


After:

AudioListener listener = new AudioListener();
Transcoder transcoder = new Transcoder(aStream,
outputStream, outputStreamInfo, null, listener, null);

With this code we create an instance of the class AudioListener and add this instance to the parameters of constructor of the Transcoder class.

Now Eclipse compiles your code automatically. You can restart Red5 server and check the results. Run Publisher demo again and connect to audiotranscode as described earlier. If you run Red5 server from command line, you will be able to see sound data in the command line, one sample per line. You can do whatever you want with the raw sound data. You can apply filters on it, or you can process it for feature extraction.

In this post we learned how to setup eclipse to work with Red5-Xuggle application and get the raw sound data. In the next post we will use pure-data to get the pich of the sound.

Keep coding...

Thursday, July 16, 2009

Code Syntax Highlighting on Blogger.com

I found a good syntax highlighter at the following address http://alexgorbatchev.com/and use it on my blog at blogger.com. However there is one big problem with this Javascript library. Since blogger removes new lines (\n) and inserts < br > instead the code looks bad, it only consists of one line and has html break tags in it. In order to fix this problem I also add jQuery hosted by Google and come up with the following code for Layout of my blog:



<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js'/>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCSharp.js'/>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushXml.js'/>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushAS3.js'/>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJava.js'/>

<script language='javascript'>
$(document).ready(function () {
$("pre br").after("\n").remove();
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.0.320/scripts/clipboard.swf';
SyntaxHighlighter.all();
});
</script>

The only line for the fix for blogger.com is the following line:

$("pre br").after("\n").remove();

This line uses jQuery in order to modify HTML content. Basically, it finds all <br> tags which are under <pre> tags in DOM hierarchy, adds a new line after these tags and removes them from HTML. Just one line of code doing everything for us. Power of jQuery.

For each language you want to highlight you need to add the corresponding <script> tag. For example to highlight php you need to add the following line:

<script language='javascript' src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPhp.js'/>


You can check the following link to see the languages supported: http://alexgorbatchev.com/pub/sh/2.0.320/scripts/.

You need to put your code into a <pre> tag to highlight it. Also you need to add a class attribute like "brush:html" in order for the script know the language you are using. The final code looks like


<pre class="brush:jscript">
function doNothing()
{
var a = 1;
var b = 2;
var nothing = a*b;
// alert(nothing);
}
</pre>


and this is rendered as

function doNothing()
{
var a = 1;
var b = 2;
var nothing = a*b;
// alert(nothing);
}
You should remember that in order to insert < or > characters in HTML or XML, you need to replace them with &lt; and &gt; respectively.

Keep on posting.

Integrating Red5, Xuggler and Pure-Data - Part 1

In this post, I demonstrate how to use Red5, Xuggler and PD (Pure-Data) together for frequency analysis of the sound.

What we will try to do is
  1. Get audio signal from flash client (handled by flash & red5)
  2. Decode audio file and get raw audio data (handled by xuggle)
  3. Send the raw audio stream to pure-data (no quick solution)
  4. Get the pitch of the sound (handled by pure-data)
  5. Send the pitch of the sound back to red5 (no quick solution)
  6. Send the pitch of the sound back to client (handled by red5 & flash
This post includes the installation of required software and the code for the Step 1.

Red5 is an open source alternative to Flash Media Server (FMS). It is designed to serve and receive multimedia streams to the clients which support rtmp protocol. Xuggler is an open source C++ and java library for decoding, encoding and manipulating the video and audio data. Pure-data is an realtime graphical programming environment for audio, video and graphical processing.

The client application runs on a browser with Flash plugin installed. It access the microphone and sends the audio signal to Red5 using rtmp protocol. Flash uses encoded audio for the streams, therefore we need to decode the audio signal by using Xuggler library. Luckily, Xuggler is already integrated with Red5 and there is a sample red5 application for xuggler called audiotranscoder.

First you need to install Red5. As the time of writing, the latest version of Red5 is 0.8. You can download this version here for Microsoft Windows. For other OS please follow this link. Download the file and run the installer. It installs Red5 to default installation directory (probably C:\Program Files\Red5). It also adds a new windows service called Red5 which runs the server. You can start the service from Services (Control Panel/Administrator Tools/Services). Just right click on the Red5 service and click Start. Also you can manually start Red5 from command line. For this open a command line promt, go to the directory where Red5 is installed, run red5.bat file.


After you run Red5 server, from services or command line, open a browser window, and navigate to http://localhost:5080/. Red5 has also a built in web server by which you can install available applications. Click on the link "Click here to install demos." Red5 Application Installer will list all the available applications. You can select any application and click Install button to deploy that application to the Red5 server. Select audiotranscoder application and click Install.

Now download Xuggler and install it. Also download Xuggle-Xuggler-Red5 library. For this click on the Ivy downloads link. Select the version and download xuggle-xuggler-red5-xxx.jar file. Copy this file to the lib directory in the Red5 installation directory (possibly c:\program files\Red5\lib). Delete existing xuggle-xuggler-xxx.jar file in lib directory. Copy xuggle-xuggler.jar file from Xuggle installation folder (c:\program files\Xuggle\share\java\jars) to lib directory in Red5 installation folder. At the end you should have the following files in Red5 lib directory:
  • xuggle-xuggler.jar
  • xuggle-xuggler-red5-X.X.XXX.jar
Alter the environment variables with the following changes:
  • Add new environment variable RED5_HOME=C:\program files\Red5
  • Add new environment variable XUGGLE_HOME=C:\program files\Xuggle
  • Add Xuggle bin directory (C:\Program files\Xuggle\bin) to the PATH variable.
Now we will create a Flash client application which will access the microphone and send the audio to the Red5 server. Open Flash authoring tool and create new flash document and save it to a directory. Also create a new Action Script 3.0 file. Paste the following code and save the file to the directory <fla_directory>\com\eb\red5\FrequencyAnalysis.as (replace <FLA_DIRECTORY> with the directory where you save the .fla file in the previous step):


package com.eb.red5 {
import flash.media.Microphone;
import flash.events.NetStatusEvent;
import flash.display.Sprite;
import flash.net.NetConnection;
import flash.net.NetStream;
import flash.net.ObjectEncoding;
import flash.net.SharedObject;

public class FrequencyAnalysis extends Sprite {

private var netConnection:NetConnection;
private var nsPublish:NetStream;
private var microphone:Microphone;
private var so:SharedObject;

public function FrequencyAnalysis() {
trace("Initialization");
attachMicrophone();
netConnection=new NetConnection();
netConnection.addEventListener(NetStatusEvent.NET_STATUS,checkForConnection);
netConnection.objectEncoding=ObjectEncoding.AMF0;
netConnection.connect("rtmp://localhost/audiotranscoder",true);
}

public function receiveMessage(mesg:String) {
trace("Frequency is " + mesg);
}

private function checkForConnection(event:NetStatusEvent):void {
trace("Connection Status:"+event.info.code);
if (event.info.code == "NetConnection.Connect.Success") {
nsPublish=new NetStream(netConnection);
nsPublish.bufferTime=0;
nsPublish.attachAudio(microphone);
nsPublish.publish("user1","live");

so=SharedObject.getRemote("user1",netConnection.uri,false);
so.client=this;
so.connect(netConnection);
}
}

private function attachMicrophone() {
microphone=Microphone.getMicrophone();
microphone.gain=80;
microphone.rate=22;
microphone.setSilenceLevel(15,2000);
}
}
}

Enter com.eb.red5.FrequencyAnalysis as the class of the .fla file you created.

Download and install Pure-data extended.

In order to send the audio stream to pure-data we have to do some dirty things. First download netsend~ and netreceive~ routines for Pure-data from this web site. Go to download section and download netsend~ for pure-data for your operating system. Copy all .dll and .pd files to the extras folder in pure-data installation folder (probably C:\Program Files\pd\extra).

Open pure-data and create a new file as the following


In order to write this program in PD, first launch PD. Create a new empty file by clicking File/New from menu. In order to add the boxes press Ctrl-1 (or from menu select Put/Object) and write down adc~. Press Ctrl-1 again and write fiddle~. Press Ctrl-3 (or from menu select Put/Number). Organize the boxes as displayed in the figure. Connect the boxes by dragging mouse from the relevant port of one box to the relevant port of the other box. Now we wrote our first PD program. Not that tough :)

Now lets understand what this program does. First adc~ means analog-to-digital converter. It gets the microphone input and converts it to an digital audio signal. fiddle~ receives this signal and performs a pitch analysis on it. The first port at the bottom of fiddle~ box is the pitch of the signal. Since this port is connected to a number box we can see the pitch of the sound realtime using this box.

In order to run our sample just check Compute Audio checkbox in the main PD window. Now experiment with your voice and check the corresponding pitch.

In the next post, I will modify the sample Red5 application audiotranscoder to get the raw audio data.

Keep in rolling...