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

Question

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

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

我们怎样才能做到这一点？

Answer 1

整个过程只需几句话:在JavaWebStart(jlnp)的帮助下,通过网页上的链接,用户启动用Java编写的Swing应用程序,每隔一秒对其桌面进行一次截图.在此之后,它将其编码为videostream并将此流发送到Wowza-server.Wowza能够将此流重定向给任意数量的用户,这些用户可以通过flash-player访问流.

详细步骤:

1.安装Wowza(必填).

• 从这里获取适当的安装程序(在我的情况下为Win):http://www.wowza.com/pricing/installer
• 从这里获得免费的开发人员许可证:http://www.wowza.com/pricing/trial(您需要提供电子邮件,密钥有效期为180天将发送到那里).
• 关注流程的精彩视频:http://www.wowza.com/forums/content.php？ 288-Getting-Started-(Video- Tutorial)

另外我将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-app共享您的桌面(必填).

好,我们的服务器启动并运行(WOWZA正在运行).现在是时候启动应用程序来制作我们桌面的截图.幸运的是,它已经由Dele Olajide编写,上帝保佑这个人.请查看此链接以获取详细信息(http://code.google.com/p/red5-screenshare/),并进行下载(http://code.google.com/p/red5-screenshare/downloads/list) -你需要下载screenshare.zip文件.

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

"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 - 视频流的编码.

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

步骤检查:您应该看到应用程序屏幕.巨大的成功!但是,如果单击"开始共享"按钮,您将在控制台中收到错误,Wowza中缺少屏幕共享应用程序文件夹.没关系,这意味着现在我们正走在正确的轨道上.退出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根] \应用程序并创建文件夹名称萤幕出现(注意-这是完全一样的名字在我们的SWING-App应用程序名)
• 输入[wowza_root]\conf 并再次创建文件夹屏幕共享.
• 在[wowza_root]\conf中,您可以找到名为Application.xml的文件.将此文件复制到刚刚创建的[wowza_root]\conf\screenshare文件夹中.

• 在Application.xml中更改一些属性.设置此值:

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

• 现在重启Wowza.

步骤检查:通过bat-file再次启动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/#
• 在"Videosource"字段中插入指向您的流的链接(当然,SWING-APP应该在共享模式下工作):rtmp:// localhost:1935/screenshare/ss1
• 单击预览.你应该看到你流.
• 现在只需将整个代码从"预览嵌入代码"复制到实际部署在应用程序服务器上的任何网页 - 这就是全部.您可以向任何用户提供此页面的链接,他将能够看到您的信息流.

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

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

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

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>

就这些.我希望这会节省一些时间.祝好运