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