使用ngnix实现跨域视频截图

通过使用html5 canvas的drawImage()方法可以轻松获取视频当前播放的帧。参考

但是只能对当前项目下的视频截图。很多情况下，视频文件是单独存放的，即要对跨域视频截图

在尝试了很多方法之后，最后通过ngnix轻松解决了这个问题。

 

ngnix配置：

 

upstream video2image {
	server localhost:8080;
    }

 

 

ngnix server配置两个location。 

1.默认对接收到的所有url请求都去请求8080端口。

2.对/video请求获取别的服务器中的视频。

 

server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

	location /{
		proxy_pass http://video2image;
	}


        location /video {
		include uwsgi_params;
		proxy_pass          http://192.168.0.222/test.avi;
		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;  
        }
        
    }

 

jsp页面获取视频

 

<video id="video" width="270" autoplay>
      <source src="/video" type='video/avi'>
    </video>

    <input type="button" id="catch" value="截图" />
    <br/>

    <canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3;"></canvas>

 

js绑定事件

 

 

    <script type="text/javascript">
      $("#catch").click(function(){
        var v=document.getElementById("video");
        var c=document.getElementById("myCanvas");
        ctx=c.getContext('2d');
        ctx.drawImage(v,0,0,270,135)
      })
    </script>

项目中的截图部分代码已经上传，有兴趣的可以下载看一下

下载地址