如何实现web应用程序的屏幕共享



序言。我想问,如何创建网络桌面屏幕共享的解决方案,但后来发现有很多这样的问题。这项任务很复杂,需要用几个字符串来回答。所以我花了一些时间试图找到合适的解决方案。我似乎找到了一个——只是想分享一下。

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

我们如何才能做到这一点?

整个过程用几个词来说:通过JavaWebStart(jlnp)帮助下的网页链接,用户启动用Java编写的Swing应用程序,该应用程序每秒都会对他的桌面进行截图。之后,它将其编码为视频流,并将此流发送到Wowza服务器。Wowza可以将该流重新发送给任何数量的用户,这些用户可以通过flash播放器访问该流。

详细步骤:

1.安装Wowza(必需)

  • 从这里获取合适的安装程序(在我的Win案例中):http://www.wowza.com/pricing/installer
  • 从这里获得免费的开发者许可证:http://www.wowza.com/pricing/trial(您需要提供电子邮件,有效期为180天的密钥将发送到那里)
  • 关注关于流程的精彩视频:http://www.wowza.com/forums/content.php?288-入门-(视频教程)

此外,我将把wowza安装目录称为[wowza root]

步骤检查:安装完成后–启动–所有应用程序–Wowza Media Server 3.5.0–Wowza-启动。服务器何时启动,您将看到消息

“Wowza Media Server is started!”

打开浏览器并键入:

http://localhost:1935/

你应该看到这样的东西:

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

如果是这样,我们就完成了第一步。


2.在Wowza上启动示例电影(可选)

下一步——实际流式传输一些内容,[wowza-root]拥有所有必要的东西。

  • 进入目录[wowza-root]\examples
  • 用鼠标右键单击installall.bat并选择"以管理员身份启动"以安装所有必要的播放器
  • 输入dir[wowza-root]\examples\VideoOnDemandStreaming\FlashHTTPPlayer**,然后单击**player.html在浏览器中启动此文件。单击"连接"。步骤检查:你应该看一部关于兔子的搞笑电影。您可以在此处提交此电影:[wowza root]\content\sample.mp4

3.使用SWING应用程序共享您的桌面(必需)

很好,我们的服务器启动并运行(WOWZA正在运行)。现在是时候启动应用程序了,它将对我们的桌面进行屏幕截图。幸运的是,它已经是Dele Olajide写的,上帝保佑这个人。查看此链接了解详细信息(http://code.google.com/p/red5-screenshare/),以及此供下载(http://code.google.com/p/red5-screenshare/downloads/list)–您需要下载screenshare.zip文件。

将其解压缩到任何目录。我们将从bat文件启动这个应用程序开始。在解压缩的目录中已经有两个bat文件——do_run1.batdo_run2.bato_run_my.bat.它的内容应该如下所示:

"C:Program FilesJavajdk1.6.0_26binjava" -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的主机
  • screenshare–应用程序名称(重要)
  • 1935年-沃扎港
  • ss1–流名称(重要)
  • flashsv1–视频流编码

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

步骤检查:您应该看到应用程序屏幕。大获成功!但若你们点击"开始共享"按钮,你们会在控制台中得到一个错误,那个么Wowza中的屏幕共享应用程序文件夹就不见了。这是可以的,意味着我们现在正走在正确的轨道上。退出SWING应用程序。

[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应用程序的流(强制)

  • 输入[wowza-root]\applications并在那里创建名为screenshare的文件夹(注意,这与SWING应用程序中的应用程序名称完全相同)
  • 输入[wowza_root]\conf,然后再次创建文件夹屏幕共享
  • [wowza_root]\conf中,您可以找到一个名为Application.xml的文件。将此文件复制到您刚刚创建的.wowza_root][conf\screenshare文件夹中
  • 更改Application.xml中的一些属性。设置这些值:

    StreamType=活动HTTPStreamers=杯状流、平滑流、三角流LiveStreamPacketizers=cupertinostreamingpacketizer,smoothstreamingpacketizer播放方法=无

  • 现在重新启动Wowza。

步骤检查:通过bat文件再次启动SWING-APP。现在,您应该看到这样的错误,这意味着与服务器的连接已经建立:

[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中配置的一样。

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

然后点击"连接"按钮。

步骤检查:您将看到您的共享桌面!所以任务完成了——至少在最初阶段是这样。


6.在网络上启动flash播放器(可选)太棒了!现在我们有了一个可行的解决方案,只有一件事还没有完成——我们正在从Windows目录启动播放器,其他人无法访问它。那么,有什么问题,让我们部署一个。

  • 首先,您需要通读以下内容:http://www.wowza.com/forums/content.php?49
  • 下一步转到http://www.osmf.org/configurator/fmp/#
  • 在"视频源"字段中插入流的链接(当然,SWING-APP应该在共享模式下工作):rtmp://localhost:1935/screenshare/ss1
  • 单击"预览"。你应该看到你流
  • 现在,只需将"预览嵌入代码"中的全部代码复制到实际部署在应用程序服务器上的任何网页上即可。您可以将此页面的链接提供给任何用户,他将能够看到您的流

7.转到动态流名称而不是静态(可选)

正如您可能注意到的,现在我们的屏幕共享正在工作,但由于我们通过配置向SWING-APP提供流名称,因此无法同时为多个用户使用它。我不会详细描述如何处理它,只是简单说明一下。

如果您检查screenshare.jar,您会发现这个jar实际上包含SWING应用程序的所有编译和源代码。可以根据您的需要修改源代码并重新制作初始应用程序。在我的例子中,我只是在提供的流名称和消息窗口中添加了当前时间(以毫秒为单位),点击"开始流"按钮后显示如下内容:

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 的代码

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

仅此而已。我希望这能为某人节省一些时间。祝好运

相关内容

  • 没有找到相关文章

最新更新