vue iframe 海康威视3.0使用笔记

1、vue代码

<el-dialog
      title="抓拍"
      :visible.sync="dialogVisibleSnap"
      center
      v-dialogDrag
      :modal-append-to-body="true"
      :modal="true"
       width="70%"
      :before-close="handleCloseSnap">
      <div>
        <div class="plugin">
          <iframe :src="iframeSrc" frameborder="0"></iframe>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseSnap">取 消</el-button>
      </span>
    </el-dialog>



 watch: {
    dialogVisibleSnap(newVal,oldVal){
      if(newVal){
        this.iframeSrc= `http://192.168.1.207:9998/cn/demo.html?businessCode=${this.businessCode}`
      }
    },
}

2、修改nginx.conf文件（配置9998端口指到E盘aa文件夹下webs）
 

 server {
        listen       9998;
        server_name  127.0.0.1;

        #charset koi8-r;

        access_log  logs/host.access.log  main;
        #websocket相关配置
	proxy_http_version 1.1;
	proxy_set_header Upgrade $http_upgrade;
    	proxy_set_header Connection "upgrade";
    	proxy_set_header X-real-ip $remote_addr;
	proxy_set_header X-Forwarded-For $remote_addr;

        location / {
            root   "E:/aa/webs";
            index  index.html index.htm;
        }

	location ~ /ISAPI|SDK/ {
	    if ($http_cookie ~ "webVideoCtrlProxy=(.+)") {
		proxy_pass http://$cookie_webVideoCtrlProxy;
		break;
	    }
	}
	location ^~ /webSocketVideoCtrlProxy {
	    #web socket
	    proxy_http_version 1.1;
	    proxy_set_header Upgrade $http_upgrade;
	    proxy_set_header Connection "upgrade";
	    proxy_set_header Host $host;

	    if ($http_cookie ~ "webVideoCtrlProxyWs=(.+)") {
		proxy_pass http://$cookie_webVideoCtrlProxyWs/$cookie_webVideoCtrlProxyWsChannel?$args;
		break;
	    }
	    if ($http_cookie ~ "webVideoCtrlProxyWss=(.+)") {
		proxy_pass http://$cookie_webVideoCtrlProxyWss/$cookie_webVideoCtrlProxyWsChannel?$args;
		break;
	    }
	}
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        # error_page  302  /50x.html;
        # location = /50x.html {
        #     root   html;
        # }
        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

3、启动nginx，手动访问本地路径

 4、项目访问

 注意：1、以本地ip访问不能用localhost:9998 访问 2、谷歌打开chrome://flags/#block-insecure-private-network-requests

 5、设置谷歌下载路径、启动CS程序监控该文件夹下图片实时上传

 

上传接口去掉token校验