diff --git a/nanoplayer-vuejs-sample/package-lock.json b/nanoplayer-vuejs-sample/package-lock.json index a3fb3c9..94d2d64 100644 --- a/nanoplayer-vuejs-sample/package-lock.json +++ b/nanoplayer-vuejs-sample/package-lock.json @@ -1687,17 +1687,6 @@ "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==", "dev": true }, - "ansi-styles": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz", - "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==", - "dev": true, - "optional": true, - "requires": { - "@types/color-name": "^1.1.1", - "color-convert": "^2.0.1" - } - }, "cacache": { "version": "13.0.1", "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz", @@ -1724,34 +1713,6 @@ "unique-filename": "^1.1.1" } }, - "chalk": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz", - "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==", - "dev": true, - "optional": true, - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "optional": true, - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true, - "optional": true - }, "find-cache-dir": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz", @@ -1773,25 +1734,6 @@ "path-exists": "^4.0.0" } }, - "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, - "optional": true - }, - "loader-utils": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", - "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", - "dev": true, - "optional": true, - "requires": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^2.1.2" - } - }, "locate-path": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", @@ -1856,16 +1798,6 @@ "minipass": "^3.1.1" } }, - "supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "optional": true, - "requires": { - "has-flag": "^4.0.0" - } - }, "terser-webpack-plugin": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz", @@ -1882,18 +1814,6 @@ "terser": "^4.6.12", "webpack-sources": "^1.4.3" } - }, - "vue-loader-v16": { - "version": "npm:vue-loader@16.0.0-beta.8", - "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.8.tgz", - "integrity": "sha512-oouKUQWWHbSihqSD7mhymGPX1OQ4hedzAHyvm8RdyHh6m3oIvoRF+NM45i/bhNOlo8jCnuJhaSUf/6oDjv978g==", - "dev": true, - "optional": true, - "requires": { - "chalk": "^4.1.0", - "hash-sum": "^2.0.0", - "loader-utils": "^2.0.0" - } } } }, @@ -10380,6 +10300,88 @@ } } }, + "vue-loader-v16": { + "version": "npm:vue-loader@16.0.0-beta.8", + "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.8.tgz", + "integrity": "sha512-oouKUQWWHbSihqSD7mhymGPX1OQ4hedzAHyvm8RdyHh6m3oIvoRF+NM45i/bhNOlo8jCnuJhaSUf/6oDjv978g==", + "dev": true, + "optional": true, + "requires": { + "chalk": "^4.1.0", + "hash-sum": "^2.0.0", + "loader-utils": "^2.0.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz", + "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==", + "dev": true, + "optional": true, + "requires": { + "@types/color-name": "^1.1.1", + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz", + "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==", + "dev": true, + "optional": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "optional": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true, + "optional": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "optional": true + }, + "loader-utils": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", + "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", + "dev": true, + "optional": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "optional": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, "vue-style-loader": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz", diff --git a/nanoplayer-vuejs-sample/src/components/NanoPlayer.vue b/nanoplayer-vuejs-sample/src/components/NanoPlayer.vue index b4d6d59..7929a81 100644 --- a/nanoplayer-vuejs-sample/src/components/NanoPlayer.vue +++ b/nanoplayer-vuejs-sample/src/components/NanoPlayer.vue @@ -21,26 +21,217 @@ export default { name: "NanoPlayer", data() { return { + /* + Whether you want to configure a single stream or multiple streams you need to configure them inside the `config.source.entries` object during the initial `setup` call. + If secure playback should be used for an ABR multi-stream configuration, a secure token has to be generated for each stream independently. + That means that the object `h5live.security` has to be set for each entry. + + Visit our documentation for more information: + - setup ABR https://docs.nanocosmos.de/docs/nanoplayer/nanoplayer_feature_stream_switching + - setup secure playback https://docs.nanocosmos.de/docs/nanoplayer/nanoplayer_token_security + - setup ABR and secure playback https://docs.nanocosmos.de/docs/nanoplayer/nanoplayer_feature_stream_switching/#example-bintu-multi-stream-configuration-with-abr-and-playback-security + - NanoPlayer API https://docs.nanocosmos.de/docs/nanoplayer/nanoplayer_api + + Example single stream configuration: + config: { + "source" : { + "entries": [ + { + "index": 0, + "hls": "", + "h5live": { + "rtmp": { + "url": "rtmp://bintu-play.nanocosmos.de/play", + "streamname": "XXXXX-YYYYY" + }, + "server": { + "websocket": "wss://bintu-h5live.nanocosmos.de:443/h5live/stream.mp4", + "hls": "https://bintu-h5live.nanocosmos.de:443/h5live/http/playlist.m3u8", + "progressive": "https://bintu-h5live.nanocosmos.de:443/h5live/http/stream.mp4" + }, + "token": "", + "security": {} + }, + "bintu": {} + } + ] + }, + "playback": { + ... + }, + "style": { + ... + } + }; + + Example multi stream configuration (with ABR) + config: { + "source" : { + "entries": [ // array of 'entry' objects + { + "index": 0, + "hls": "", + "h5live": { + "rtmp": { + "url": "rtmp://bintu-play.nanocosmos.de/play", + "streamname": "XXXXX-YYYY0" + }, + "server": { + "websocket": "wss://bintu-h5live.nanocosmos.de:443/h5live/stream.mp4", + "hls": "https://bintu-h5live.nanocosmos.de:443/h5live/http/playlist.m3u8", + "progressive": "https://bintu-h5live.nanocosmos.de:443/h5live/http/stream.mp4" + }, + "token": "", + "security": {} + }, + "bintu": {} + }, + { + "index": 1, + "hls": "", + "h5live": { + "rtmp": { + "url": "rtmp://bintu-play.nanocosmos.de/play", + "streamname": "XXXXX-YYYY1" + }, + "server": { + "websocket": "wss://bintu-h5live.nanocosmos.de:443/h5live/stream.mp4", + "hls": "https://bintu-h5live.nanocosmos.de:443/h5live/http/playlist.m3u8", + "progressive": "https://bintu-h5live.nanocosmos.de:443/h5live/http/stream.mp4" + }, + "token": "", + "security": {} + }, + "bintu": {} + }, + { + "index": 2, + "hls": "", + "h5live": { + "rtmp": { + "url": "rtmp://bintu-play.nanocosmos.de/play", + "streamname": "XXXXX-YYYY2" + }, + "server": { + "websocket": "wss://bintu-h5live.nanocosmos.de:443/h5live/stream.mp4", + "hls": "https://bintu-h5live.nanocosmos.de:443/h5live/http/playlist.m3u8", + "progressive": "https://bintu-h5live.nanocosmos.de:443/h5live/http/stream.mp4" + }, + "token": "", + "security": {} + }, + "bintu": {} + } + ], + "options": { + "adaption": { + "rule": "deviationOfMean" // enable ABR + }, + "switch": { + 'method': 'server', + 'pauseOnError': false, + 'forcePlay': true, + 'fastStart': false, + 'timeout': 10, + } + }, + "startIndex": 2 // lowest + }, + "playback": { + ... + }, + "style": { + ... + } + }; + */ + config: { source: { - bintu: { - // Enter your bintu streamid here - // for more information on how to setup check our API documentation - // https://docs.nanocosmos.de/docs/nanoplayer/nanoplayer_api/ - streamid: "859b1a11-5458-404a-bd10-5fcd5a9228f1", + entries: [ + { + index: 0, + hls: "", + h5live: { + rtmp: { + url: "rtmp://bintu-play.nanocosmos.de/play", + streamname: "HX26g-NRbx9", + }, + server: { + websocket: + "wss://bintu-play.nanocosmos.de:443/h5live/stream.mp4", + hls: + "https://bintu-play.nanocosmos.de:443/h5live/http/playlist.m3u8", + progressive: + "https://bintu-play.nanocosmos.de:443/h5live/http/stream.mp4", + }, + token: "", + security: {}, + }, + bintu: {}, + }, + { + index: 1, + hls: "", + h5live: { + rtmp: { + url: "rtmp://bintu-play.nanocosmos.de/play", + streamname: "HX26g-uVn3M", + }, + server: { + websocket: + "wss://bintu-play.nanocosmos.de:443/h5live/stream.mp4", + hls: + "https://bintu-play.nanocosmos.de:443/h5live/http/playlist.m3u8", + progressive: + "https://bintu-play.nanocosmos.de:443/h5live/http/stream.mp4", + }, + token: "", + security: {}, + }, + bintu: {}, + }, + { + index: 2, + hls: "", + h5live: { + rtmp: { + url: "rtmp://bintu-play.nanocosmos.de/play", + streamname: "HX26g-VbAxm", + }, + server: { + websocket: + "wss://bintu-play.nanocosmos.de:443/h5live/stream.mp4", + hls: + "https://bintu-play.nanocosmos.de:443/h5live/http/playlist.m3u8", + progressive: + "https://bintu-play.nanocosmos.de:443/h5live/http/stream.mp4", + }, + token: "", + security: {}, + }, + bintu: {}, + }, + ], + options: { + adaption: { + rule: "deviationOfMean", + }, + switch: {}, }, + startIndex: 2, }, playback: { autoplay: true, automute: true, - muted: false, - flashplayer: "https://demo.nanocosmos.de/nanoplayer/nano.player.swf", + muted: true, + flashplayer: "//demo.nanocosmos.de/nanoplayer/nano.player.swf", }, style: { - controls: true, + displayMutedAutoplay: true, }, - } - } + }, + }; }, mounted: function () { var nanoPlayer = new NanoPlayer("playerDiv");