How to implement screens sharing for web application?

Question

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).

• Get appropriate installer (in my case for Win) from here:http://www.wowza.com/pricing/installer
• Get free developer license from here: http://www.wowza.com/pricing/trial (you will need to provide e-mail, key valid for 180 days will be send there).
• Follow nice video about process: http://www.wowza.com/forums/content.php?288-Getting-Started-(Video-Tutorial)

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.

• Enter directory [wowza-root]\examples
• RightMouse click on installall.bat and select “Launch as Administrator” to install all necessary players.
• Enter dir [wowza-root]\examples\VideoOnDemandStreaming\FlashHTTPPlayer** and click on **player.html to launch this file in your browser. Click connect. Step check: you should see funny movie about rabbit. You could file with this movie here: [wowza-root]\content\sample.mp4

---

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

• "C:\Program Files\Java\jdk1.6.0_26\bin\java" – correct path to your java
• screenshare.jar – what jar we should use (can be found in unzipped folder).
• org.redfire.screen.ScreenShare – main class
• localhost – host of Wowza
• screenshare – application name (important)
• 1935 – port of Wowza
• ss1 – stream name (important)
• flashsv1 – encoding for your video stream.

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).

• Enter [wowza-root]\applications and create folder with name screenshare there (note – this is exactly the same name as application-name in our SWING-app)
• Enter [wowza_root]\conf and again create folder screenshare.
• In [wowza_root]\conf you can find a file with name Application.xml. Copy this file to [wowza_root]\conf\screenshare folder you just created.

• Change some properties in Application.xml. Set this values:

  StreamType=live HTTPStreamers=cupertinostreaming,smoothstreaming,sanjosestreaming LiveStreamPacketizers=cupertinostreamingpacketizer, smoothstreamingpacketizer, sanjosestreamingpacketizer PlayMethod=none

• Now restart Wowza.

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.

• First you need to read through this: http://www.wowza.com/forums/content.php?49
• Next go to http://www.osmf.org/configurator/fmp/#
• Insert in “Videosource” field link to your stream (of course, SWING-APP should work in sharing mode): rtmp://localhost:1935/screenshare/ss1
• Click Preview. You should see you stream.
• Now just copy the whole code from “Preview Embed Code” to any web page that actually deployed on application server – and that is all. You can give link to this page to any user and he will be able to see your stream.

---

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

Comments

[Java Curious ღ]

Too Great Article Man.. Awesome, Help me a Lot. Will You see this once. stackoverflow.com/questions/20795755/…

[Java Curious ღ]

Sir in step 4. you have told to copy file application.xml to screenshare directory in \conf directory, but it is not available in that dir, it is in \applications directory. shall I have to copy file into it or else ? Help..

[Pradeepta]

Thank you @dim1902.It help me a lot.

[Pradeepta]

In Step3 you have told to start the app with a bat file but how to do that in my linux server?

[dim1902]

Instruction is written for Win environment. But you can check for *.ch script in archive, or to create one.

[Pradeepta]

Thanks @dim.I wanted it should be done by clicking a link on the browser and it should work both in local machine(windows) as well as on server(linux server).Please help.

[مسعود]

@dim1902 Thanks for the detailed answer. Is it possible to also interact with the screen? for example the changes I made is transferred to the desktop?

[dim1902]

@Masood Sure. Application that making screenshots is usual Swing application. You can re-work it in any way necessary to your needs, create new jar and you should see your changes. For example, I re-implemented initial code of screeenshot.jar quite significantly.

[مسعود]

@dim1902 Thanks a lot for the help