{"id":20788857,"url":"https://github.com/ceebluetv/webrtc-client","last_synced_at":"2025-05-05T18:36:42.068Z","repository":{"id":219151516,"uuid":"748220642","full_name":"CeeblueTV/webrtc-client","owner":"CeeblueTV","description":"WebRTC Client Library for Ceeblue Cloud Customers","archived":false,"fork":false,"pushed_at":"2024-04-26T08:15:00.000Z","size":978,"stargazers_count":4,"open_issues_count":1,"forks_count":2,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-04-26T09:32:14.869Z","etag":null,"topics":["cdn","live","real-time","streaming","video","webrtc","whep","whip"],"latest_commit_sha":null,"homepage":"https://ceeblue.net","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CeeblueTV.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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}},"created_at":"2024-01-25T14:28:08.000Z","updated_at":"2024-04-26T09:32:16.875Z","dependencies_parsed_at":"2024-01-31T11:28:28.095Z","dependency_job_id":"b84489c3-309c-4321-8084-c0ff16508360","html_url":"https://github.com/CeeblueTV/webrtc-client","commit_stats":null,"previous_names":["ceebluetv/webrtc-client"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CeeblueTV%2Fwebrtc-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CeeblueTV%2Fwebrtc-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CeeblueTV%2Fwebrtc-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CeeblueTV%2Fwebrtc-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CeeblueTV","download_url":"https://codeload.github.com/CeeblueTV/webrtc-client/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225053455,"owners_count":17413606,"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":["cdn","live","real-time","streaming","video","webrtc","whep","whip"],"created_at":"2024-11-17T15:17:35.245Z","updated_at":"2025-05-05T18:36:42.056Z","avatar_url":"https://github.com/CeeblueTV.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[Requirements](#requirements) | [Usage](#usage) | [Examples](#examples) | [Building locally](#building-locally) | [Documentation](#documentation) | [Contribution](#contribution) | [License](#license)\n\n# Ceeblue WebRTC Client\n[![npm](https://img.shields.io/npm/v/%40ceeblue%2Fwebrtc-client)](https://npmjs.org/package/@ceeblue/webrtc-client)\n\nThe Ceeblue WebRTC Client is a generic client library designed to simplify the implementation of WebRTC functionalities for Ceeblue customers.\n\nThe client library addresses common challenges faced by developers:\n- **Unified Browser Support** - Addresses inconsistencies and variations in implementation across different browsers.\n- **Firewall Traversal** - Implements our unique TURN approach to manage firewall traversal.\n- **Security** - Ensures secure streaming through encryption and authentication.\n- **Quality of Service (QoS)** - Handles latency, packet loss, and other optimizations.\n- **Signalling** - Unifies different signalling capabilities over Websockets and WHIP/WHEP into a single, easy-to-use interface, with enhanced communication robustness.\n- **Multi Bitrate Playback** - Enables the player to switch in real-time between multiple quality renditions based on network conditions and client capabilities.\n- **Adaptive Bitrate Streaming** - Allows the streamer to adapt its video bitrate in real-time based on network conditions and client capabilities.\n\n## Requirements\n\n| Item | Description |\n| --- | --- |\n| **Ceeblue Account** | To create a Stream, you will need an active account with [Ceeblue Streaming Cloud](https://dashboard.ceeblue.tv).\u003cbr\u003eA trial account is sufficient. If you do not have one yet, you can request one on the [Ceeblue website](https://ceeblue.net/free-trial/). |\n| **Stream** | To use this library, you'll first need to create a stream either through our Rest API or on the dashboard.\u003cbr\u003e\u003cbr\u003eUse the following steps:\u003col\u003e\u003cli\u003e\u003ca href=\"https://docs.ceeblue.net/reference/create-a-new-stream\" target=\"_blank\"\u003eCreate a new stream\u003c/a\u003e\u003c/li\u003e\u003cli\u003eCopy the **Stream name (UUID)**\u003c/li\u003e\u003cli\u003eCopy the **Endpoint**\u003c/li\u003e\u003c/ol\u003e |\n| **Node Package Manager (npm)** | Download and install from https://nodejs.org/en/download |\n| **http-server** | (Optional) Simple, zero-configuration command-line static HTTP server\u003cbr\u003e\u003cbr\u003eThe \u003ca href=\"https://www.npmjs.com/package/http-server\" target=\"_blank\"\u003ehttp-server\u003c/a\u003e is useful to explore the WebRTC client [examples](#examples) or the [documentation](#documentation) locally when you do not have a host.\u003cbr\u003e\u003cbr\u003eTo start the server, use the following command: `http-server . -p 8081`|\n\n## Usage\n\nAdd the library as a dependency to your npm project using:\n```\nnpm install @ceeblue/webrtc-client\n```\nThen [import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) the library into your project with:\n ```javascript\nimport * as WebRTC from '@ceeblue/webrtc-client';\n```\n\u003e 💡 **TIP**\n\u003e \n\u003e If your project uses [TypeScript](https://www.typescriptlang.org/), it is recommended to set `\"target\": \"ES6\"` in your configuration to align with our usage of ES6 features and ensures that your build will succeed (for those requiring a backwards-compatible [UMD](https://github.com/umdjs/umd) version, a [local build](#building-locally) is advised).\n\u003e Then defining the compiler option `\"moduleResolution\": \"Node\"` in **tsconfig.json** helps with import errors by ensuring that TypeScript uses the correct strategy for resolving imports based on the targeted Node.js version.\n\u003e   ```json\n\u003e   {\n\u003e      \"compilerOptions\": {\n\u003e         \"target\": \"ES6\",\n\u003e         \"moduleResolution\": \"Node\"\n\u003e      }\n\u003e   }\n\u003e   ```\n\n### Publish a stream\n\nTo publish the stream `\u003cstreamName\u003e` to `\u003cendPoint\u003e`, use the [Streamer](./src/Streamer.ts) class and the variables you saved while setting up the stream in the dashboard [Requirements](#requirements). For a full example, see push.html in [Examples](#examples).\n\n```javascript\nimport { Streamer } from '@ceeblue/webrtc-client';\n\nconst streamer = new Streamer();\nstreamer.onStart = stream =\u003e {\n   console.log('start streaming');\n}\nstreamer.onStop = _ =\u003e {\n   console.log('stop streaming');\n}\nconst stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });\nstreamer.start(stream, {\n   endPoint: \u003cendPoint\u003e,\n   streamName: \u003cstreamName\u003e,\n   iceServer: {\n      urls: ['turn:' + \u003cendPoint\u003e + ':3478?transport=tcp', 'turn:' + \u003cendPoint\u003e + ':3478'],\n      username: 'ceeblue', credential: 'ceeblue'\n   }\n});\n```\n\n### Play a stream\n\nTo play the stream `\u003cstreamName\u003e` from `\u003cendPoint\u003e`, use the [Player](./src/Player.ts) class and the variables you saved while setting up the stream in the dashboard [Requirements](#requirements). For a full example, see play.html in [Examples](#examples).\n\n```javascript\nimport { Player } from '@ceeblue/webrtc-client';\n\nconst player = new Player();\n\nplayer.onStart = stream =\u003e {\n   videoElement.srcObject = stream;\n   console.log('start playing');\n}\nplayer.onStop = _ =\u003e {\n   console.log('stop playing');\n}\nplayer.start({\n   endPoint: \u003cendPoint\u003e,\n   streamName: \u003cstreamName\u003e,\n   iceServer: {\n      urls: ['turn:' + \u003cendPoint\u003e + ':3478?transport=tcp', 'turn:' + \u003cendPoint\u003e + ':3478'],\n      username: 'ceeblue', credential: 'ceeblue'\n   }\n});\n```\n\n## Examples\n\nTo understand how to use the library through examples, we provide three illustrations of its implementation:\n\n- [/examples/streamer.html](./examples/streamer.html) → Publish a stream with your webcam\n- [/examples/player.html](./examples/player.html) → Play a stream\n- [/examples/player-with-timed-metadata.html](./examples/player-with-timed-metadata.html) → Play a stream with timed metadata\n\n1. In your project directory, if you have installed the [http-server service](#requirements), execute the following command from the Terminal prompt by navigating to:\n\n    ```shell\n    http-server . -p 8081\n    ```\n\n2. Navigate to the specified address in your browser, making sure to replace any placeholders in the URL with the variables you have copied during the [stream setup](#requirements) in the dashboard.\n\n    ```html\n    http://localhost:8081/examples/streamer.html?host=\u003cendPoint\u003e\u0026stream=\u003cstreamName\u003e\n    ```\n\n3. Click on **Start streaming**. Upon doing so, a live stream from your webcam will initiate. Should your browser request permission to access your camera, ensure to grant it.\n\n4. In the address bar of a separate browser window, enter the following address, making sure to replace the placeholders in the URL with the variables you have copied while configuring the [stream setup](#requirements) in the dashboard.\n\n    ```html\n    http://localhost:8081/examples/player.html?host=\u003cendPoint\u003e\u0026stream=\u003cstreamName\u003e\n    ```\n\n5. Click **Play** to start watching the live stream.\n\n## Building locally\n\n1. [Clone](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository) this repository\n2. Enter the `webrtc-client` folder and run `npm install` to install packages dependencies.\n3. Execute `npm run build`. The output will be five files placed in the **/dist/** folder:\n   - **webrtc-client.d.ts** Typescript definitions file\n   - **webrtc-client.js**: Bundled JavaScript library\n   - **webrtc-client.js.map**: Source map that associates the bundled library with the original source files\n   - **webrtc-client.min.js** Minified version of the library, optimized for size\n   - **webrtc-client.min.js.map** Source map that associates the minified library with the original source files\n\n```\ngit clone https://github.com/CeeblueTV/webrtc-client.git\ncd webrtc-client\nnpm install\nnpm run build\n```\n\n\u003e 💡 **TIP**\n\u003e\n\u003e - To build a UMD (Universal Module Definition) version compatible with older browsers, you can run the following command:\n\u003e   ```\n\u003e   npm run build:es5\n\u003e   ```\n\u003e\n\u003e - To automatically build bundles when any modification has been applied, you can run a watch command. The watch command will continuously monitor your project files for changes and rebuild the bundles accordingly.\n\u003e   ```\n\u003e   npm run watch\n\u003e   ```\n\u003e   Or for ES5 (UMD):\n\u003e   ```\n\u003e   npm run watch:es5\n\u003e   ```\n\n## Documentation\n\nThis monorepo also contains built-in documentation about the APIs in the library, which can be built using the following npm command:\n```\nnpm run build:docs\n```\nYou can access the documentation by opening the index.html file in the docs folder with your browser (`./docs/index.html`), or if you have installed and started the [http-server service](#requirements) by navigating to:\n```\nhttp://localhost:8081/docs/\n```\n\n## Contribution\n\nAll contributions are welcome. Please see [our contribution guide](/CONTRIBUTING.md) for details.\n\n## License\n\nBy contributing code to this project, you agree to license your contribution under the [GNU Affero General Public License](/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fceebluetv%2Fwebrtc-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fceebluetv%2Fwebrtc-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fceebluetv%2Fwebrtc-client/lists"}