{"id":37908766,"url":"https://github.com/polyv/live-js-sdk-demo-normal","last_synced_at":"2026-01-16T17:17:20.209Z","repository":{"id":68091523,"uuid":"295283382","full_name":"polyv/live-js-sdk-demo-normal","owner":"polyv","description":"直播 JavaScript SDK Demo（标准版）","archived":false,"fork":false,"pushed_at":"2025-02-13T08:54:14.000Z","size":1240,"stargazers_count":5,"open_issues_count":0,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-13T09:34:19.613Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/polyv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2020-09-14T02:32:23.000Z","updated_at":"2025-02-13T08:54:18.000Z","dependencies_parsed_at":"2023-10-26T06:33:57.554Z","dependency_job_id":null,"html_url":"https://github.com/polyv/live-js-sdk-demo-normal","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/polyv/live-js-sdk-demo-normal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polyv%2Flive-js-sdk-demo-normal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polyv%2Flive-js-sdk-demo-normal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polyv%2Flive-js-sdk-demo-normal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polyv%2Flive-js-sdk-demo-normal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/polyv","download_url":"https://codeload.github.com/polyv/live-js-sdk-demo-normal/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polyv%2Flive-js-sdk-demo-normal/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28480094,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T11:59:17.896Z","status":"ssl_error","status_checked_at":"2026-01-16T11:55:55.838Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2026-01-16T17:17:20.128Z","updated_at":"2026-01-16T17:17:20.194Z","avatar_url":"https://github.com/polyv.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 直播 JS-SDK Vue-Demo\n\n## 介绍\n\n为了帮助客户更好地理解、接入 **[POLYV 直播 WEB-SDK](https://help.polyv.net/index.html#/live/js/)**，本项目提供了一个以 `Vue2.x` 框架实现的 Demo 以供参考。\n\n## Demo 功能点\n\n| 分类     | 功能                         | 支持情况 |\n| -------- | ---------------------------- | -------- |\n| 聊天室   | 欢迎语                       | ✔        |\n|          | 点赞                         | ✔        |\n|          | 送花                         | ✔        |\n|          | 聊天信息                     | ✔        |\n|          | 只看主持人                   | ✔        |\n|          | 设置昵称                     | ✔        |\n|          | 连接超时提醒                 | ✔        |\n|          | 在线列表                     | ✔        |\n|          | 提问                         | ✔        |\n|          | 打赏                         | ✔        |\n| 播放器   | 音量设置                     | ✔        |\n|          | 暂停/恢复播放                | ✔        |\n|          | seek                         | ✔        |\n|          | 切换倍速                     | ✔        |\n|          | 关闭或显示讲师摄像头         | ✔        |\n|          | 切换当前线路                 | ✔        |\n|          | PPT 翻页                     | ✔        |\n|          | 发送弹幕                     | ✔        |\n|          | 隐藏/恢复弹幕                | ✔        |\n|          | 切换清晰度(需支持多码率)     | ✔        |\n|          | 支持回放                     | ✔        |\n|          | 无延迟播放                   | ✔        |\n|          | 连麦                         | ✔        |\n|          | 邀请上麦（注：联系售后开通） | ✔        |\n| 互动功能 | 公告                         | ✔        |\n|          | 签到                         | ✔        |\n|          | 答题卡                       | ✔        |\n|          | 问卷                         | ✔        |\n|          | 抽奖                         | ✔        |\n|          | 卡片推送                     | ✔        |\n|          | 条件抽奖                     | ✔        |\n|          | 互动红包                     | ✔        |\n|          | 商品库                       | ✔        |\n|          | 投诉反馈                     | ✔        |\n| 其他     | 直播介绍                     | ✔        |\n|          | 自定义图文菜单               | ✔        |\n|          | 直播间状态显示               | ✔        |\n|          | 纯回放模式                   | ✔        |\n\n## Demo 运行\n\nDemo 的源码位于项目的 src 目录下，需要使用 `npm` 来运行 Demo\n\n```sh\nnpm ci  #安装依赖\nnpm run dev  #启动项目\n```\n\n如需在 IE 浏览器调试，**启动项目**时，请执行 `npm run dev:ie`\n\n执行完成后，可以在浏览器打开 `http://localhost:8080/live/` 访问 Demo 页\n\n另外，您需要结合 [获取密钥](https://help.polyv.net/index.html#/live/api/getSecretKey) 这篇文档来获取必要的信息\n\n您还可以结合 POLYV 官方文档查阅 Demo 源码：\n\n- [直播 JS-SDK](https://help.polyv.net/index.html#/live/js/live_js_sdk/live_js_sdk)\n  - [无延迟接入](https://help.polyv.net/index.html#/live/js/live_js_sdk/live_low_latency)\n  - [连麦接入](https://help.polyv.net/index.html#/live/js/live_js_sdk/live_video_chat)\n- [聊天室 JS-SDK](https://help.polyv.net/index.html#/live/js/chat_js_sdk)\n- [互动功能接收端 SDK](https://help.polyv.net/index.html#/live/js/new_sdk/interactions_receive_sdk/sdk/overview)\n  - [答题卡 UI 组件文档](https://help.polyv.net/index.html#/live/js/new_sdk/interactions_receive_sdk/ui/default/answer_card)\n  - [签到 UI 组件文档](https://help.polyv.net/index.html#/live/js/new_sdk/interactions_receive_sdk/ui/default/check_in)\n  - [抽奖 UI 组件文档](https://help.polyv.net/index.html#/live/js/new_sdk/interactions_receive_sdk/ui/default/lottery)\n  - [公告 UI 组件文档](https://help.polyv.net/index.html#/live/js/new_sdk/interactions_receive_sdk/ui/default/notice)\n  - [问卷 UI 组件文档](https://help.polyv.net/index.html#/live/js/new_sdk/interactions_receive_sdk/ui/default/questionnaire)\n  - [卡片推送 UI 组件文档](https://help.polyv.net/index.html#/live/js/new_sdk/interactions_receive_sdk/ui/default/push_card)\n  - [条件抽奖 UI 文档](https://help.polyv.net/index.html#/live/js/new_sdk/interactions_receive_sdk/ui/default/welfare_lottery)\n  - [商品库 UI 文档](https://help.polyv.net/index.html#/live/js/new_sdk/interactions_receive_sdk/ui/default/product)\n- [直播 API 签名规则](https://help.polyv.net/index.html#/live/api/buildSign)\n- [直播服务端 API](https://help.polyv.net/index.html#/live/api/)\n- 打赏\n  - [打赏特效](https://help.polyv.net/index.html#/live/js/donate_animation)\n  - [查询打赏设置](https://help.polyv.net/index.html#/live/api/v4/channel/donate/get)\n  - [发送打赏设置](https://help.polyv.net/index.html#/live/api/live_interaction/send_reward_msg)\n\n## Demo 工程说明\n\n本工程基于 `node@16.9.1` 搭建，如果使用 `VsCode` 作为 IDE 进行开发，推荐使用以下配置作为工作区的 `settings.json`\n\n```json\n{\n  \"vetur.format.defaultFormatter.js\": \"prettier\",\n  \"vetur.format.defaultFormatter.html\": \"js-beautify-html\",\n  \"vetur.format.defaultFormatter.sass\": \"none\",\n  \"vetur.format.defaultFormatter.scss\": \"none\",\n  \"vetur.format.defaultFormatterOptions\": {\n    \"js-beautify-html\": {\n      \"wrap_attributes\": \"force-aligned\"\n    },\n    \"prettier\": {\n      \"singleQuote\": true\n    }\n  },\n  \"prettier.enable\": true,\n  \"eslint.format.enable\": true,\n  \"[javascript]\": {\n    \"editor.defaultFormatter\": \"dbaeumer.vscode-eslint\"\n  },\n  \"css.validate\": false,\n  \"less.validate\": false,\n  \"scss.validate\": false,\n  \"stylelint.enable\": true,\n  \"stylelint.validate\": [\"css\", \"sass\", \"scss\", \"postcss\", \"vue\"],\n  \"editor.codeActionsOnSave\": {\n    \"source.fixAll.eslint\": true,\n    \"source.fixAll.stylelint\": true\n  }\n}\n```\n\n- 主要目录文件说明\n  - `src/sdk`: 对 Polyv SDK 进行二次封装，采用事件机制进行通信\n  - `src/plugins`: 对一些第三方插件的封装和处理，比如 `Axios`, `Vant`\n  - `src/utils`: 相关工具函数\n  - `src/store`: vuex 存储，组件共享主要配置\n  - `src/components/Watch`: 观看页主体 UI 组件\n  - `src/components/Base`: 和业务无关的通用全局组件\n  - `src/components/InteractionsReceive`: 互动 SDK UI 组件\n- 使用到的第三方库：参考项目中的 package.json 的 dependencies。\n- 使用低版本 `node` 注意事项【建议使用 `16.9.1` 版本】\n  - 安装依赖时，会出现 `integrity checksum failed` 的错误，原因主要是 `sha` 加密算法不同，删掉 `packgae-lock.json` 再安装依赖即可\n  - 由于依赖的 `eslint` 版本较高，执行 `npm run dev` 时可能会报错，可以执行 `npm run serve` 绕过校验来启动项目，如果需要运行在 IE 浏览器上，可以执行 `npm run serve:ie`\n  - 请保证 node 版本 `\u003e= 10.13.0`\n\n## Demo 服务器部署\n\n由于项目中使用了 `vue-router`，所以本 demo 中也支持了**两种**构建模式。前置知识可以看下这篇文档 [VueRouter-不同的历史模式](https://router.vuejs.org/zh/guide/essentials/history-mode.html)\n\n- 一种是执行 `npm run build` 命令，可以构建基于 `history` 模式的产物，需要服务器使用 `nginx` 之类的工具进行代理转发\n- 一种是执行 `npm run build-static` 命令，可以构建基于 `hash` 模式的产物，不需要在服务器上进行特殊处理，直接将文件放到服务器上即可\n\n## 浏览器兼容性\n\n- 支持主流 PC 浏览器，包括 Chrome、Safari、Edge、Firefox、IE(\u003e=10) 等 。\n- 支持主流移动端浏览器或 WebView，包括 UC 浏览器、QQ 浏览器、微信浏览器、各厂商自带浏览器等。\n\n## 补充说明\n\n### 安全性说明（重要）\n\n- 实际使用时，请 **不要** 将 appSecret 暴露在前端，本 demo 仅为演示。\n\n### 关于自动播放\n\n设置了 autoplay 参数后, 使用 PC Chrome 浏览器打开 demo 页可能会出现静音自动播放的情况, 这是浏览器的自动播放策略导致的。关于 Chrome 的自动播放策略请参考 [Autoplay Policy Changes(国内网络可能打不开)](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes)。\n\n此外， 移动端不支持自动播放。\n\n### 关于回放\n\n播放器的配置参数[type](https://help.polyv.net/index.html#/live/js/live_js_sdk/live_js_sdk?id=%E5%AE%9E%E4%BE%8B%E5%B1%9E%E6%80%A7)会影响播放器的回放：\n\n- 设置为 `auto` 时，根据频道的实际设置自动选择播放类型，也是 demo 页的设置。此时播放器会按以下优先级播放视频：\n  1. 直播；\n  2. 回放列表视频；\n  3. 第一个暂存视频。\n- 设置为 `live` 时，不播放回放。\n- 设置为 `vod` 时，需要设置 vid 参数去指定某个回放。vid 的值可以通过 SDK 的实例方法 getPlaybackLists 获取。\n\n### 其他示例仓库\n\n- [直播 JS-SDK DEMO](https://github.com/polyv/live-js-sdk-demo-basic)\n- [直播 JS-SDK 竖屏 DEMO](https://github.com/polyv/live-js-sdk-demo-portrait)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolyv%2Flive-js-sdk-demo-normal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpolyv%2Flive-js-sdk-demo-normal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolyv%2Flive-js-sdk-demo-normal/lists"}