使用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>

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

下载地址

使用ngnix实现跨域视频截图相关推荐

利用ngnix解决跨域问题
一,定义跨域是指从一个域名的网页去请求另一个域名的资源,它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制.跨域的严格一点的定义是:只要协议,域名,端口有任何一个的不同,就 ...
阿里云OSS图片存储跨域配置 OSS CDN跨域配置截图
采用了OSS的CDN加速,会导致请求的同一个URL被随机分发到源服务器和CDN服务器,因为CDN服务器并未配置跨域,导致随机到CDN服务器时,就会报跨域错误,而随机到源服务器时就没事,这就造成时好时坏 ...
java 视频切片_关于视频播放、视频切片、跨域访问视频
关于视频播放.视频切片.跨域访问视频前言最近在着手部署上线做的一个视频网站,当我们部署到云服务器上后并开始测试视频观看并发量,发现了一个很严重的问题:带宽不足.9 或 10 个人同时观看视频的时候 ...
asp.net core 系列之允许跨域访问2之测试跨域(Enable Cross-Origin Requests:CORS)
这一节主要讲如何测试跨域问题你可以直接在官网下载示例代码,也可以自己写,我这里直接使用官网样例进行演示样例代码下载: Cors 一.提供服务方,这里使用的是API 1.创建一个API项目.或者直接 ...
关于尚硅谷微信支付开发解决跨域访问
在我做微信支付项目中的问题:跨域访问,最开始用视频上的注解@CrossOrigin ,后端的资无法访问源,我自己在网上找了找,就是添加一个过滤器 import org.springframework. ...
Django框架实现跨域的菜鸟教程
背景我用Django框架+apicloud做一个web app项目,然后现在遇到一个问题,就是需要跨域: 1.安装django-cors-headers 2.找到与项目名同名下面的settings. ...
video 视频截图云储存跨域引用
<video poster="" src="" crossOrigin="anonymous" width="100%&qu ...
video视频播放截图, 跨域问题
"SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not ...
nginx HLS m3u8播放视频跨域问题
采用HLS+m3u8方式播放视频,在播放的时候会报跨域问题.例如:https://www.***.com/crossdomain.xml找不到. 方法1:在跨域的网站根目录放crossdomain.x ...

使用ngnix实现跨域视频截图

使用ngnix实现跨域视频截图相关推荐

最新文章

热门文章