{"id":21518149,"url":"https://github.com/ucloud/ubox-auto-sdk-web","last_synced_at":"2025-03-17T16:41:59.040Z","repository":{"id":57146883,"uuid":"429358027","full_name":"ucloud/ubox-auto-sdk-web","owner":"ucloud","description":"Web SDK for use ubox auto","archived":false,"fork":false,"pushed_at":"2022-04-22T09:32:46.000Z","size":681,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-02-26T02:02:18.309Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://ucloud.github.io/ubox-auto-sdk-web/","language":"TypeScript","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/ucloud.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}},"created_at":"2021-11-18T08:49:53.000Z","updated_at":"2022-02-17T07:18:08.000Z","dependencies_parsed_at":"2022-08-29T20:51:36.342Z","dependency_job_id":null,"html_url":"https://github.com/ucloud/ubox-auto-sdk-web","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ucloud%2Fubox-auto-sdk-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ucloud%2Fubox-auto-sdk-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ucloud%2Fubox-auto-sdk-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ucloud%2Fubox-auto-sdk-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ucloud","download_url":"https://codeload.github.com/ucloud/ubox-auto-sdk-web/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244071090,"owners_count":20393334,"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":[],"created_at":"2024-11-24T00:50:17.772Z","updated_at":"2025-03-17T16:41:59.019Z","avatar_url":"https://github.com/ucloud.png","language":"TypeScript","readme":"# ubox-auto-sdk-web\n\nUCloud 智能盒子 web 端 SDK\n\n## How ot use\n\n### 安装\n\n```sh\nnpm install ubox-auto-sdk-web\n```\n\n### 使用\n\n#### 初始化实例\n\n```js\n// 引用包\nconst UBoxAuto = require('ubox-auto-sdk-web');\n// 实例化调用端\nconst client = UBoxAuto({\n    publicKey: 'xxx', // 在 API 密钥中查看管理自己的密钥： https://console.ucloud.cn/uaccount/api_manage\n    privateKey: 'xxx', // 在 API 密钥中查看管理自己的密钥： https://console.ucloud.cn/uaccount/api_manage\n    projectId: 'xxx' // 在项目管理中查看需要管理的项目 id： https://console.ucloud.cn/uaccount/iam/project_manage\n});\n```\n\n\u003ci style=\"color: red;\"\u003e**请注意管理好自己的公私钥，不要直接暴露在页面中，建议通过 api 从服务端获取公私钥**\u003c/i\u003e\n\ndebug\n\n可通过传入 debug 参数，开始 debug，会在某些环节打印出一些 log 帮助调试\n\n```js\nconst client = UBoxAuto(\n    {\n        publicKey: 'xxx',\n        privateKey: 'xxx',\n        projectId: 'xxx'\n    },\n    { debug: true }\n);\n```\n\n#### 调用 client 获取数据\n\nPromise 类错误请统一通过 catch 获取，或使用 await 通过 try/catch 获取\n\n```js\nclient\n    .getSdnboxCameraList()\n    .then(list =\u003e {})\n    .catch(console.error);\nclient\n    .startSdnboxCameraPushing()\n    .then(() =\u003e {\n        console.log('start success');\n    })\n    .catch(console.error);\n\ntry {\n    const player = client.play(\n        document.querySelector('#videoContainer'),\n        // 也可自行提供对应地址的流进行播放，url 为 webrtc 地址\n        { url: 'webrtc://xxxxxx' }\n    );\n} catch (e) {\n    console.error('play fail', e);\n}\n```\n\n1. 获取盒子和摄像头列表\n\n```js\n// 获取盒子，摄像头的列表数据\nclient.getSdnboxCameraList().then(list =\u003e {\n    console.log(list);\n});\n```\n\n返回数据格式参考[`文档页`](https://docs.ucloud.cn/api/ubox-api/get_sdnbox_camera_list?id=%e5%93%8d%e5%ba%94%e7%a4%ba%e4%be%8b)\n\n2. 开启/关闭摄像头推流\n\n```js\n// 开启对应摄像头的推流\nclient.startSdnboxCameraPushing({ cameraId, sdnboxId }).then(() =\u003e {\n    console.log('start success');\n});\n```\n\n```js\n// 关闭对应摄像头的推流\nclient.stopSdnboxCameraPushing({ cameraId, sdnboxId }).then(() =\u003e {\n    console.log('stop success');\n});\n```\n\n#### 播放对应摄像头 webrtc 流\n\n-   播放器基本功能\n\n    -   播放器会自动播放流的最新桢，网络差可能会出现跳帧\n    -   播放器会在出错时自动重试直到播放成功\n\n-   play 创建播放器实例\n\n```js\n// 播放对应盒子对应摄像头的流，需要调用 getSdnboxCameraList 才可采用这种方式，会从返回结果中获取对应的流地址\n// video 元素样式自定义，建议背景设计为黑色，否则重试播放时会出现闪烁\nconst player = client.play(\n    // 播放器实例化应用的容器标签元素 \u003cdiv id=\"videoContainer\"\u003e\u003c/div\u003e\n    document.querySelector('#videoContainer'),\n    // 通过传入 sdnboxId 和 cameraId 可快速从之前调用过的 getSdnboxCameraList 缓存数据中获取到对应的流地址\n    { cameraId, sdnboxId }\n);\n\nconst player = client.play(\n    document.querySelector('#videoContainer'),\n    // 也可自行提供对应地址的流进行播放，url 为 webrtc 地址\n    { url: 'webrtc://xxxxxx' }\n);\n```\n\n播放器大小\n\n-   播放器默认大小为容器的大小\n-   可通过传入 width、height 来自定义\n-   如果容器宽高和参数都没有则默认使用 `640*480`\n-   也可直接使用 fill 参数来让播放器充满容器（自适应，需要注意容器设置宽高，不然视频自适应可能会导致容器抖动）\n\n```js\nconst player = client.play(\n    // 播放器实例化应用的容器标签元素 \u003cdiv id=\"videoContainer\"\u003e\u003c/div\u003e\n    document.querySelector('#videoContainer'),\n    // 通过传入 sdnboxId 和 cameraId 可快速从之前调用过的 getSdnboxCameraList 缓存数据中获取到对应的流地址\n    { cameraId, sdnboxId, width: 800, height: 600 }\n);\n```\n\nfill demo\n\n```js\nconst player = client.play(\n    // 播放器实例化应用的容器标签元素 \u003cdiv id=\"videoContainer\" style=\"width: 100%;height: 400px;\"\u003e\u003c/div\u003e\n    document.querySelector('#videoContainer'),\n    // 通过传入 sdnboxId 和 cameraId 可快速从之前调用过的 getSdnboxCameraList 缓存数据中获取到对应的流地址\n    { cameraId, sdnboxId, fill: true }\n);\n```\n\noptions\n\n播放时可传入 options 参数\n\n```js\nclient.play(document.querySelector('#videoContainer'), info, options);\n```\n\n接口定义如下\n\n```ts\n{\n    // 是否自动播放，为 true 时会在调用 play 后自动开始播放，不需要再调用 start\n    autoplay?: boolean;\n    // 播放过程中出错时会触发，可监听来做一些错误处理、日志等\n    // 错误触发时播放器会自动重试播放\n    // 错误类型可通过 error.name 获取\n    onError?: (error: Error) =\u003e void;\n    // 错误后重连成功时触发，触发时机会存在一定延时\n    onRestore?: () =\u003e void;\n}\n```\n\n-   开始播放\n\n```js\n// 调用 start 开始播放\nplayer.start();\n```\n\n-   停止播放\n\n```js\n// 终止播放\nplayer.stop();\n```\n\n-   销毁播放器 - 卸载播放器时注意销毁，避免内存泄漏\n\n```js\nplayer.destroy();\n```\n\n-   获取播放信息\n\n```js\n// 获取播放信息，stats 内容参考 https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/getStats#example\nplayer.stats().then(stats =\u003e stats.forEach(console.log));\n```\n\n#### 错误类型列表\n\n-   VIDEO_ENDED\n    \n    播放器播放结束（理论不会出现）\n\n-   VIDEO_SEEKING\n    \n    播放器一直在寻找资源而没播放\n\n-   VIDEO_NO_FUTURE_DATA\n    \n    播放器接受不到更多数据，无法继续播放\n\n-   NO_MORE_RECEIVED_DATA\n    \n    拉流未拉到数据（一般是推流端中断推流，或网络断开）\n\n-   GET_BYTES_RECEIVED_FAIL\n    \n    无法获取到拉流的信息（一般是连接建立失败触发）\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fucloud%2Fubox-auto-sdk-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fucloud%2Fubox-auto-sdk-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fucloud%2Fubox-auto-sdk-web/lists"}