How to implement screens sharing for web application?

java swing rtmp wowza screensharing
dim1902 picture dim1902 · Feb 7, 2013 · Viewed 11.4k times · Source

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?

Answer

dim1902 picture dim1902 · Feb 7, 2013

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.

  • 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

Related questions

How to add an image to a JPanel?

I have a JPanel to which I'd like to add JPEG and PNG images that I generate on the fly. All the examples I've seen so far in the Swing Tutorials, specially in the Swing examples use ImageIcons. I'm generating …

Read More
Java GUI frameworks. What to choose? Swing, SWT, AWT, SwingX, JGoodies, JavaFX, Apache Pivot?

There is quite a lot of gui frameworks out there for java, but what is recognized as today's framework of choice? The following is my understanding of the different frameworks, please correct me if im wrong. This is a very …

Read More
Popup Message boxes

I am unsure of how to code popup message box in my methods. public String verify(){ String result = "failed"; int authcode = staffBean.getVerifyCodeByName(getLoginUserName()); if (code == authcode){ result ="success"; } else{ //statement to popup an error message box } return result; } I …

Read More