How to capture audio from browser and save it on a server?

Question

I'm currently working on a project - an online education system, and I need to make it possible for studs to introduce themselves in a 30 sec audioclip.

I need to implement it with Adobe Flash. The problem is that I have no idea how the Flash + Red5 duo work together. There aren't that many helpful recourses online, at least for me since I'm a beginner at Flash. (I do mostly PHP stuff.)

1) When you connect to the server, how do you make it record audio from flash client?

2) After 30 secs, how do you stop recording and save file in a specific folder on a server?

3) How do I move this file to the server's HTTP folder, so that I could access it from homepage after that?

Please note I'm a beginner at flash and Red5, so I really need detailed explonation from you guys.

Thanks a lot!

score 1 · Accepted Answer · answered Oct 26 '11 at 03:49

I'll try my best to make the answer clearly.

1) When you connect to the server, how do you make it record audio from flash client?

First of all, you need to know the connection between server and client used protocol like RTMP. So in the server side, we need to setup our address like rtmp://127.0.0.1/demoServer(in red5 demoServer is your app name). Next in the Flash side, we can connect server by NetConnection:

    import flash.net.NetConnection;
    public var nc:NetConnection;
    nc = new NetConnection();
    nc.connect("rtmp://127.0.0.1/demoServer");

I could definitely tell you, the 80% work are in the Flash-Client side. In order to capture voice, we need setup our Microphone:

    import flash.media.Microphone;
    public var mic:Microphone;
    mic = Microphone.getMicrophone();

After that we need a pipe to transport voice captured form microphone. Fortunately we have NetStream:

    import flash.net.NetStream;
    private var stream:NetStream;
    var sm:NetStream=new NetStream(nc);
    stream.attachAudio(mic);

The connection just like building a bridge so that stream can carry stuff form client to server. OK, the last thing wo need to do is publish:

    stream.publish("some name","record");

Now, you can see a .flv file named some name in the server side. This file will get bigger if you have opened microphone.

2) After 30 secs, how do you stop recording and save file in a specific folder on a server?

Create a 30 secs timer that begins at recording. Closing the stream When time out:

    import flash.utils.Timer;
    t = new Timer(1000, 30);
    t.addEventListener(TimerEvent.TIMER_COMPLETE, timerComplete);
    private function timerComplete(event:TimerEvent):void{
      //close the stream
      stream.close();
      mic.setSilenceLevel(0);
    }

By default, red5 will save file in \webapps\dictRed5Server\streams. If you want to change this, check this guide.

3) How do I move this file to the server's HTTP folder, so that I could access it from homepage after that?

Red5 can work together with apache tomcat and you can use a flv player to play those records.

I hope above snippets can help you. I suggest to you that can install red5 and run some demos and google what you do not understand.

score 0 · Answer 2 · answered Oct 24 '11 at 04:22

0

Dude the good part is that you know all the keywords - red5 especially. The bad part is that you need to do alot of reading to configure and make it working.

The best part is that you will be so happy and proud of yourself . . Once you complete it . . You have no idea.

Keep going. Remember to post back your findings.

answered Oct 24 '11 at 04:22

Deian

1,237
15
31

That is for sure. Could you at least give me some advice about how to make it happen? – NoobDev4iPhone Oct 24 '11 at 05:57
From your initial post sounds like you know what your doing, am i correct. Fetch the red5 docs and exqmples and play with them. They actually have a demo that records sound from the browser – Deian Oct 24 '11 at 12:52

score 0 · Answer 3 · answered Oct 25 '11 at 10:23

If you can target Flash Player 10.1 or above then you may be able to avoid FMS or Red5 altogether. You can access the raw PCM data and then upload this to a script that stores it for you. Either your SWF or the script will have to save this data as a sound file, for example WAV or MP3.

Check out this article on the Adobe Developer Connection, it does most of what you want minus the uploading bit: http://www.adobe.com/devnet/air/flex/articles/using_mic_api.html

score 0 · Answer 4 · edited May 23 '17 at 10:09

As stated above if you target FP 10.1 or higher, you can avoid having to have a special server, and simply use the back-end you are used to.

In AS3 all you need to do is store the recorded PCM data in a ByteArray, and then send the ByteArray to your server; yet, if you want to compress it to save bandwidth, there are a ton of libraries out there that can help you.

I wrote a few code snippets you may find useful when it comes to understanding the basics of grabbing audio from the mic, and storing in a ByteArray.

http://wonderfl.net/c/zE8I

I tried to keep it as basic as possible, and to comment as much as I could; yet, if you need help, you can always ask.

With regard to sending a ByteArray to a server:

Sending ByteArray through as3 to PHP

Hope this helps.

How to capture audio from browser and save it on a server?

4 Answers4