{"id":17497023,"url":"https://github.com/ceebluetv/videojs-plugins","last_synced_at":"2026-02-09T06:33:52.658Z","repository":{"id":222715123,"uuid":"756791296","full_name":"CeeblueTV/videojs-plugins","owner":"CeeblueTV","description":"Video.js plugins to play streams hosted on the Ceeblue cloud platform.","archived":false,"fork":false,"pushed_at":"2025-02-12T09:54:41.000Z","size":738,"stargazers_count":0,"open_issues_count":1,"forks_count":1,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-23T01:07:20.034Z","etag":null,"topics":["cdn","dash","fallback","hls","live","ll-hls","real-time","streaming","video","webrtc","whep","whip"],"latest_commit_sha":null,"homepage":"https://ceeblue.net","language":"JavaScript","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":"CHANGELOG.md","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,"publiccode":null,"codemeta":null}},"created_at":"2024-02-13T10:14:14.000Z","updated_at":"2025-02-06T16:11:25.000Z","dependencies_parsed_at":"2024-02-22T17:53:15.407Z","dependency_job_id":"3217d828-2d7e-40bb-85ac-0a5662bb9372","html_url":"https://github.com/CeeblueTV/videojs-plugins","commit_stats":{"total_commits":17,"total_committers":3,"mean_commits":5.666666666666667,"dds":"0.11764705882352944","last_synced_commit":"af6a73c28a2a38a6f71ccc000b1fe2d04fdfb420"},"previous_names":["ceebluetv/videojs-plugins"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CeeblueTV%2Fvideojs-plugins","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CeeblueTV%2Fvideojs-plugins/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CeeblueTV%2Fvideojs-plugins/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CeeblueTV%2Fvideojs-plugins/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CeeblueTV","download_url":"https://codeload.github.com/CeeblueTV/videojs-plugins/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250349053,"owners_count":21415914,"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","dash","fallback","hls","live","ll-hls","real-time","streaming","video","webrtc","whep","whip"],"created_at":"2024-10-19T15:09:59.969Z","updated_at":"2026-02-09T06:33:52.544Z","avatar_url":"https://github.com/CeeblueTV.png","language":"JavaScript","readme":"# videojs-plugins\n\n[![npm](https://img.shields.io/npm/v/%40ceeblue%2Fvideojs-plugins)](https://npmjs.org/package/@ceeblue/videojs-plugins)\n\nSet of [Videojs] plugins for playing streams from the [Ceeblue] cloud.\n\nThis plugin contains:\n\n- **[WebRTCSource](#webrtcsource)**, a [Videojs] WebRTC playback source handler supporting [WHEP] and the Ceeblue WebSocket custom signaling,\n- **[QualityButton](#qualitybutton)**, a plugin to select the video quality for any kind of source implementing [videojs-contrib-quality-levels],\n- **[SourceController](#sourcecontroller)**, a utility class to switch automatically from one Ceeblue source to another (including WebRTC, HLS, LLHLS and DASH)\n\n## Table of Contents\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n- [Installation](#installation)\n- [WebRTCSource](#webrtcsource)\n  - [Parameters](#parameters)\n    - [**src**](#src)\n    - [**type**](#type)\n    - [**iceserver**](#iceserver)\n    - [**audiobutton**](#audiobutton)\n    - [**data**](#data)\n  - [Source Object](#source-object)\n  - [`\u003csource\u003e` HTML tag](#source-html-tag)\n- [QualityButton](#qualitybutton)\n- [SourceController](#sourcecontroller)\n  - [Disabling QualityButton](#disabling-qualitybutton)\n- [Examples](#examples)\n- [Documentation](#documentation)\n- [Contribution](#contribution)\n- [License](#license)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n## Installation\n\nDownload the package from [@ceeblue/videojs-plugins][npm-url] or build it manually from the [github sources][github-sources]:\n\n```sh\nnpm install\nnpm run build\n```\n\nInclude [@ceeblue/videojs-plugins][npm-url] in your HTML code as usual with the link to [Videojs] and this library.\n\nExample:\n\n```html\n\u003cscript src=\"https://vjs.zencdn.net/8.7.0/video.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"./dist/videojs-plugins.js\"\u003e\u003c/script\u003e\n```\n\n## WebRTCSource\n\n### Parameters\n\n#### **src**\n\nThe `src` field contains the URL of the WebRTC endpoint.\n\nThe protocol can be WebSocket (`wss`) to get the best of the custom Ceeblue signaling or HTTP (`https`) to use the standard WHEP signaling protocol.\n\nHere is the expected format:\n\n```js\n[wss|https]://\u003chost\u003e[/\u003cpathname\u003e]/\u003cstreamName\u003e[?id=\u003caccessToken\u003e][\u0026audio=\u003caudioTrackId\u003e][\u0026video=\u003cvideoTrackId\u003e]\n```\n\nAnd here is an example of a WebSocket URL:\n\n```js\nwss://la-8.live.ceeblue.tv/as+12346f7c-e5db-450b-9603-c3644274779b\n```\n\nThe following options can be set in the query:\n\n- **id** The access token in case the stream is private.\n- **audio** the audio track ID or `none` to disable audio.\n- **video** the video track ID or `none` to disable video.\n\n#### **type**\n\n**It is important for the MIME-type to be empty to use the WebRTC source.**\n\n#### **iceserver**\n\n[Ice-server](https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/RTCPeerConnection#iceservers) structure in JSON string format with TURN URL used to establish the WebRTC connection, mainly for TCP fallback.\n\n\u003e Do not enclose the object in an array.\n\u003e If you have multiple TURN servers, you can add them in the `urls` array.\n\u003e **If not set, the plugin will use the default TURN server**\n\n**Example:**\n\n\u003e Replace `\u003chost\u003e` by your endpoint hostname\n\n```js\n{\n  \"urls\": [\"turn:\u003chost\u003e?transport=tcp\", \"turn:\u003chost\u003e:3478\"],\n  \"username\": \"ceeblue\",\n  \"credential\": \"ceeblue\"\n}\n```\n\n#### **audiobutton**\n\n`false` to disable the WebRTC audio track selection button, `true` by default.\n\n#### **data**\n\n`true` to listen to all timed metadata tracks, `false` otherwise. `true` by default.\n\n\u003e This has no effect on the player, to get the timed metadata in your application you need to use the [textTracks() API](https://videojs.com/guides/text-tracks/) of [Videojs], you can check [examples/player.html](./examples/player.html) for a usage example.\n\n### Source Object\n\nCall the `player.src()` method with a WebRTC URL.\n\n**Example:**\n\n\u003e Replace `\u003chost\u003e` by your endpoint hostname and `\u003cstreamName\u003e` by your stream name.\n\n```html\n\u003cscript type=\"module\"\u003e\n  import {} from \"/path/to/video.min.js\";\n  import {} from \"/path/to/ceeblue/videojs-plugins.min.js\";\n  ...\n  const player = videojs('video-tag');\n  player.src({\n    src: 'wss://\u003chost\u003e/\u003cstreamName\u003e',\n    iceserver: '{\n      \"urls\": [\"turn:\u003chost\u003e?transport=tcp\", \"turn:\u003chost\u003e:3478\"],\n      \"username\": \"ceeblue\",\n      \"credential\": \"ceeblue\"\n    }',\n    audiobutton: true,\n    data: false\n  });\n  player.start();\n\u003c/script\u003e\n```\n\n### `\u003csource\u003e` HTML tag\n\nThe WebRTC source can be set directly in the HTML Source tag.\n\n**Example:**\n\n\u003e Replace `\u003chost\u003e` by your endpoint hostname and `\u003cstreamName\u003e` by your stream name.\n\n```html\n\u003cscript src=\"//path/to/video.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"//path/to/ceeblue/videojs-plugins.min.js\"\u003e\u003c/script\u003e\n\n\u003cdiv id=\"video_container\"\u003e\n    \u003cvideo id=video-player width=960 height=540 class=\"video-js vjs-default-skin\" controls\u003e\n        \u003csource src=\"wss://\u003chost\u003e/webrtc/\u003cstreamName\u003e\" \n            iceserver='{\"urls\": [\"turn:\u003chost\u003e?transport=tcp\", \"turn:\u003chost\u003e:3478\"], \"username\": \"ceeblue\", \"credential\": \"ceeblue\"}'\u003e\n    \u003c/video\u003e\n\u003c/div\u003e\n\u003cscript\u003e\n  var player = videojs('video-player');\n\u003c/script\u003e\n```\n\n## QualityButton\n\nIf you are not using the [SourceController](#sourcecontroller), the QualityButton plugin can be called with a simple command to create the video menu button using the qualityLevels of the current source (see [videojs-contrib-quality-levels]):\n\n```html\n\u003cscript\u003e\n  var player = videojs('video-player');\n  player.qualityButton();\n\u003c/script\u003e\n```\n\n## SourceController\n\nThe [SourceController](./src/controllers/SourceController.js) allows you to configure fallback sources if the current source is not working (for example, if WebRTC is not supported in the browser).\nIt is also used for seamlessly switching from one source to the other.\n\nThe constructor of `SourceController` takes three arguments :\n\n- The videojs player,\n- The `Connect.Params`, the ceeblue connection parameters (see [Connect class]),\n- The list of sources in order of priority. A source can be a string from the `SourceType` list or a [Source Object] in order to set custom options.\n\nTo start the `SourceController` call the `start()` function with the `SourceType` to start with, or no argument to start from the first source.\n\n\u003e The `SourceType` object in [SourceController.js](./src/controllers/SourceController.js) defines the list of possible sources,\n\u003e The [Source object] must have the `src` field and the `type` field set to the MIME type of the source (empty for WebRTC, see [WebRTCSource](#webrtcsource)).\n\n**Example:**\n\n\u003e Replace `\u003cendPoint\u003e` by your endPoint, `host` by the endPoint hostname and `\u003cstreamName\u003e` by your stream name.\n\n```javascript\n  const sourceController = new SourceController(\n    player\n  );\n  sourceController.on('sourcechanged', (source) =\u003e {\n    console.log('sourcechanged', source); // null means no more sources available\n  });\n  sourceController.start(\n    {\n      endPoint: '\u003cendPoint\u003e',\n      streamName: '\u003cstreamName\u003e'\n      query: 'id=\u003caccessToken\u003e'\n    }, \n    [\n      {\n        // A WebRTC source with custom options\n        src: 'wss://\u003chost\u003e/\u003cstreamName\u003e',\n        iceserver: '{\"urls\": [\"turn:\u003chost\u003e?transport=tcp\", \"turn:\u003chost\u003e:3478\"], \"username\": \"ceeblue\", \"credential\": \"ceeblue\"}',\n      },\n      'llhls',\n      'dash',\n      {\n        // A fallback source with a custom type\n        src: 'http://vjs.zencdn.net/v/oceans.mp4',\n        type: 'video/mp4'\n      }\n    ]);\n```\n\n### Disabling QualityButton\n\nBy default the SourceController creates a [QualityButton](#qualitybutton) for the current source but you can disable it in the player's options with the `qualityButton` option:\n\n```javascript\nconst player = videojs(videoEl, { qualityButton: false});\n```\n\n## Examples\n\nExamples can be found in the [examples/](./examples/) directory:\n\n- **player.html** An advanced example using WebRTC, the [SourceController](#sourcecontroller), and the [QualityButton](#qualitybutton), with a UI for setting parameters and displaying timed metadata.\n- **simple-player.html** A simple example using [SourceController](#sourcecontroller) with default parameters.\n- **webrtc-player.html** A simple example with a WebRTC source configured with the HTML `\u003csource\u003e` tag.\n\nAll examples include the HTML code to include the library and player, and the JavaScript code to configure the player.\nYou can add query parameters to the URL to test the different options.\n\nFor example:\n\u003e Replace `\u003chost\u003e` with your endpoint host name, `\u003cstreamName\u003e` with your stream name, and `\u003caccessToken\u003e` with the\nviewer access token provided by the Ceeblue Cloud API (optional, only if the stream is private).\n\n```html\nhttps://localhost:8080/examples/player.html?host=\u003chost\u003e\u0026stream=\u003cstreamName\u003e\u0026accessToken=\u003caccessToken\u003e\n```\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\n```shell\nnpm run docs\n```\n\nOpen the index.html file in the docs folder with your browser to access the documentation. (`./docs/api/index.html`).\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\n[ceeblue]: https://ceeblue.net/\n[Connect class]: https://github.com/CeeblueTV/web-utils/blob/main/src/Connect.ts\n[github-sources]: https://github.com/CeeblueTV/videojs-plugins\n[npm-url]: https://www.npmjs.com/package/@ceeblue/videojs-plugins\n[Source Object]: https://www.w3schools.com/JSREF/dom_obj_source.asp\n[videojs]: https://videojs.com/\n[videojs-options]: https://videojs.com/guides/options\n[videojs-contrib-quality-levels]: https://github.com/videojs/videojs-contrib-quality-levels\n[WHEP]: https://datatracker.ietf.org/doc/draft-murillo-whep/\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fceebluetv%2Fvideojs-plugins","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fceebluetv%2Fvideojs-plugins","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fceebluetv%2Fvideojs-plugins/lists"}