canvas+video实现跨域视频截图

最新推荐文章于 2024-07-31 09:57:55 发布

xb_smart

最新推荐文章于 2024-07-31 09:57:55 发布

阅读量8.2k

点赞数 2

分类专栏： html5 文章标签： html5 canvas video

本文链接：https://blog.csdn.net/hpb21/article/details/50676958

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

利用canvas和video能实现比较酷炫的视频画面同步及视频帧截取(如html5doctor所演示的例子)。

但是在对canvas中的图像进行操作时有跨域限制（canvas安全机制）,如在域名www.a.com的canvas中加载www.b.com/1.jpg的图像，在进行toDataURL或getImageData进行操作时抛出异常。针对跨域图像的操作，目前介绍的比较多，但是对于video+canvas的跨域的比较少，花了不少时间终于解决了。在此非常感谢良少的nginx反向代理跨域。

利用nginx的反向代理可以很好地解决图像和视频的跨域问题。

nginx关键代码:

</pre><p><pre code_snippet_id="1580161" snippet_file_name="blog_20160216_2_948211" name="code" class="plain">  rewrite ^.+video/?(.*)$ /$1;
      
          include uwsgi_params;
          proxy_pass http://www.b.com/;
            proxy_redirect          off;

            proxy_set_header        X-Real-IP $remote_addr;
            proxy_set_header        X-Forwarded-For   $remote_addr;
            proxy_set_header        X-Forwarded-For   $proxy_add_x_forwarded_for;

注意参数proxy_redirect