解决方法
演示 – http://jsbin.com/olugOri/4/edit
编辑:(评论中重要讨论的更多可见性)
如果媒体遵守Same-Origin Policy,Firefox确实支持MediaElementSource,但是当尝试使用来自远程源的媒体时,Firefox不会产生错误.
规范并不是真正具体(双关语),但我被告知这是一个预期的行为,问题实际上是Chrome …这是Blink实现(Chrome,Opera)need to be updated to require CORS.
MediaElementSource Node and Cross-Origin Media Resources:
From: Robert O'Callahan <robert@ocallahan.org>
Date: Tue,23 Jul 2013 16:30:00 +1200
To: "public-audio@w3.org" <public-audio@w3.org>
HTML media elements can play media resources from any origin. When an
element plays a media resource from an origin different from the page’s
origin,we must prevent page script from being able to read the contents of
the media (e.g. extract video frames or audio samples). In particular we
should prevent ScriptProcessorNodes from getting access to the media’s
audio samples. We should also information about samples leaking in other
ways (e.g. timing channel attacks). Currently the Web Audio spec says
nothing about this.I think we should solve this by preventing any non-same-origin data from
entering Web Audio. That will minimize the attack surface and the impact on
Web Audio.My proposal is to make MediaElementAudioSourceNode convert data coming from
a non-same origin stream to silence.
如果这个提议符合规范,那么开发人员几乎不可能意识到他的MediaElementSource无法正常工作的原因.就像现在一样,在< audio>上调用createMediaElementSource(). Firefox 26 actually stops the <audio>
controls from working at all中的元素并且不会抛出任何错误.
使用来自远程原点的音频/视频数据可以做些什么危险的事情?一般的想法是,如果不将同源策略应用于MediaElementSource节点,一些恶意javascript可以访问只有用户应该访问的媒体(会话,VPN,本地服务器,网络驱动器)并发送其内容 – 或一些表示它 – 对攻击者.
默认情况下,HTML5媒体元素没有这些限制.您可以使用< audio>,< img>或< video>在所有浏览器中添加远程媒体.元素.只有当您想要从这些远程资源中操作或提取数据时,才会发起同源策略.
[It’s] for the same reason that you cannot dump image data cross-origin via
<canvas>
: media may contain sensitive information and therefore allowing rogue sites to dump and re-route content is a security issue. – 07005