如何实现Web应用程序的屏幕共享？ [英] How to implement screens sharing for web application?

查看：432
本文介绍了如何实现Web应用程序的屏幕共享？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

<强>序言即可。我想问一下，如何在网络上创建桌面屏幕共享解决方案，但后来发现有很多这样的问题。用几个字符串来回答这个任务非常复杂。所以我花了一些时间试图找到合适的解决方案。似乎我找到了一个 - 只是想分享它。

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.

初始任务：我们有一个Web应用程序。我们需要找到一种方式让用户与任何其他用户共享他的屏幕。实现于：Win 7 x64，Java，Wowza-3.5.0。

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?

推荐答案

用几句话来表达整个过程：借助JavaWebStart（jlnp），通过网页上的链接，用户启动用Java编写的Swing应用程序，每秒钟他桌面的截图。在此之后，它将其编码为videostream并将此流发送到Wowza-server。 Wowza能够将此流重新播放给任何数量的用户，可以通过Flash播放器访问流。

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.

详细步骤：

1。安装Wowza（必填）。

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

此外，我将wowza安装目录称为[wowza-root]

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

步骤检查 - 开始 - 所有应用程序 - Wowza Media Server 3.5.0 - Wowza启动。当服务器启动并且您将看到消息

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!"

打开浏览器并输入：

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。在Wowza上启动示例电影（可选）。

下一步 - 实际流式传输某些内容，[wowza-root]拥有所需的一切。

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


  • 输入目录 [wowza-root] \examples

  • 右键单击 installall.bat 并选择以管理员身份启动以安装所有必需的播放器。

  • 输入目录 [wowza-root] \ examples \ VideoOnDemandStreaming \FlashHTTPPlayer **并点击** player.html 以在浏览器中启动此文件。点击连接。
    一步检查：你应该看看关于兔子的搞笑电影。你可以在这里提交这部电影： [wowza-root] \content\sample.mp4

  • 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共享您的桌面（必填）。

好，我们的服务器启动并运行（WOWZA IS RUNNING）。现在是时候启动应用程序来制作我们桌面的截图。幸运的是，它已经由Dele Olajide编写，上帝保佑这个人。请查看此链接了解详情（ http://code.google.com/p/red5-screenshare/ ），以供下载（ http://code.google。 com / p / red5-screenshare / downloads / list ） - 您需要下载screenshare.zip文件。

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.

将其解压缩到任何目录。我们将从bat-file启动此应用程序。解压后的目录中已有两个bat文件 - do_run1.bat 和 do_run2.bat 。我刚刚复制了其中一个文件并将其命名为 do_run_my.bat ，其内容应如下所示：

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

其中


  • C：\ Program Files\Java\jdk1.6.0_26\bin\java - 正确的java路径

  • screenshare.jar - 我们应该使用什么jar（可以在解压缩的文件夹中找到。）

  • org.redfire.screen.ScreenShare - 主类

  • localhost - Wowza的主机

  • 屏幕共享 - 应用程序名称（重要）

  • 1935 - Wowza港口

  • ss1 - 流名称（重要）

  • flashsv1 - 视频流的编码。

  • "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.

您唯一需要更改的是 - 设置java的正确路径。您现在可以启动它！

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

步骤检查：您应该看到应用程序屏幕。巨大的成功！但是，如果单击开始共享按钮，您将在控制台中收到错误，Wowza中缺少屏幕共享应用程序文件夹。没关系，这意味着现在我们正走在正确的轨道上。退出SWING-application。

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。配置WOWZA接受SWING APP的流（必填）。


  • 输入 [wowza-root] \应用程序并创建名称为屏幕共享的文件夹（注意 - 这与SWING-app中的应用程序名称完全相同）

  • 输入 [wowza_root] \ conf 并再次创建文件夹屏幕共享。

  • 在 [wowza_root] \ conf 中，您可以找到名称为 Application.xml 的文件。将此文件复制到您刚刚创建的 [wowza_root] \ confconf \ nbsp> 文件夹。

  • 更改 Application.xml <中的一些属性/ strong>即可。设置此值：

  • 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 =无

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

现在重启Wowza。

步骤检查：再次通过bat-file启动SWING-APP。现在而不是错误你应该看到这样的东西，这意味着建立了与服务器的连接：

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。观看您的信息流（可选）。
现在最愉快的部分 - 了解所有这些员工是如何一起工作的。
- 输入 [wowza-root] \examples\LiveVideoStreaming \FlashRTMPPlayer **并启动** player.html 。请注意，在以下两个参数中都使用了应用程序名称和流名称，这与我们在SWING-APP中配置的完全相同。

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

和单击连接按钮。

步骤检查：您将看到共享桌面！所以任务完成 - 至少是它的初始阶段。

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

6。在网上启动Flash播放器（可选）
太棒了！现在我们有了工作解决方案，只有一件事尚未完成 - 我们正在从Windows目录启动播放器，而网络上的其他人无法访问它。所以 - 问题是什么，让我们部署一个。

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.


  • 首先你要读完这个： http://www.wowza.com/forums/content.php?49

  • 接下来转到 http://www.osmf.org/configurator/fmp/#

  • 在视频源字段中插入您的信息流链接（当然，SWING-APP应该在共享模式下工作）： rtmp：// localhost：1935 / screenshare / ss1

  • 单击预览。你应该看到你流。

  • 现在只需将整个代码从预览嵌入代码复制到实际部署在应用服务器上的任何网页 - 这就是全部。您可以向任何用户提供此页面的链接，他将能够看到您的信息流。

  • 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。转到动态流名称而不是静态（可选）

您可能已经注意到，现在我们的屏幕共享正在运行，但因为我们正在供应流名称通过配置到我们的SWING-APP，没有办法同时用于多个用户。我不会详细描述如何处理它，只需简短说明。

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.

如果你检查 screenshare.jar ，你会发现这个jar实际上包含了SWING-application的所有编译和源代码。可以根据您的需要修改源代码并返工初始应用程序。在我的情况下，我只是将当前时间（以毫秒为单位）添加到提供的流名称和消息窗口，在单击开始流按钮后显示如下内容：

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

正如您在链接中看到的那样 - 我只是将流地址作为查询字符串添加到我的html的URL中嵌入播放器代码的页面位于。另外，我想提供此页面的代码。它非常简单 - 在javascript的帮助下，我从请求字符串中提取参数，并将提取的参数放在我的html页面上，其中嵌入了代码来自p.6

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

这篇关于如何实现Web应用程序的屏幕共享？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
Java开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆