HikvisionカメラWebプラグインフリー版の開発経緯について

私はこれまでカメラの開発に関わったことがありませんでした。突然会社からプロジェクトを受け、私は無力で混乱しました。仕方なくスマートに情報を調べさせました。満足のいく情報ばかりではありませんでした。最終的に私は、つまずきながら完成させたので、少しでも混乱したくなかったのですが、兄も私と同じ道をたどっており、一部のブロガーに参加料を請求してほしくないのですが、それは本当に迷惑です。これが私の兄弟姉妹たちに役立つことを願っています。早速、完全なプロセスに進みましょう。 (Web 開発キットを使用しているため、カメラが Webscoket ストリーミングをサポートしているという前提条件があります)
1. カメラが Webscoket ストリーミングをサポートしているかどうかを確認する方法
カメラのIPアドレスを取得します 各カメラには独自のIPアドレスがありますので、Google ChromeにIPアドレスを直接入力し、カメラに設定されているパスワードとユーザー名を入力します。次に、以下に示すようにサポートされているかどうかを確認し、有効にします。

2. Hikvision オープン プラットフォームのアドレス (https://open.hikvision.com/download/5cda567cf47ae80dd41a54b3?type=20&id=4c945d18fa5f49638ce517ec32e24e24) にアクセスします。

プラグインはダウンロードしませんでした。開発パッケージをダウンロードした後、その中にドキュメントの指示がある場合は、まずそのドキュメントに従って nginx を実行します (nginx 構成ファイルをローカル アドレス 127.0.0.1 に変更することをお勧めします)。ドキュメント
操作。たとえば、アクセスは 127.0.0.1:82/cn/index.html、ポートは 82 です。

閲覧に成功して画像が表示できれば二次開発が可能です 以前vueを使って使っていましたが時間が経つと基本的にエラーになってしまいました 覚悟を決めて直接書き込みましたhtml. オンラインの方が良いです. テンプレート ページで、Hikvision からダウンロードしたものをすべてそこに放り込み、上のページのボタンに対応するメソッドを比較し、Hikvision の cn/demo.js にアクセスしてメソッドを見つけ、使用方法、レンダリングは次のとおりです。


私の画面では、外側の div の幅が画面と同じであるため、画面が表示され、表示されます画面とその他の使用するページやjsを配置する 便宜上、炉を選択してその炉の画面を直接表示するように変更しました 実際には、オプションバーを選択するたびにログインを要求します。自己認証が必要です。demo.js のメソッドを参照してください。おそらくこれが変更です。

getChannelInfo(); で処理するものがまだあるため、2 つのメソッドの順序を逆にしました。最初にポートをリクエストし、画像を直接配置しました。


上記のログインが成功した後、さらに 2 つのメソッドを追加する必要があります。このバグには以前は気づきませんでした

 if (-1 == iRet) {
			    	console.log("已登录过000000000000000000000")
			       // showOPInfo(szDeviceIdentify + " 已登录过！");
			        getDevicePort();
		                getChannelInfo();
			    }

この時点でjsは基本的に変更されますが、次は注意が必要なページです。

2. ページで注意すべき点
主な理由は、リクエストが意図的であるということです。結局のところ、ほとんどの人が心配しているのはネイティブ ページです。
vue .js、axios.js の紹介 ファイルをインポートするには? 続きを読む
vue.js をインポートし、vue 公式 Web サイトにアクセスしてください< /span> 最もリクエストの多いパッケージ reuqest.js axios のダウンロードについて https://github.com/axios/axios、ダウンロードを開いてパッケージ内で探します。 axios.js ファイルをプロジェクトにコピーするだけです。

アドレスをコピーしてブラウザで開き、Web ページのソース コードを表示します。すべてのコードをコピーし、プロジェクト ディレクトリの下に vue.js を作成して貼り付けます。

const instance = axios.create({
    baseURL: 'http://xxxx:8085/hk-server',
    timeout: 10000
})
function get(url, params) {
   return new Promise((resolve, reject) => {
    instance.get(url, { params: params })
        .then((res) => {
            resolve(res.data);
        })
        .catch((err) => {
            reject(err.data);
        });
  });
}
function post(url, data) {
  return new Promise((resolve, reject) => {
    instance.post(url, data,{
            headers:{
                'Content-Type':'application/json'
            }
        })
        .then((res) => {
            resolve(res.data);
        })
        .catch((err) => {
            reject(err);
        });
    });
}

これは axios リクエストのカプセル化です。リクエストがカプセル化された後、vue と axios の下に request.js を置く必要があります。そうしないとエラーが報告されます。

基本的にはそれだけです。兄弟姉妹の皆さん、気に入ってください。