javaswingrtmpwowzascreensharing

How to implement screens sharing for web application?

Prologue. I wanted to ask, how to create solution for desktop screen sharing on web, but then found out that there are a lot of such questions. And that task is quite complicated to answer it in couple of strings. So I spent some time trying to find appropriate solution. It seems that I found one – just want to share it.

Initial task: we have a web application. We need to find a way for a user to share his screen with any other users. Implemented on: Win 7 x64, Java, Wowza-3.5.0.

How can we achieve this?

Solution

  • Whole process in few words: Via link on web-page with help of JavaWebStart (jlnp), user launches Swing-application written on Java, that makes a screenshot of his desktop every second. After this it encodes it as videostream and sent this stream to Wowza-server. Wowza is able to restream this stream to any number of users, that can access the stream via flash-player.

    Detailed steps:

    1. Install Wowza(mandatory).

    Further I will be referring wowza installation directory as [wowza-root]

    Step check: after installation is finished – Start – All Applications – Wowza Media Server 3.5.0 – Wowza startup. When server will be launched and you’ll see message 

    “Wowza Media Server is started!”

    open browser and type:

    http://localhost:1935/

    You should see something like this:

    Wowza Media Server 3 Developer Edition (Expires: авг 03, 2013) 3.5.0 build2989

    If so –we are done with first step.

    2. Launch example movie on Wowza (optional).

    Next step – to actually stream some content and [wowza-root] has everything necessary for it.

    3. SWING-app to share your desktop (mandatory).

    Good, our server up and running (WOWZA IS RUNNING). Now it is time to launch application that will make screenshots of our desktop. Fortunately, it is already written by Dele Olajide, god bless this man. Check this link for details (http://code.google.com/p/red5-screenshare/), and this for download (http://code.google.com/p/red5-screenshare/downloads/list) – you need to download screenshare.zip file.

    Unzip it to any directory. We will start by launching this app from bat-file. There are already two bat files in the unpacked dir – do_run1.bat and do_run2.bat. I just copied one of this files and named it as do_run_my.bat and it content should look like this:

    "C:\Program Files\Java\jdk1.6.0_26\bin\java" -classpath screenshare.jar org.redfire.screen.ScreenShare  localhost screenshare 1935 ss1 flashsv1
pause

    where

    The only thing that you need to change – is to set correct path to your java. You could launch it now!

    Step check: you should see application screen. Great success! But if you click “Start sharing” button you’ll get an error in console, that screenshare application folder is missing in Wowza. It is OK and means that now we are on a right track. Exit SWING-application.

    [ERROR] [New I/O client worker #2-1] org.redfire.screen.ScreenClientHandler - closing channel, server resonded with error: [0 COMMAND_AMF0 c3 #0 t0 (0) s207] name: _error, transactionId: 1, object: null, args: [{level=error, code=NetConnection.Connect.Rejected, description=Connection failed: Application folder ([install-location]/applications/screenshare) is missing., clientid=8.87236417E8}]

    4. Configure WOWZA to accept stream from our SWING APP (mandatory).

    Step check: launch SWING-APP again via bat-file. Now instead of error you should see something like this, that means that connection with server is established:

    [INFO] [New I/O client worker #1-1] org.redfire.screen.ScreenClientHandler - onStatus code: NetStream.Publish.Start
+++ [0 VIDEO c5 #1 t166 (0) s255355]
+++ [1 VIDEO c5 #1 t1169 (1003) s116522]
+++ [1 VIDEO c5 #1 t2171 (1002) s53049]
+++ [1 VIDEO c5 #1 t3178 (1007) s53667]

    5. Watching your stream (optional). Now the most pleasant part – to see how all this staff is working together. - Enter [wowza-root]\examples\LiveVideoStreaming\FlashRTMPPlayer** and launch **player.html. Please note, that in both parameters below application name and stream name are used, that exactly the same, like we configured in our SWING-APP.

    Server: rtmp://localhost/screenshare
Stream: ss1

    And click “Connect” button.

    Step check: You will see your shared desktop! So task is done – at least its initial phase.

    6. Launching flash-player on web (optional) Great! Now we have working solution, only one thing that is not done yet – we are launching player from Windows directory and it is not accessible to other people on web. So – what the problem, let’s deploy one.

    7. Going to dynamic stream-name instead of static (optional)

    As you probably noticed, right now our screen-sharing is working, but because we are supplying stream name via config to our SWING-APP, there is no way to use it for more then one user simultaneously. I will not be describing in details how to handle it, just give a short note.

    If you check screenshare.jar you will find that this jar actually contains all compiled and source code of SWING-application. It is possible to modify the source and rework initial app to your needs. In my case I just added current time in milliseconds to supplied stream name and message window that shows something like this after “Start Stream” button is clicked:

    Send this link to any person you want to share you screen with:
http://localhost:8080/player.htm?src=rtmp%3A%2F%2Flocalhost%3A1935%2Fscreenshare%2Fss1360243745881

    As you see in the link – I just add stream address as query string to the URL where my html page with embedded player code is situated. Also I want to provide code of this page. Its pretty simple – with help of javascript I extracted parameter from request string and put extracted parameter where it should be on my html page with embedded code from p.6

    <html>
<head></head>
<body>

<SCRIPT LANGUAGE="JavaScript">

    var myQueryString = document.location.search;

    // remove the '?' sign if exists
    if (myQueryString[0] = '?') {
        myQueryString = myQueryString.substr(1, myQueryString.length - 1);
    }


    document.write(
        '<object width="600" height="409">\n' +
            '<param name="movie" value="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf" />\n' +
            '</param>\n' +
            '<param name="flashvars" value="' + myQueryString +'" />\n' +
            '</param>\n' +
            '<param name="allowFullScreen" value="true" />\n' +
            '</param>\n' +
            '<param name="allowscriptaccess" value="always" />\n' +
            '</param>\n' +
            '<embed src="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="600" height="409" flashvars="' + myQueryString +'"></embed>\n' +
            '</object>'
    );

</SCRIPT>

</body>
</html>

    That is all. I hope it will save some time to somebody. Good luck