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

 

posted @ 2013-01-05 15:32  xiaoSoldier  阅读(1350)  评论(0编辑  收藏  举报