flex流媒体截图遇到安全沙箱问题的解决办法

阅读更多

http://m.baidu.com/from=844b/bd_page_type=1/ssid=0/uid=0/pu=usm%400%2Csz%401320_1001%2Cta%40iphone_2_2.3_3_533/baiduid=8C74EDB0B1E602333F5F1F221C0F50E7/w=0_10_fms%E5%AE%89%E5%85%A8%E6%B2%99%E7%AE%B1%E5%86%B2%E7%AA%81+%E4%B8%8D%E8%83%BD%E8%AE%BF%E9%97%AE127.0.0.1%3A1935%2Flive/t=iphone/l=3/tc?ref=www_iphone&lid=6167310246681768063&order=1&vit=osres&tj=www_normal_1_0_10&m=8&srd=1&cltj=cloud_title&dict=20&sec=38358&di=60178f57a3782bbb&bdenc=1&nsrc=IlPT2AEptyoA_yixCFOxXnANedT62v3IEQGG_ytK1DK6mlrte4viZQRASjbuL9iNH5H5wXD0sqdUgiPzRiBzzBAxrqxpsH9hbX8cgPq3gxCLHqIPhwViOwKWFiowz3C



解决ActionScript对FMS视频拍照的安全沙箱2123问题最近在做一个在线视频的网站，采用了FMS+ASP的架构，FMS负责视频流的广播，ASP页面通过加载一个播放器jwplayer实现对FMS所广播视频流的播放，这也是很多的视频网站采用模式，不再赘述，只表扬一下jwplayer播放器，相当的好用！网站有一个功能，需要在用户端实现对当前播放视频的截图，而客户又不允许使用类似QQ截图似的那种插件，要求通过flash播放器来实现，无奈，只好往深里去探究一下播放器了。通过一顿阅读源代码和查找相关资料，确定了通过给我们的jwplayer播放器写插件的方式来实现这个功能（其实这个插件还实现了好多其他功能：比如双击全屏、自动跳过预先设置的某几个时间段等）的方式，写jwplayer插件的相关知识可以在网上找到，也不再多说。进入正题：jwplayer使用的是flash的ActionScript语言，通过阅读相关API，发现了可以使用BitmapData类的draw方法来实现截图，然后通过JpegEncoder类来进行编码即可生成jpg图片数据，但flash存在一个安全问题，即通过这种方法在客户端生成的图片数据，是不能通过FileReference的save方法直接保存在用户本地的（又是flash的安全设置，蛋疼），需要将这些数据发送到后台，由后台来生成图片，如果用户需要使用这些图片的话，还需要想办法让用户进行下载。截图功能相关代码：1.引入包：import com.adobe.images.JPGEncoder;//jpg编码类import flash.display.*;//BitmapData类2.截图private var bitmap:BitmapData;private var encoder:JPGEncoder;bitmap = new BitmapData(width, height,false,0x000000);var req:URLRequest = new URLRequest('http://localhost:41921/Util/Clip');//处理图片数据的ASP控制器req.method = URLRequestMethod.POST;try{bitmap.draw(videoObject());//截图req.requestHeaders.push(new URLRequestHeader("Content-type","application/octet-stream"));req.data = encoder.encode(bitmap);loader.load(req);}catch(err:SecurityError){}代码中的loader用于向后台以流的形式发送图片数据，后台的保存方法如下：相关包：using System.IO;using System.Drawing.Imaging;保存图片代码：public void Clip(){int length = Request.TotalBytes;byte[] values = new byte[length];values = Request.BinaryRead(length);string imageName = "/Resources/Images/" + DateTime.Now.ToString("yyyyMMddHHmmss") + ".jpg";FileStream fs = new FileStream(Server.MapPath(imageName), FileMode.Create, FileAccess.Write);BinaryWriter bw = new BinaryWriter(fs);bw.Write(values);bw.Close();fs.Close();}如果一切都能顺利运行的话，就不用写这篇文章了，在 bitmap.draw(videoObject()); 这句运行的时候往往会产生“安全沙箱Error #2123错误”，这个错误说明出现了安全沙箱问题，相关说明：如果BitmapData的draw方法的对象和其所有子对象（如果是 Sprite 或 MovieClip 对象）与调用方不来自同一个域，或者不在调用方可通过调用 Security.allowDomain()方法访问的内容中，则调用 draw()将引发 SecurityError 异常。这说明所draw的视频对象和当前调用draw方法的这个swf（即jwplayer）不在同一个域内，所以出现了安全沙箱问题。因为jwplayer播放器所播放的视频来自FMS的rtmp流，而jwplayer及其所加载的插件(swf文件)在用户本地，可不是不在一个域内吗？找了下网上的资料，好多人都遇到了这个问题，却没有解决的办法，这里提出一个可行的办法：通过查找FMS、ActionScript的相关资料，发现“对于BitmapData的draw方法，在 Flash Player 9.0.115.0 及更高版本和 Adobe AIR 中，通过 RTMP 支持此方法。在 Flash Media Server 上，可以在服务器端脚本中控制对流的访问。…通过设置Client.audioSampleAccess 和 Client.videoSampleAccess 属性（，可以赋予用户端操作视频流的权限）。”理论总是让人不容易理解，结合本人的例子来说明：我的网站中，客户端所播放的视频来源都是FMS中的某一个application，比如：直播的话视频源为：rtmp://localhost:1935/live 点播的话视频源为：rtmp://localhost:1935/vod 其中的live和vod就是FMS服务器中的application，即用于提供某种视频服务的FMS服务器端ActionScript程序。当用户在打开视频的时候，播放器会根据视频的源（比如：rtmp://localhost: 1935/vod/a.flv）中的vod去连接FMS服务端的vod应用（位于 “FMS安装路径/ applications”文件夹下，相应的还有live应用），然后连接vod应用，并向其请求播放某个视频流，vod应用处理用户的连接请求和视频播放请求，并将相应的视频流推给客户端。我们要做的，就是在vod应用的onConnect处理方法中，为客户端赋予操作视频流的权限，正常来说，类似vod这种应用的文件夹下会有一个main.as文件（服务器端ActionScript程序），这个文件可以进行编辑，但有时候也会是一个main.far文件，这个就不好编辑了，没关系，在 FMS安装路径下，找到“samples\applications\vod”文件夹，将其中的main.asc文件复制到 FMS安装路径下的 “applications\vod”文件夹下，然后删除main.far文件，打开这个main.asc文件，找到其中的application.onConnect方法，然后找到//p_client.audioSampleAccess = "/";//p_client.videoSampleAccess = "/";两句代码，它们上边应该还有注释说明… 哈，其实FMS开发人员早就给我们考虑到这个功能了，只不过给注释掉了，好了，现在取消这两句的注释：即改为：p_client.audioSampleAccess = "/";p_client.videoSampleAccess = "/";然后重启FMS服务，再次在客户端使用截图功能，好了！客户端提示：截好并保存在服务器端的图片：注：本文所述方法只在基于FMS的rtmp视频流中应用成功，对于不使用FMS，播放本地视频的应用场景没有进行测试，但貌似那种方式不会存在安全沙箱问题，如有朋友需要进一步讨论，可以加QQ：563084310