{"id":22014146,"url":"https://github.com/laqudee/hik-rtsp-player","last_synced_at":"2025-10-11T04:31:16.956Z","repository":{"id":146793050,"uuid":"615111717","full_name":"laqudee/hik-rtsp-player","owner":"laqudee","description":"在Vue3项目中使用海康Web无插件开发包","archived":false,"fork":false,"pushed_at":"2023-04-11T03:40:05.000Z","size":530,"stargazers_count":4,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-30T03:28:34.001Z","etag":null,"topics":["hikrtsp","vite","vue3"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/laqudee.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-17T01:15:06.000Z","updated_at":"2024-08-11T00:26:44.000Z","dependencies_parsed_at":"2023-04-09T05:34:05.917Z","dependency_job_id":null,"html_url":"https://github.com/laqudee/hik-rtsp-player","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laqudee%2Fhik-rtsp-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laqudee%2Fhik-rtsp-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laqudee%2Fhik-rtsp-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laqudee%2Fhik-rtsp-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/laqudee","download_url":"https://codeload.github.com/laqudee/hik-rtsp-player/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":236035507,"owners_count":19084698,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hikrtsp","vite","vue3"],"created_at":"2024-11-30T03:26:31.551Z","updated_at":"2025-10-11T04:31:06.944Z","avatar_url":"https://github.com/laqudee.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue 3 + Vite + HIK Rtsp\n\n\u003e 目的：在Vue3项目中使用海康`Web无插件开发包`，播放视频，需要配合nginx代理一起开发调试。\n\n\u003e 备注：详细功能请查看`Web无插件开发包`，本项目只作为如何在Vue3项目中正确使用该插件开发包的demo，所以只包含最简单的功能。\n\n## 开发指南\n\n#### Install dependencies\n```\n  pnpm install\n```\n\n#### Compiles and hot-reloads for development\n```\n  pnpm dev\n```\n\n#### Compiles and minifies for production\n```\n  pnpm build\n```\n\n## WEB无插件开发包使用流程\n\n#### 1. 在public中引入静态JS资源\n\n#### 2. 在`index.html`中引入\n```html\n  \u003cscript src=\"/static/hikvision/jquery-1.12.1.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"/static/hikvision/jsPlugin-1.2.0.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"/static/hikvision/webVideoCtrl.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"/static/hikvision/encryption/AES.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"/static/hikvision/encryption/cryptico.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"/static/hikvision/encryption/crypto-3.1.2.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"/static/hikvision/playctrl/AudioRenderer.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"/static/hikvision/playctrl/SuperRender.js\"\u003e\u003c/script\u003e\n```\n\n#### 3. 在`vite.config.js`中添加`base`\n```js\nexport default defineConfig({\n  plugins: [vue()],\n  base: '/'\n})\n```\n\n#### 4. 在需要的vue文件中开始使用`WEB无插件开发包`\n\n#### 5. `pnpm build`打包，将打包后的`dist`复制到`nginx`下的`html`中\n\n#### 6. 启动`nginx`打开`localhost:8004`查看效果\n\n## 监控渲染流程\n\n#### 1. 初始化 initVideoPlugin()\n- 注意这一步，`divPlugin`元素要有具体的width和height\n- 这一步可以设置`width * height`的屏等其他配置选项\n\n#### 2. 登录 handleLogin()\n- 通过后端接口或已经配置好的`ip`，`port`，`username`，`password`进行登录操作\n\n```js\nconst ipInfo = reactive({\n  ip: 'xx.xxx.xx.1xx', // 自行配置ip地址\n  port: 80, // 设置端口号\n  user: 'xxxx', // 设置用户\n  password: 'xxxxxx' // 设置密码\n})\n```\n\n#### 3. 获取通道 getChannelInfo()\n- 模拟通道\n- 数字通道\n- 零通道\n\n#### 4. 获取设备端口 getDevicePort()\n\n#### 5. 开始渲染 videoReadPlay（）\n- 可以设置一些渲染的配置\n  - isStreamType\n  - bZeroChannel\n  - 等\n\n#### 6. 停止预览 videoStopPlay（）\n\n#### 7. 登出 handleLogout()\n\n## 注意\n\u003e 若存在手动切换页面的情况，需要在销毁页面前执行`停止预览`和`登出`，否则会出现再次进入视频播放页面无法播放的情况，可能是已登录，后续动作就不在执行\n\n```js\nonBeforeUnmount(() =\u003e {\n  videoStopPlay()\n  handleLogout()\n})\n```\n\n\u003e 还要注意一些UI组件和WEB无插件开发包的样式兼容性问题\n\n\u003e Vue2和Vue3在public中引入静态资源会有些许不同注意区分\n```html\n    \u003c!-- Vue 2 --\u003e\n    \u003cscript src=\"./static/hikvision/jquery-1.12.1.min.js\" \u003e\u003c/script\u003e\n    \u003cscript src=\"./static/hikvision/jsPlugin-1.2.0.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"./static/hikvision/webVideoCtrl.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"./static/hikvision/encryption/AES.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"./static/hikvision/encryption/cryptico.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"./static/hikvision/encryption/crypto-3.1.2.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"./static/hikvision/playctrl/AudioRenderer.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"./static/hikvision/playctrl/SuperRender.js\"\u003e\u003c/script\u003e\n```\n\n\u003e WEB无插件开发包的开发调试需要nginx的配合，最终效果也需要打包放到nginx环境下才能看出\n\n## 扩展\n\u003e WEB无插件开发包里面有许多别的用处的方法，可以根据业务需求进行添加和修改\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaqudee%2Fhik-rtsp-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flaqudee%2Fhik-rtsp-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaqudee%2Fhik-rtsp-player/lists"}