有什么方法可以从远程视频中获取 canvas 的图像数据?
is any way to get image data from canvas, drawed from remote video?
我使用 html5 视频标签来播放视频。
然后我使用 canvas 元素来绘制视频帧。
视频来自远程源。
画框没有问题。但是从 canvas 获取图像数据时出现问题。我想获取图像数据来制作 img 元素或将数据发送到服务器以创建图像,但这是不可能的,因为使用 canvas 的操作是不安全的。
当我使用来自同一域的视频时,没有问题。
我发现的唯一一种方法是在服务器上制作脚本,它获取远程视频并输出它,然后我们将这个脚本作为视频元素的源。但这不是一个好主意,因为它会给服务器带来额外的负担。
我不确定我是否正确理解了有关使用 "cross-origin" 的文章?我认为远程视频所在的服务器必须发送 headers 如: "Access-Control-Allow-Origin: *" ,但如果我无权访问该服务器,例如我想使用 youtube 视频,则没有执行能力做到了吗?
简单的回答是,不,不幸的是。
如果您无法访问远程服务器以允许跨源使用,或者可以询问该网站的管理员(这在 YouTube 这样的网站上发生的可能性很小),则无法完成).
通常,您可以尝试通过提供 crossOrigin
属性来请求跨域使用:
<video ... crossOrigin="anonymous">...</video>
如果允许,您将在获取图像数据时看到数据。
解决方案
一种是将视频复制到您自己的服务器并从那里进行流式传输。
第二,使用代理服务器或脚本,就像您已经尝试过的那样。
是的,这两种情况都会影响您服务器上的流量(并且可能涉及版权等方面的法律问题)
抱歉,没办法。
我使用 html5 视频标签来播放视频。 然后我使用 canvas 元素来绘制视频帧。 视频来自远程源。 画框没有问题。但是从 canvas 获取图像数据时出现问题。我想获取图像数据来制作 img 元素或将数据发送到服务器以创建图像,但这是不可能的,因为使用 canvas 的操作是不安全的。 当我使用来自同一域的视频时,没有问题。 我发现的唯一一种方法是在服务器上制作脚本,它获取远程视频并输出它,然后我们将这个脚本作为视频元素的源。但这不是一个好主意,因为它会给服务器带来额外的负担。 我不确定我是否正确理解了有关使用 "cross-origin" 的文章?我认为远程视频所在的服务器必须发送 headers 如: "Access-Control-Allow-Origin: *" ,但如果我无权访问该服务器,例如我想使用 youtube 视频,则没有执行能力做到了吗?
简单的回答是,不,不幸的是。
如果您无法访问远程服务器以允许跨源使用,或者可以询问该网站的管理员(这在 YouTube 这样的网站上发生的可能性很小),则无法完成).
通常,您可以尝试通过提供 crossOrigin
属性来请求跨域使用:
<video ... crossOrigin="anonymous">...</video>
如果允许,您将在获取图像数据时看到数据。
解决方案
一种是将视频复制到您自己的服务器并从那里进行流式传输。
第二,使用代理服务器或脚本,就像您已经尝试过的那样。
是的,这两种情况都会影响您服务器上的流量(并且可能涉及版权等方面的法律问题)
抱歉,没办法。