Nginx 访问Galaxy Ace 2上的HLS实时流时出现污染画布

我正在使用avconv（ffmpeg）和nginx通过HLS和RTMP从相机流式传输帧。因为我的手机不支持flash，所以它使用HTML5视频标签和HLS来传输视频。我尝试支持的一个功能是记录实时流并将其保存到文件中。但是，由于跨域问题，我无法记录流

实时流来自端口8080上的我的机器（我使用我的内部IP 10.150.x.x:8080/hls/mystream.m3u8引用它），服务器通过端口8000在我的机器上运行（也通过内部IP引用）。由于它们位于不同的端口上，因此仍被视为跨域

在我的nginx.conf中，我添加了

访问控制允许源代码：

我还尝试添加

访问控制允许方法GET、PUT、POST、DELETE和OPTIONS

和

Access Control Allow Headers内容类型、授权、X-request-With

当我使用

curl-I检查标题时http://10.150.x.x:8080/hls/mystream.m3u8

通过我的桌面上的firefox和chrome，我可以看到相应的标题。但当我使用chrome开发工具查看手机的标题时，我会得到“注意：显示临时标题”

我试图使用canvas.toDataURL（）捕获帧，而正是这个函数给出了安全性错误

为什么即使我的nginx.conf中有

访问控制允许源代码：

，我仍然会遇到跨域问题

nginx.conf：

#user  nobody;
worker_processes  1;

error_log  logs/error.log debug;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       8080;
        server_name  10.150.x.x;
        #server_name  bsid.ca;

        add_header 'Access-Control-Allow-Origin' "*";
        #add_header 'Access-Control-Allow-Methods' "GET, PUT, POST, DELETE, OPTIONS";
        #add_header 'Access-Control-Allow-Headers' "Content-Type, Authorization, X-Requested-With";

        location /hls {

            types {
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }
            root /path/to/nginxVideo;
        }

        # sample handlers
        #location /on_play {
        #    if ($arg_pageUrl ~* 127.0.0.1) {
        #        return 201;
        #    }
        #    return 202;
        #}
        #location /on_publish {
        #    return 201;
        #}

        #location /vod {
        #    alias /var/myvideos;
        #}

        # rtmp stat
        location /stat {
            rtmp_stat all;
            rtmp_stat_stylesheet stat.xsl;
        }
        location /stat.xsl {
            # you can move stat.xsl to a different location
            root /usr/build/nginx-rtmp-module;
        }

        # rtmp control
        location /control {
            rtmp_control all;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

rtmp {
    server {
        listen 1935;
        ping 30s;
        notify_method get;

        application myapp {
            live on;

            # sample play/publish handlers
            #on_play http://127.0.0.1:8080/on_play;
            #on_publish http://127.0.0.1:8080/on_publish;

            # sample recorder
            #recorder rec1 {
            #    record all;
            #    record_interval 30s;
            #    record_path /tmp;
            #    record_unique on;
            #}

            # sample HLS
            hls on;
            hls_path /home/richard/Media/nginxVideo/hls;
            hls_base_url http://10.150.x.x:8080/hls/;
            hls_sync 2ms;
        }

        # Video on demand
        #application vod {
        #    play /var/Videos;
        #}

        # Video on demand over HTTP
        #application vod_http {
        #    play http://127.0.0.1:8080/vod/;
        #}
    }
}

完全错误：

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

更新

---

在与Ray Nicholus进行了长时间的讨论后，确定问题在于，在流开始之后，我在视频元素上设置了crossorigin属性。通过更早地设置，我可以访问帧而不需要代理。

如果开发工具认为响应没有正确地确认跨源请求，它将不会透露请求的大部分细节。我所能想到的是，在字节开始流入（此时视频已经被污染）之后，您正在设置crossorigin属性，或者您的服务器没有正确地确认请求。如果请求缺少原点标头，则可能是前者。

浏览器可能根本不支持视频元素的crossorigin属性，或者你忘记在视频元素中包含该属性。浏览器是chrome，因此我假设它支持crossorigin属性，并且我已将

crossorigin

属性设置为

anonymous

。尽管如此，我不确定这样做是否正确。它在其他浏览器上工作吗？吹毛求疵：顺便说一句，属性是“crossorigin”。“crossOrigin”是属性名。该流在默认android浏览器或Opera中都不可见。我没有做过很多研究，但我最好的猜测是他们在支持HLS方面有困难。