@cycjimmy/jsmpeg-player 6.1.7 → 7.0.0

package/README.md

@@ -1,10 +1,10 @@
 # JSMpeg Player(TS Player)
 
-![][workflows-badge-image]
+![Test CI][workflows-badge-image]
 [![libraries dependency status][libraries-status-image]][libraries-status-url]
 [![libraries sourcerank][libraries-sourcerank-image]][libraries-sourcerank-url]
 [![Release date][release-date-image]][release-url]
-[![rollup][rollup-image]][rollup-url]
+[![vite][vite-image]][vite-url]
 [![semantic-release][semantic-image]][semantic-url]
 [![npm license][license-image]][download-url]
 
@@ -12,7 +12,7 @@
 * **[jsmpeg-player](https://github.com/cycdpo/jsmpeg-player) has been renamed to @cycjimmy/jsmpeg-player for scoped NPM package.**
 * JSMpeg player is based on [jsmpeg](https://github.com/phoboslab/jsmpeg).
 * The video must be compressed into the TS format of MPEG1 / MP2.
-* Apple device automatically plays without sound, you need to guide the user to click on the video in the lower right corner of the video icon to unlock the sound. (no similar problem in non-autoplay mode)
+* Autoplay with sound is blocked by the browser until the page receives a user gesture: Apple device automatically plays without sound, you need to guide the user to click on the video in the lower right corner of the video icon to unlock the sound. Chrome and Safari follow the same autoplay policy, where the sound stays in sync with the picture and starts as soon as the user interacts with the page, or can be unlocked right away through the same icon. (no similar problem in non-autoplay mode)
 * [Demo][github-pages-url]
 
 ## How to use
@@ -29,13 +29,11 @@ $ yarn add @cycjimmy/jsmpeg-player
 
 ### Usage
 ```javascript
-import JSMpeg from '@cycjimmy/jsmpeg-player';
-# OR
-const JSMpeg = require('@cycjimmy/jsmpeg-player');
+import JSMpeg from '@cycjimmy/jsmpeg-player'
 ```
 
 ```javascript
-new JSMpeg.VideoElement(videoWrapper, videoUrl [, options] [, overlayOptions])
+// new JSMpeg.VideoElement(videoWrapper, videoUrl [, options] [, overlayOptions])
 ```
 
 * `JSMpeg.VideoElement` config:
@@ -74,10 +72,10 @@ The WebGL drawing buffer is cleared once a frame has been composited, so reading
 ```javascript
 const video = new JSMpeg.VideoElement('#videoWrapper', 'video.ts', {}, {
   preserveDrawingBuffer: true,
-});
+})
 
 // Any time after the first frame has been rendered
-const dataUrl = video.els.canvas.toDataURL('image/png');
+const dataUrl = video.els.canvas.toDataURL('image/png')
 ```
 
 * The flag is read when the WebGL context is created, so it must be passed at construction time — it can not be enabled on a player that is already running.
@@ -89,15 +87,15 @@ const dataUrl = video.els.canvas.toDataURL('image/png');
 A browser can not set an `Authorization` header on a WebSocket handshake — `new WebSocket(url, protocols)` is all the WebSocket API offers. The closest browser-native option is to send the token as a subprotocol, which arrives on the server as the `Sec-WebSocket-Protocol` request header (kept out of the URL and out of access logs):
 
 ```javascript
-new JSMpeg.VideoElement('#videoWrapper', 'wss://example.com/stream', {}, {
+const video = new JSMpeg.VideoElement('#videoWrapper', 'wss://example.com/stream', {}, {
   protocols: ['Bearer.<token>'],
-});
+})
 ```
 
 ```javascript
-new JSMpeg.Player('wss://example.com/stream', {
+const player = new JSMpeg.Player('wss://example.com/stream', {
   protocols: ['Bearer.<token>'],
-});
+})
 ```
 
 * The server must accept the subprotocol and **echo it back** in the handshake response (`Sec-WebSocket-Protocol`). If none of the requested subprotocols is echoed, the browser aborts the connection.
@@ -112,7 +110,7 @@ Each `JSMpeg.VideoElement` is a complete, independent player: it opens its own s
 
 **Call `destroy()` when a player goes away.** In a SPA, discarding the instance returned by the constructor — e.g. calling it in `componentDidMount` without storing the result — leaves the player running after its markup is gone: the socket, the WebGL context and the decode loop all survive. A few navigations are then enough to exhaust the page, and since nothing throws, a hard reload appears to be the only fix.
 
-```javascript
+```text
 // React
 componentDidMount() {
   this.video = new JSMpeg.VideoElement('#videoWrapper', 'wss://example.com/stream');
@@ -146,9 +144,37 @@ To keep many cameras on screen:
 ## CDN
 To use via a CDN include this in your HTML:
 ```text
-<script src="https://cdn.jsdelivr.net/npm/@cycjimmy/jsmpeg-player@6/dist/jsmpeg-player.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@cycjimmy/jsmpeg-player@7/dist/jsmpeg-player.umd.min.js"></script>
 ```
 
+## Migrating to v7
+
+v7 drops the CommonJS build and raises the Node and browser targets. `import` and the browser global are unchanged, so most consumers need no change at all.
+
+* `dist/jsmpeg-player.cjs` is no longer produced and `exports` no longer exposes a `require` condition. `require('@cycjimmy/jsmpeg-player')` keeps working on Node >= 20.19, because Node can `require()` an ES module, but it returns the module namespace: use `require('@cycjimmy/jsmpeg-player').default`.
+* `main` and `module` both point at `dist/jsmpeg-player.esm.js`. The `browser` field still points at the UMD build for CDN and legacy tooling.
+* `engines.node` is now `^22.22.2 || >=24.15.0`, the floor of the new build toolchain. `engines` is stripped from the published tarball, so it only constrains contributors and CI, not consumers.
+* The build targets `es2015` with the `defaults` browserslist, so IE is no longer supported. Babel down-leveling is gone, which makes `jsmpeg-player.esm.js` about 24% smaller and `jsmpeg-player.umd.min.js` slightly smaller than v6.
+* Deep paths keep working through the `./dist/*` export.
+* The runtime CSS is still injected as a `<style>` element; there is no stylesheet to import.
+
+```javascript
+// CommonJS consumers: require() can load an ES module from Node 20.19 on
+const JSMpeg = require('@cycjimmy/jsmpeg-player').default
+```
+
+## Development
+
+```shell
+$ npm run dev          # Vite dev server on top of the root index.html
+$ npm run lint         # ESLint (flat config, @antfu/eslint-config)
+$ npm run lint:style   # Stylelint for src/**/*.{css,scss}
+$ npm test             # node --test
+$ npm run package      # build dist/ and assemble .release/
+```
+
+`index.html` in the repository root is the development entry: it imports `src/` through Vite, so changes show up without a build. `static/index.html` is the GitHub Pages demo and loads the pre-built `jsmpeg-player.umd.js` with a plain `<script>` tag; `npm run build:deployment` assembles it in `.publish/`. See [CONTRIBUTING.md](CONTRIBUTING.md) for the checks the CI runs.
+
 ## Encoding Video/Audio for [jsmpeg](https://github.com/phoboslab/jsmpeg) by [ffmpeg](https://ffmpeg.org/). E.g:
 ```shell
 $ ffmpeg -i input.mp4 -f mpegts \
@@ -187,8 +213,8 @@ $ ffmpeg -i input.mp4 -f mpegts \
 [release-date-image]: https://img.shields.io/github/release-date/cycjimmy/jsmpeg-player
 [release-url]: https://github.com/cycjimmy/jsmpeg-player/releases
 
-[rollup-image]: https://img.shields.io/github/package-json/dependency-version/cycjimmy/jsmpeg-player/dev/rollup
-[rollup-url]: https://github.com/rollup/rollup
+[vite-image]: https://img.shields.io/github/package-json/dependency-version/cycjimmy/jsmpeg-player/dev/vite
+[vite-url]: https://github.com/vitejs/vite
 
 [semantic-image]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
 [semantic-url]: https://github.com/semantic-release/semantic-release