Question

我使用avconv（ffmpeg）和nginx通过HLS和RTMP从摄像机流式传输帧。由于我的手机不支持Flash，因此它使用HTML5视频标签和HLS来传输视频。我试图支持的一个功能是记录直播流并将其保存到文件中。但是，由于跨域问题，我无法录制流。

直播来自我的计算机端口8080（我使用我的内部IP引用它，10.150.xx：8080 / hls / mystream.m3u8），服务器通过端口8000在我的机器上运行（也通过内部IP引用）。因为它们位于不同的端口上，所以它仍然被视为跨域。

在我的nginx.conf中，我添加了Access-Control-Allow-Origin: *

我也尝试添加Access-Control-Allow-Methods GET, PUT, POST, DELETE, OPTIONS

和Access-Control-Allow-Headers Content-Type, Authorization, X-Requested-With

当我使用curl -I http://10.150.x.x:8080/hls/mystream.m3u8并通过桌面上的firefox和chrome检查标头时，我可以看到相应的标头。但是，当我使用我的手机的chrome dev工具查看标题时，我得到了＃34;小心：显示了临时标题。＆＃34;

我尝试使用canvas.toDataURL()捕获帧，并且正是此函数给出了安全性错误。

为什么即使我的nginx.conf中有Access-Control-Allow-Origin: *，我仍然会遇到跨域问题？

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属性。通过设置它，我能够访问帧而无需代理。

Answer 1

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

在Galaxy Ace 2上访问HLS直播流时受污染的画布

1 个答案: