vue iframe Hikvision 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 フォルダー下の Web を指すように構成します)。
 

 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. Google は chrome://flags/#block- を開きます安全でないプライベート ネットワーク リクエスト

 5. Google ダウンロード パスを設定し、CS プログラムを起動して、フォルダー内の写真のリアルタイム アップロードを監視します。

 

アップロードインターフェースからトークン検証を削除する 

おすすめ

転載: blog.csdn.net/qq_38388578/article/details/130213103