問題はバックエンドにあります。フロントエンドの主な問題は、ドキュメントが少なすぎることです。フロントエンドの主な問題は、カメラの接続です。カメラが接続されると、インターホンの残りの部分は完了します。 、方向の調整、ズームなどが簡単になります。
Dahua 公式 Web サイト: https://open-icc.dahuatech.com/#/home
1.公式 Web サイトにアクセスして、プラグインまたはデモをダウンロードします。プラグインをダウンロードしてインストールしました (別のプラグインを作成することを忘れないでください)インストール場所を選択する際にフォルダーを選択します。インストール直後は中身が散在しており、独自のフォルダーを持たないため）、
ps: インストール後もプラグインが見つからないというエラーがページに表示される場合、またはコンピュータを再起動してもプラグインが見つからないことがビデオに表示される場合は、プラグインが実行されていない可能性があります。 2. 許可しないを選択した場合は、
インストール パッケージでこれをダブルクリックして実行すると、プラグインが実行されます (毎回手動でクリックして実行する必要があるため、アンインストールして再インストールし、最初の方法を実行することをお勧めします)
2.インストール後、デモ ファイルが作成されます。index.html を直接クリックすると、例といくつかの API が含まれています。ここで試すこともできます。バックエンドから提供されたチャネル番号と rtsp アドレスを入力してください。 ※ローカルテストインターフェースが接続されていない場合は、コンピュータをカメラのネットワークケーブルインターフェースに接続する必要があります。
3.再生できる場合は、ビデオをプロジェクトに挿入できます。デモでこのファイルを使用するための手順があります。
3.1 はじめに
DHPlayer.js をプロジェクトにコピーし、配置する場所を見つけます。 utilファイル
.main.jsの紹介
import DHPlayer from '@/utils/DHPlayer'
Vue.use(DHPlayer)
vue ページ:
windowType: ビデオ タイプ 0 リアルタイム、1 録画
createSuccess:
プラグインが正常に作成されたときにビデオ ID を呼び出します。幅と高さを忘れずに指定してください (#dhplayer)
<DHPlayer
ref="dhplayer"
video-id="dhplayer"
:window-type="0"
@createSuccess="createSuccess"
/>
※インターネットで検索した例では createSuccess を使用しています。メソッドも見つける必要があります。初期化が成功した後でのみビデオ再生アドレスを指定できます。そうでない場合はエラーが報告されます。ただし、このメソッドは呼び出されていません。dhplayer.js のバージョンを導入したためかもしれません。後からソースコードを見ると、エミットがなかったので、ソースコードを手動で変更しました (形式 dhplayer.js,方法を見つけて、エミットを追加してください)
createSuccess(){
this.$refs.dhplayer.setRealTime({
channelId: this.channelId,//后端给通道号
stdRtsp: true, // 默认false
path: `${
this.playerUrl}?token=${
this.playerToken}`,//后端给的地址，看你们咋拼接，需不需要token
});
}
setRealTime メソッドは、デモ ファイル DHplayer.vue で私が見つけました。必要な場合は、このファイルを参照して、必要かどうかを確認することもできます。結局のところ、ドキュメントが少なすぎます。この時点では
、ビデオを再生することができます。
残りは難しくありません
4.インターコム:
インターコムのバックエンド インターフェース + Dahua API インターフェースを調整するだけです
ロジック: クリックしてインターコムを開始した後、バックエンド インターフェースを調整します バックエンドがパラメーターを返した後、setTalk メソッドを調整します。
インカム終了後はバックエンドインターフェースを再調整するだけで、setTalkメソッドを再度調整する必要はありません。つまり、問題はすべてバックエンドにあります
this.$refs.dhplayer.setTalk({
path: `${
data.url}?token=${
data.token}`, //restp地址
audioType: data.audioType, // 音频类型 int 0-default 1-PCM 2-G711a 3-AMR 4-G711U 5-G726 6-AAC 7-G722 8-G711
audioBit: data.audioBit, // 位数 int 8 16
sampleRate: data.sampleRate, // 采样频率 8000 16000 32000 48000 8192
talkType: 1, // 对讲类型： 1 设备 2通道
});
残りはドキュメントの例に従うだけです。
デモ パッケージを配置しました。その中のindex.html を実行すると、ページ関数に対応するソース コードが表示されます。Web ページからダウンロードしたデモにはこの関数がないようなので、以下をご覧ください。それ。