├── .babelrc
├── .dockerignore
├── .eslintignore
├── .eslintrc.js
├── .flowconfig
├── .gitignore
├── .gitlab-ci.yml
├── .npmignore
├── .prettierrc
├── .vscode
    └── launch.json
├── CHANGELOG.md
├── LICENSE
├── README.md
├── deploy
    ├── Dockerfile.dependencies
    ├── Dockerfile.frontci.build
    ├── Dockerfile.package.build
    ├── Dockerfile.prepare
    ├── Makefile
    ├── id_rsa
    └── id_rsa.pub
├── dist
    ├── FlussonicMsePlayer.js
    ├── FlussonicMsePlayer.min.js
    ├── FlussonicMsePlayer.min.sentry.js
    ├── FlussonicMsePlayer.sentry.js
    ├── retroview.worker.js
    ├── scripts
    │   ├── sentry.6103c0ad094caf3094f0.js
    │   └── sentry.984bf65be582a6792f4f.js
    ├── stats.worker.js
    └── ws.worker.js
├── gulpfile.js
├── messages.md
├── messages.ru.md
├── package.json
├── src
    ├── FlussonicMsePlayer.js
    ├── FlussonicMsePlayer.test.js
    ├── controllers
    │   ├── buffers.js
    │   ├── mediaSource.js
    │   └── ws.js
    ├── demo
    │   ├── index.html
    │   ├── index.js
    │   └── utils.js
    ├── enums
    │   ├── common.js
    │   ├── events.js
    │   ├── messages.js
    │   └── segments.js
    ├── modules
    │   └── MsePlayer.external.js
    ├── utils
    │   ├── get-self-scope.js
    │   ├── logger.js
    │   └── mseUtils.js
    └── workers
    │   ├── retroview.worker.js
    │   ├── stats.worker.js
    │   └── ws.worker.js
├── webpack.config.dev.js
├── webpack.config.frontci.js
├── webpack.config.js
├── webpack.config.sentry.js
└── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env"]
 4 |   ],
 5 |   "plugins": [
 6 |     "transform-object-rest-spread",
 7 |     "add-module-exports",
 8 |     ["transform-es2015-classes", {"loose": true}],
 9 |   ]
10 | }
11 | 


--------------------------------------------------------------------------------
/.dockerignore:
--------------------------------------------------------------------------------
1 | /.git
2 | /node_modules
3 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | dist/
2 | public/


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   env: {
 3 |     browser: true,
 4 |     commonjs: true,
 5 |     es6: true,
 6 |   },
 7 |   globals: {
 8 |     _gaq: false,
 9 |     process: false,
10 |     ActiveXObject: false,
11 |     VERSION: false,
12 |     // Build globals
13 |     __dirname: false,
14 |     // Test globals
15 |     after: false,
16 |     afterEach: false,
17 |     assert: false,
18 |     before: false,
19 |     beforeEach: false,
20 |     describe: false,
21 |     expect: false,
22 |     it: false,
23 |     sinon: false,
24 |     xit: false,
25 |   },
26 |   extends: 'eslint:recommended',
27 |   parserOptions: {
28 |     ecmaVersion: 9,
29 |     sourceType: 'module',
30 |     ecmaFeatures: {
31 |       experimentalObjectRestSpread: true,
32 |       spread: true,
33 |       jsx: true,
34 |     },
35 |   },
36 |   rules: {
37 |     indent: ['error', 2, { SwitchCase: 1 }],
38 |     // 'linebreak-style': ['error', 'unix'],
39 |     quotes: ['error', 'single'],
40 |     semi: ['error', 'always'],
41 |     'object-curly-spacing': ['error', 'always'],
42 |     'no-var': 'error',
43 |     'no-console': 2,
44 |   },
45 | };
46 | 


--------------------------------------------------------------------------------
/.flowconfig:
--------------------------------------------------------------------------------
 1 | [ignore]
 2 | .*/dist/.*
 3 | 
 4 | [include]
 5 | src
 6 | 
 7 | [libs]
 8 | 
 9 | [lints]
10 | 
11 | [options]
12 | module.system.node.resolve_dirname=node_modules
13 | module.system.node.resolve_dirname=src
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | .DS_Store
 3 | .env
 4 | coverage
 5 | *.cache
 6 | npm-debug.log
 7 | /frontci
 8 | /demo
 9 | 
10 | # bump
11 | *.bkp
12 | 
13 | # Vim
14 | *~
15 | *.swp
16 | *.swo
17 | 
18 | # PhpStorm
19 | .idea
20 | 


--------------------------------------------------------------------------------
/.gitlab-ci.yml:
--------------------------------------------------------------------------------
  1 | stages:
  2 |   - prepare_environment
  3 |   - dependencies
  4 |   - build
  5 |   - deploy
  6 |   - distribution
  7 | 
  8 | prepare_environment:
  9 |   stage: prepare_environment
 10 |   script:
 11 |     - make -f deploy/Makefile BRANCH=$CI_COMMIT_REF_SLUG ci_prepare
 12 | 
 13 | dependencies:
 14 |   stage: dependencies
 15 |   script:
 16 |     - make -f deploy/Makefile BRANCH=$CI_COMMIT_REF_SLUG ci_dependencies
 17 |   dependencies:
 18 |     - prepare_environment
 19 | 
 20 | build_package:
 21 |   stage: build
 22 |   script:
 23 |     - make -f deploy/Makefile BRANCH=$CI_COMMIT_REF_SLUG ci_build_package
 24 |     - make -f deploy/Makefile BRANCH=$CI_COMMIT_REF_SLUG ci_extract_package
 25 |   artifacts:
 26 |     paths:
 27 |       - dist
 28 |     expire_in: 1 day
 29 |   dependencies:
 30 |     - dependencies
 31 | 
 32 | build_frontci:
 33 |   stage: build
 34 |   script:
 35 |     - make -f deploy/Makefile BRANCH=$CI_COMMIT_REF_SLUG ci_build_frontci
 36 |     - make -f deploy/Makefile BRANCH=$CI_COMMIT_REF_SLUG ci_extract_frontci
 37 |   artifacts:
 38 |     paths:
 39 |       - frontci
 40 |     expire_in: 1 day
 41 |   dependencies:
 42 |     - dependencies
 43 | 
 44 | deploy_review:
 45 |   stage: deploy
 46 |   dependencies:
 47 |     - build_frontci
 48 |   script:
 49 |     - make -f deploy/Makefile BRANCH=$CI_COMMIT_REF_SLUG FRONTCI_USER=$FRONTCI_USER FRONTCI_PASS=$FRONTCI_PASS ci_upload_frontci
 50 |     - make -f deploy/Makefile BRANCH=$CI_COMMIT_REF_SLUG SLACKURL=$SLACKURL ci_notify
 51 |   environment:
 52 |     name: review/$CI_COMMIT_REF_NAME
 53 |     url: https://front-ci.erlyvideo.ru/latest.html?p=$CI_PROJECT_NAME&r=$CI_COMMIT_REF_SLUG
 54 |   only:
 55 |     - branches
 56 |   except:
 57 |     - master
 58 | 
 59 | deploy_staging:
 60 |   stage: deploy
 61 |   dependencies:
 62 |     - build_frontci
 63 |   script:
 64 |     - make -f deploy/Makefile BRANCH=$CI_COMMIT_REF_SLUG FRONTCI_USER=$FRONTCI_USER FRONTCI_PASS=$FRONTCI_PASS ci_upload_frontci
 65 |     - make -f deploy/Makefile BRANCH=$CI_COMMIT_REF_SLUG SLACKURL=$SLACKURL ci_notify
 66 |   environment:
 67 |     name: staging
 68 |     url: https://front-ci.erlyvideo.ru/latest.html?p=$CI_PROJECT_NAME&r=$CI_COMMIT_REF_SLUG
 69 |   only:
 70 |     - master
 71 | 
 72 | publish_npm:
 73 |   stage: deploy
 74 |   script:
 75 |     - make -f deploy/Makefile BRANCH=$CI_COMMIT_REF_SLUG NPM_AUTH_TOKEN=$NPM_AUTH_TOKEN ci_publish_npm
 76 |   only:
 77 |     - master
 78 | 
 79 | deploy_live_player:
 80 |   stage: distribution
 81 |   script:
 82 |     - "VERSION=$(git describe --abbrev=7 --long | sed 's/^v//g')"
 83 |     - git clone https://gitlab-ci-token:${LIVE_PLAYER_REPO_KEY}@git.erlyvideo.ru/flussonic/live-player.git -b master --depth 3
 84 |     - cd live-player
 85 |     - git pull
 86 |     - jq '.peerDependencies."@flussonic\/flussonic-mse-player"="'${VERSION}'"' package.json > new.json
 87 |     - jq '.dependencies."@flussonic\/flussonic-mse-player"="'${VERSION}'"' new.json > package.json
 88 |     - git add package.json
 89 |     - 'git commit -m "update mse-player: ${VERSION} ${CI_COMMIT_MESSAGE}"'
 90 |     - git push
 91 |     - cd .. && rm -rf live-player/
 92 |   only:
 93 |     - master
 94 | 
 95 | deploy_dvr_player:
 96 |   stage: distribution
 97 |   script:
 98 |     - "VERSION=$(git describe --abbrev=7 --long | sed 's/^v//g')"
 99 |     - git clone https://gitlab-ci-token:${DVR_PLAYER_REPO_KEY}@git.erlyvideo.ru/flussonic/dvr-player.git -b master --depth 3
100 |     - cd dvr-player
101 |     - git pull
102 |     - jq '.peerDependencies."@flussonic\/flussonic-mse-player"="'${VERSION}'"' package.json > new.json
103 |     - jq '.dependencies."@flussonic\/flussonic-mse-player"="'${VERSION}'"' new.json > package.json
104 |     - git add package.json
105 |     - 'git commit -m "update mse-player: ${VERSION} ${CI_COMMIT_MESSAGE}"'
106 |     - git push
107 |     - cd .. && rm -rf dvr-player/
108 |   only:
109 |     - master
110 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .*
2 | /deploy
3 | /frontci
4 | /src
5 | messages.*
6 | gulpfile.*
7 | webpack.*


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "parser": "flow",
3 |   "singleQuote": true,
4 |   "trailingComma": "es5",
5 |   "bracketSpacing": true,
6 |   "printWidth": 120
7 | }
8 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // Use IntelliSense to learn about possible attributes.
 3 |   // Hover to view descriptions of existing attributes.
 4 |   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 5 |   "version": "0.2.0",
 6 |   "configurations": [
 7 |     {
 8 |       "type": "chrome",
 9 |       "request": "launch",
10 |       "name": "Launch Chrome against localhost",
11 |       "url": "http://localhost:8080",
12 |       "webRoot": "${workspaceFolder}"
13 |     }
14 |   ]
15 | }


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | 18.08
 2 | 
 3 | - incapsulation websocket, sourceBuffer logic to separate modules
 4 | - onStartStalling, onEndStalling, onSeeked callbacks methods
 5 | - FlussonicMsePlayer.version return current lib version
 6 | - onEOS callback invoked when recordings are ended
 7 | - 
 8 | 
 9 | 18.07.02
10 | 
11 | - MediaInfo include active streams information
12 | - add transform-object-rest-spread babel plugin
13 | - documentation: `opts:debug`, `opts:progressUpdateTime`, `MediaInfo`, `TrackId`,. Remove/mark as deprecated `opts:bufferMode`
14 | 
15 | 18.07
16 | 
17 | - Switching levels(tracks) without detaching MediaSource. Now lib once create 'video' sourcebuffer and 'audio' one. And when invoke setTracks method or receive MSE_INIT_SEGMENT just flush(remove) sourcebuffers and start append new data.
18 | 
19 | - Add `debug` param. If it `true` then enable logs to console
20 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Erlyvideo, LLC.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # flussonic-mse-player
  2 | 
  3 | flussonic-mse-player is a JavaScript library for playing video relies on flussonic backend, HTML5 video and MediaSource Extensions
  4 | 
  5 | 
  6 | ## Installation
  7 | 
  8 | ```
  9 | npm install --save @flussonic/flussonic-mse-player
 10 | ```
 11 | 
 12 | ## Usage
 13 | 
 14 | #### Webpack:
 15 | 
 16 | ```javascript
 17 | import FlussonicMsePlayer from '@flussonic/flussonic-mse-player'
 18 | ...
 19 | const player = new FlussonicMsePlayer(element, url, opts)
 20 | ```
 21 | 
 22 | [example](https://github.com/flussonic/mse-player/tree/master/examples/simple)
 23 | 
 24 | #### Script tag:
 25 | 
 26 | Since the library include via script tag it is accesible at `window.FlussonicMsePlayer`
 27 | 
 28 | ```html
 29 | <script type="text/javascript" src="../../dist/FlussonicMsePlayer.js"></script>
 30 | ```
 31 | 
 32 | ```javascript
 33 | var FlussonicMsePlayer = window.FlussonicMsePlayer
 34 | var player = new FlussonicMsePlayer(element, url, opts)
 35 | ```
 36 | 
 37 | [example](https://github.com/flussonic/mse-player/tree/master/examples/scripttag)
 38 | 
 39 | ### Static Methods:
 40 | 
 41 | - **isSupported()** - return `true` if browser is supported Media Source Extension
 42 | 
 43 | -  **replaceHttpByWS(url: string)** - return new url where replaced http(s):// by ws(s)://
 44 | 
 45 | ### Construction:
 46 | 
 47 | ```javascript
 48 | const player = new FlussonicMsePlayer(element, url, opts)
 49 | ```
 50 | 
 51 | `element` - <video> DOM element
 52 | 
 53 | `url` - url of a stream
 54 | 
 55 | `opts` is plain object it can include methods:
 56 | 
 57 |   - `debug?: boolean` - if `true` then enable logs in browser console. And export methods humanTime, humanDate to window.
 58 | 
 59 |   - `progressUpdateTime?: number` - time period for invoking `onProgress`.
 60 | 
 61 |   - `connectionRetries?: number` - number of reconnection retries if player can't start playback.
 62 | 
 63 |   - `wsReconnect?: boolean` - trying to restart websocket connection on error closing.
 64 | 
 65 |   - `preferHQ?: boolean` - if `true`, player will automatically select the highest available quality of the stream.
 66 | 
 67 |   - `retryMuted?: boolean` - if `true`, in some cases, due to "Browser Autoplay Policy Changes" it will try to restart playing process with initialy muted video element.
 68 | 
 69 |   - `maxBufferDelay?: number` - maxBufferDelay option for sourceBuffer
 70 | 
 71 |   - `onProgress(utc: number)` - triggered every 100ms(progressUpdateTime) while a stream is playing and gives current playback time
 72 | 
 73 |   - `onMediaInfo(info: MediaInfo)` - triggered when metadata of the stream is available. metadata include a common information of the stream such as width, height, information about mbr streams and so on. After this callback triggered you can use getVideoTracks()/getAudioTracks() methods.
 74 | 
 75 |   - `onDisconnect(status: object)` - triggered on websocket connection lost.
 76 | 
 77 |   - `onError(error: object)` - triggered on player errors.
 78 | 
 79 |   - `onEvent(event: object)` - triggered on player events.
 80 | 
 81 |   - `onMuted()` - triggered on player set muted.
 82 | 
 83 |   - `onPause()` - triggered on player set paused.
 84 | 
 85 |   - `onResume()` - triggered on player gets resumed from pause.
 86 | 
 87 |   - `onStats(stats: object)` - triggered on player stats change. Stats include a common ststistics of the stream: endTime, currentTime, videoBuffer, audioBuffer, timestamp, readyState, networkState.
 88 | 
 89 |   - `onSeeked()` - triggered when process of seeking is finished
 90 | 
 91 |   - `onStartStalling()` - triggered when playing is stalled
 92 |   - `onEndStalling()` - triggered when the video tag is progressed(start playing). `onStartStalling()/onEndStalling()` useful callback for implementation loading-spinner.
 93 | 
 94 |   - **•••DEPRECATED•••** `bufferMode: 'segments'|'sequence'` - [SourceBuffer Object Append Mode](https://www.w3.org/TR/media-source/#h-sourcebuffer). Default value is `'sequence'`.
 95 | 
 96 |   - `errorsBeforeStop: number` - Amount of errors will be happened before invoke the *stop()* method.
 97 | 
 98 | ### Methods:
 99 | 
100 | - **play(videoTrack?: Track, audioTrack?: Track) => Promise<any>** - start playing.
101 | 
102 |   Return a `Promise`. Resolved if HTMLMediaElement.play() resolved([HTMLMediaElement.play() Returns a Promise](https://developers.google.com/web/updates/2016/03/play-returns-promise)). Overwise rejected with error message.
103 | 
104 |   if you do autoplay="true" muted="false" video. The `play` will be rejected([Autoplay Policy Changes](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes))
105 | 
106 |   For resolve this behaviour you can mute the video before playing. Or you can process play's rejection and show play button.
107 | 
108 | - **pause()** - send `pause` command by websocket
109 | 
110 | - **stop()** - close websocket connection; detach mediaSource from given HTMLMediaElement; invoke the HTMLMediaElement stop method
111 | 
112 | - **restart()** - perform a full restart of playing process
113 | 
114 | - **autoTrackSelection(preferBest: boolean) => tracks: Array<TrackId>** - if `true` - returns array with the tracks of highest available quality. If `false` - returns array with the tracks of the lowest available quality.
115 | 
116 | - **seek(utc: number)** - send `seek` command by websocket
117 | 
118 | - **setTracks(tracks: Array<TrackId>)** -
119 | 
120 | ### Types:
121 | 
122 | ```flow
123 | type MediaInfo = {
124 |   height: number,
125 |   width: number,
126 |   streams: Array<StreamInfo>,
127 |   activeStreams: ActiveStreams,
128 | }
129 | 
130 | type StreamInfo = {
131 |   bitrate: number,
132 |   codec: string,
133 |   content: string,
134 |   fps: number,
135 |   height: number,
136 |   length_size: number,
137 |   level: string,
138 |   pixel_height: number,
139 |   pixel_width: number,
140 |   profile: "Baseline",
141 |   sar_height: number,
142 |   sar_width: number,
143 |   size: string,
144 |   track_id: TrackId,
145 |   width: number
146 | }
147 | 
148 | type ActiveStreams = {
149 |   video: TrackId,
150 |   audio: TrackId,
151 | }
152 | 
153 | type TrackId = 'a1'|'a2'|'a3'| ... 'aN'|'v1'|'v2'|'v3'| ... 'vN'
154 | 
155 | type UtcOrLive = number | 'live'
156 | 
157 | ```
158 | 
159 | ## TODO
160 | 
161 | 
162 | 
163 | ## CHANGELOG
164 | 


--------------------------------------------------------------------------------
/deploy/Dockerfile.dependencies:
--------------------------------------------------------------------------------
 1 | ARG BRANCH
 2 | FROM mse-player-prepare:${BRANCH}
 3 | 
 4 | WORKDIR /root
 5 | 
 6 | ADD src src
 7 | ADD .babelrc .
 8 | ADD .npmignore .
 9 | ADD package.json .
10 | ADD webpack.config.js .
11 | ADD webpack.config.frontci.js .
12 | ADD yarn.lock .
13 | ADD deploy deploy
14 | ADD package.json .
15 | ADD CHANGELOG.md .
16 | ADD README.md .
17 | ADD LICENSE .
18 | 
19 | RUN mkdir -p /root/.ssh && chown 0600 /root/.ssh && cp deploy/id_rsa /root/.ssh && chown 0400 /root/.ssh/id_rsa*
20 | RUN echo 'git.erlyvideo.ru ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQCbjUZh2ZZZTng8BdZP+aTjkfq1eUV8x9VKtx8Svtcg7oG16jAXMLklfMA0FNNzvVJfCN6PNi2s5eMY+yYXoJnDXJsCO5cWKi4lro4E6OlWrgP78nBVI1LGBdD7a09ygypcvQm842Uo0sp+6tbWoWaevye9qjmj0kzzMq5iGawEf3GSBjVA5tfIHWQrNMNLcWsUehnsSsbgsvWijzabhp/UEJif0vuADVfQNQdQYJs2FTtvAzOckLIreAAEeQuMBy450ZLppW/J4mFbfGcXKUUOsEuXw5EUpXv3DvlbRoppuKg5bCWGiIqDToXEdh0qy2wFdoNJBOtBYemBncAx8EbZ' >> /root/.ssh/known_hosts
21 | 
22 | RUN yarn install
23 | 


--------------------------------------------------------------------------------
/deploy/Dockerfile.frontci.build:
--------------------------------------------------------------------------------
1 | ARG BRANCH
2 | FROM mse-player-dependencies:${BRANCH}
3 | 
4 | WORKDIR /root
5 | RUN yarn build:frontci
6 | 


--------------------------------------------------------------------------------
/deploy/Dockerfile.package.build:
--------------------------------------------------------------------------------
1 | ARG BRANCH
2 | FROM mse-player-dependencies:${BRANCH}
3 | 
4 | WORKDIR /root
5 | RUN yarn build
6 | 


--------------------------------------------------------------------------------
/deploy/Dockerfile.prepare:
--------------------------------------------------------------------------------
1 | FROM ubuntu:16.04
2 | 
3 | RUN apt update && apt -y install curl
4 | RUN curl -sL https://deb.nodesource.com/setup_10.x | bash -
5 | RUN curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
6 | RUN echo "deb https://dl.yarnpkg.com/debian/ stable main" > /etc/apt/sources.list.d/yarn.list
7 | RUN apt update && apt -y install nodejs build-essential yarn git
8 | 
9 | 


--------------------------------------------------------------------------------
/deploy/Makefile:
--------------------------------------------------------------------------------
 1 | ifeq (,$(BRANCH))
 2 |   BRANCH=$(shell git rev-parse --abbrev-ref HEAD)
 3 | else
 4 |   BRANCH=master
 5 | endif
 6 | 
 7 | HTTP_BRANCH=$(shell echo ${BRANCH}| sed 's/\//-/')
 8 | 
 9 | ifeq (,$(VERSION))
10 |   VERSION=$(shell git describe --abbrev=7 --long | sed 's/^v//g')
11 | endif
12 | 
13 | ci_prepare:
14 | 	docker build -t mse-player-prepare:${HTTP_BRANCH} -f deploy/Dockerfile.prepare deploy
15 | 
16 | ci_dependencies:
17 | 	docker build -t mse-player-dependencies:${HTTP_BRANCH} --build-arg BRANCH=${HTTP_BRANCH} -f deploy/Dockerfile.dependencies .
18 | 
19 | ci_build_package:
20 | 	docker build -t mse-player-package:${HTTP_BRANCH} --build-arg BRANCH=${HTTP_BRANCH} -f deploy/Dockerfile.package.build .
21 | 
22 | ci_extract_package:
23 | 	rm -rf dist
24 | 	CONTAINER=$$(docker create mse-player-package:${HTTP_BRANCH}); \
25 | 	docker cp $${CONTAINER}:/root/dist . ;\
26 | 	docker rm -f $${CONTAINER}
27 | 
28 | ci_build_frontci:
29 | 	docker build -t mse-player-frontci:${HTTP_BRANCH} --build-arg BRANCH=${HTTP_BRANCH} -f deploy/Dockerfile.frontci.build .
30 | 
31 | ci_extract_frontci:
32 | 	rm -rf frontci
33 | 	CONTAINER=$$(docker create mse-player-frontci:${HTTP_BRANCH}); \
34 | 	docker cp $${CONTAINER}:/root/frontci . ;\
35 | 	docker rm -f $${CONTAINER}
36 | 
37 | ci_upload_frontci:
38 | 	for i in frontci/*; do \
39 | 	  curl -u ${FRONTCI_USER}:${FRONTCI_PASS} -T $${i} https://front-ci.erlyvideo.ru/dist/mse-player/${HTTP_BRANCH}/${VERSION}/`basename $${i}` || exit 1 ;\
40 | 	done
41 | 
42 | ci_notify:
43 | 	curl -X POST --data-urlencode \
44 | 	'payload={"channel": "#dev-frontend", "username": "CI", "text": "**mse-player '${BRANCH}' '${VERSION}'** \nhttps://front-ci.erlyvideo.ru/"}' "${SLACKURL}"
45 | 
46 | ci_publish_npm:
47 | 	docker run --rm -e "NPM_AUTH_TOKEN=$(NPM_AUTH_TOKEN)" mse-player-package:${HTTP_BRANCH} make -f deploy/Makefile npm_publish
48 | 
49 | npm_publish:
50 | 	echo "//registry.npmjs.org/:_authToken=${NPM_AUTH_TOKEN}" >> .npmrc
51 | 	npm publish
52 | 
53 | ci: ci_prepare ci_dependencies ci_build_package ci_extract_package ci_build_frontci ci_extract_frontci ci_upload_frontci ci_notify ci_publish_npm


--------------------------------------------------------------------------------
/deploy/id_rsa:
--------------------------------------------------------------------------------
 1 | -----BEGIN RSA PRIVATE KEY-----
 2 | MIIEpQIBAAKCAQEA4xpafg194lVh4qgzEI0OWA/DvYS9JLYxmDTZlk+Mc3PqmtDx
 3 | sBGwB9xr1jlCLw6stbB9c2vDIdw3A4RoXQitJYld2rMebEZFfU94yoGkjjnN+6fW
 4 | wznWEW6hycB1sXJGJ6nAU1UX8QSCLU/+BaciA1ddEDenFGx2i6n1ml3l4maY1sRg
 5 | iiXnJ0oiPkjm/x0ftYfEafuW+rbZePXTg0uQEDE+wvdqgeF470XOpeC2cKrvF56K
 6 | KqCFHHZxsMqC7Qk8PiKPpMLJtCz9xTTXegyX3YNm+3DVmI9OWKZ0Rl0RJkG/TpBl
 7 | ovFXU09KFR7OTUMWOMaLe2jBtYa/HuT8fkWDPwIDAQABAoIBAQCLyCK+x2seLlOL
 8 | gN+9ZjTX+wwN0G/i8slf19e9bsUSItzZ4ZWBO8HPdNpjBuc3s56WTkVJD6ERbEvo
 9 | PE1IRhjcq8o63FjzZ+VJlerRKi6w499m8A1+KFEcda3bUjyetal8rD0WjZ+o14+Q
10 | eFXwAMksqU88tiR+q6vjlv72vqjKShagtHU1t0nMbmWLyEmrtFw4GVb7nkfA6Y3B
11 | dLssFv+zl112lhZwq/OWX97VQx6eviiPkO8NxEaUhkYvUxMknvzv/ozE7HoIK257
12 | uN4kGZyJcE7+27n3Bg0JV4ccPHFia71IA63jloPpc7ZxYoKDj58tRAo8eFjEfS7q
13 | OXb6xhLhAoGBAP+f8vRWJxpmXEdCcrxsEjFpAhGGoks1kFNcHm5VvfO+aBjCVCyJ
14 | 5ptwPhD6x1eOozuCiJ07wmRZH6lBWzhgzwPHTIznMIvNBnnfV49UnEax3mxD17zT
15 | O8XmGaNGWZOoXYBCVDMa8kH4v0iobmtwEgsk0gTF4LGxCarpuNs52+QpAoGBAONv
16 | r/cSxnW1Y+KpZfQFYPZ4WmWfCodeILtTskPUMfUm+qF6U2xul1b59oJZFDFXnFnF
17 | LoHnRNxh0/EN/AnA00kCYh7/ds6FHXYONL+XbxGzORaYgkhdJOZDblaXu50UGmU6
18 | qLvSFNeKUKTf8h9gUckvLGPggWQaB0tFyOcyR9knAoGBAPWxuCRO9lCyl/lKDdu7
19 | CBWDt6A+xpkBR9JHlVw5f1Ta61T420zf0s4OKSnK0HUAvTYCtepiuOoYm4zkK5hZ
20 | vEAGfDZmM8v7aUEUgSVbjsWISp/G6YItiaMiEfxULt70kcIofqOMP9NXEgv1EASl
21 | +EHLxy0dQGWqIv+qm6nix85ZAoGBAM2xzWufx23dx6DPpC22T6OZ5efSlysmrmO9
22 | ppRB7YzS3An/IEQJIUbAe3oYJnMZ0YY/F3jVOSo4L/7rru8DPhPh2+w9D65oJeUH
23 | pB1DUGiptxAAjpPz6dN3WOtn/35pGBZFnyV/MupdZeI3yDsoWc+ionsSKPPntoEV
24 | dEXk66YxAoGAIWSqJqAJUnqeSHoaGjyM45QzBifnx3AfVRo598I0KZrlTfU3KDv0
25 | Ch0thwV2P2S98x9NYrIi3PCIAS0yOPc7AM9epAbrbGOh0tFn9ZkbCwpjGQh6YBy+
26 | 1za2AzO36BB9jSWYUMuuSVr/k4YVENOcfJocnRINixL5iTAeBM33CvI=
27 | -----END RSA PRIVATE KEY-----
28 | 


--------------------------------------------------------------------------------
/deploy/id_rsa.pub:
--------------------------------------------------------------------------------
1 | ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQDjGlp+DX3iVWHiqDMQjQ5YD8O9hL0ktjGYNNmWT4xzc+qa0PGwEbAH3GvWOUIvDqy1sH1za8Mh3DcDhGhdCK0liV3asx5sRkV9T3jKgaSOOc37p9bDOdYRbqHJwHWxckYnqcBTVRfxBIItT/4FpyIDV10QN6cUbHaLqfWaXeXiZpjWxGCKJecnSiI+SOb/HR+1h8Rp+5b6ttl49dODS5AQMT7C92qB4XjvRc6l4LZwqu8XnooqoIUcdnGwyoLtCTw+Io+kwsm0LP3FNNd6DJfdg2b7cNWYj05YpnRGXREmQb9OkGWi8VdTT0oVHs5NQxY4xot7aMG1hr8e5Px+RYM/ ci-runner@mse-player.frontend
2 | 


--------------------------------------------------------------------------------
/dist/retroview.worker.js:
--------------------------------------------------------------------------------
  1 | /******/ (function(modules) { // webpackBootstrap
  2 | /******/ 	// The module cache
  3 | /******/ 	var installedModules = {};
  4 | /******/
  5 | /******/ 	// The require function
  6 | /******/ 	function __webpack_require__(moduleId) {
  7 | /******/
  8 | /******/ 		// Check if module is in cache
  9 | /******/ 		if(installedModules[moduleId]) {
 10 | /******/ 			return installedModules[moduleId].exports;
 11 | /******/ 		}
 12 | /******/ 		// Create a new module (and put it into the cache)
 13 | /******/ 		var module = installedModules[moduleId] = {
 14 | /******/ 			i: moduleId,
 15 | /******/ 			l: false,
 16 | /******/ 			exports: {}
 17 | /******/ 		};
 18 | /******/
 19 | /******/ 		// Execute the module function
 20 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 21 | /******/
 22 | /******/ 		// Flag the module as loaded
 23 | /******/ 		module.l = true;
 24 | /******/
 25 | /******/ 		// Return the exports of the module
 26 | /******/ 		return module.exports;
 27 | /******/ 	}
 28 | /******/
 29 | /******/
 30 | /******/ 	// expose the modules object (__webpack_modules__)
 31 | /******/ 	__webpack_require__.m = modules;
 32 | /******/
 33 | /******/ 	// expose the module cache
 34 | /******/ 	__webpack_require__.c = installedModules;
 35 | /******/
 36 | /******/ 	// define getter function for harmony exports
 37 | /******/ 	__webpack_require__.d = function(exports, name, getter) {
 38 | /******/ 		if(!__webpack_require__.o(exports, name)) {
 39 | /******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
 40 | /******/ 		}
 41 | /******/ 	};
 42 | /******/
 43 | /******/ 	// define __esModule on exports
 44 | /******/ 	__webpack_require__.r = function(exports) {
 45 | /******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
 46 | /******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 47 | /******/ 		}
 48 | /******/ 		Object.defineProperty(exports, '__esModule', { value: true });
 49 | /******/ 	};
 50 | /******/
 51 | /******/ 	// create a fake namespace object
 52 | /******/ 	// mode & 1: value is a module id, require it
 53 | /******/ 	// mode & 2: merge all properties of value into the ns
 54 | /******/ 	// mode & 4: return value when already ns object
 55 | /******/ 	// mode & 8|1: behave like require
 56 | /******/ 	__webpack_require__.t = function(value, mode) {
 57 | /******/ 		if(mode & 1) value = __webpack_require__(value);
 58 | /******/ 		if(mode & 8) return value;
 59 | /******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
 60 | /******/ 		var ns = Object.create(null);
 61 | /******/ 		__webpack_require__.r(ns);
 62 | /******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
 63 | /******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
 64 | /******/ 		return ns;
 65 | /******/ 	};
 66 | /******/
 67 | /******/ 	// getDefaultExport function for compatibility with non-harmony modules
 68 | /******/ 	__webpack_require__.n = function(module) {
 69 | /******/ 		var getter = module && module.__esModule ?
 70 | /******/ 			function getDefault() { return module['default']; } :
 71 | /******/ 			function getModuleExports() { return module; };
 72 | /******/ 		__webpack_require__.d(getter, 'a', getter);
 73 | /******/ 		return getter;
 74 | /******/ 	};
 75 | /******/
 76 | /******/ 	// Object.prototype.hasOwnProperty.call
 77 | /******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
 78 | /******/
 79 | /******/ 	// __webpack_public_path__
 80 | /******/ 	__webpack_require__.p = "";
 81 | /******/
 82 | /******/
 83 | /******/ 	// Load entry module and return exports
 84 | /******/ 	return __webpack_require__(__webpack_require__.s = 0);
 85 | /******/ })
 86 | /************************************************************************/
 87 | /******/ ([
 88 | /* 0 */
 89 | /***/ (function(module, exports) {
 90 | 
 91 | (function () {
 92 |   let retroviewURL = null;
 93 |   let sendTime = 60000;
 94 |   let jsonTable = {};
 95 |   let sendingInterval = null;
 96 | 
 97 |   self.addEventListener(
 98 |     'message',
 99 |     function (e) {
100 |       let data = e.data;
101 |       //Get command parameter to identify operation
102 |       const { command, commandObj } = data;
103 |       switch (command) {
104 |         case 'start':
105 |           retroviewURL = commandObj;
106 |           start();
107 |           break;
108 |         case 'time':
109 |           correctSendTime(commandObj);
110 |           break;
111 |         case 'stop':
112 |           stop();
113 |           break;
114 |         case 'add':
115 |           addToTable(commandObj);
116 |           break;
117 |         default:
118 |           break;
119 |       }
120 |     },
121 |     false
122 |   );
123 | 
124 |   function correctSendTime(time) {
125 |     sendTime = time;
126 |   }
127 | 
128 |   function start() {
129 |     sendingInterval = this.setInterval(() => {
130 |       post();
131 |     }, sendTime);
132 |   }
133 | 
134 |   function stop() {
135 |     clearInterval(sendingInterval);
136 |     post();
137 |   }
138 | 
139 |   function addToTable(tData) {
140 |     const { key, data } = tData;
141 |     if (key in jsonTable) {
142 |       jsonTable = { ...jsonTable, [key]: { ...jsonTable[key], ...data } };
143 |     } else {
144 |       jsonTable = { ...jsonTable, ...tData };
145 |     }
146 |     if (data.event && data.event === 'play_stop') {
147 |       stop();
148 |     }
149 |   }
150 | 
151 |   function roughSizeOfObject(object) {
152 |     let objectList = [];
153 |     let stack = [object];
154 |     let bytes = 0;
155 | 
156 |     while (stack.length) {
157 |       let value = stack.pop();
158 | 
159 |       if (typeof value === 'boolean') {
160 |         bytes += 4;
161 |       } else if (typeof value === 'string') {
162 |         bytes += value.length * 2;
163 |       } else if (typeof value === 'number') {
164 |         bytes += 8;
165 |       } else if (
166 |         typeof value === 'object' &&
167 |         objectList.indexOf(value) === -1
168 |       ) {
169 |         objectList.push(value);
170 | 
171 |         for (let i in value) {
172 |           stack.push(value[i]);
173 |         }
174 |       }
175 |     }
176 |     return bytes;
177 |   }
178 | 
179 |   function post() {
180 |     console.log('post', {
181 |       jsonTable,
182 |       sendTime,
183 |       tableSize: roughSizeOfObject(jsonTable),
184 |     });
185 |   }
186 | })();
187 | 
188 | 
189 | /***/ })
190 | /******/ ]);


--------------------------------------------------------------------------------
/dist/stats.worker.js:
--------------------------------------------------------------------------------
  1 | /******/ (function(modules) { // webpackBootstrap
  2 | /******/ 	// The module cache
  3 | /******/ 	var installedModules = {};
  4 | /******/
  5 | /******/ 	// The require function
  6 | /******/ 	function __webpack_require__(moduleId) {
  7 | /******/
  8 | /******/ 		// Check if module is in cache
  9 | /******/ 		if(installedModules[moduleId]) {
 10 | /******/ 			return installedModules[moduleId].exports;
 11 | /******/ 		}
 12 | /******/ 		// Create a new module (and put it into the cache)
 13 | /******/ 		var module = installedModules[moduleId] = {
 14 | /******/ 			i: moduleId,
 15 | /******/ 			l: false,
 16 | /******/ 			exports: {}
 17 | /******/ 		};
 18 | /******/
 19 | /******/ 		// Execute the module function
 20 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 21 | /******/
 22 | /******/ 		// Flag the module as loaded
 23 | /******/ 		module.l = true;
 24 | /******/
 25 | /******/ 		// Return the exports of the module
 26 | /******/ 		return module.exports;
 27 | /******/ 	}
 28 | /******/
 29 | /******/
 30 | /******/ 	// expose the modules object (__webpack_modules__)
 31 | /******/ 	__webpack_require__.m = modules;
 32 | /******/
 33 | /******/ 	// expose the module cache
 34 | /******/ 	__webpack_require__.c = installedModules;
 35 | /******/
 36 | /******/ 	// define getter function for harmony exports
 37 | /******/ 	__webpack_require__.d = function(exports, name, getter) {
 38 | /******/ 		if(!__webpack_require__.o(exports, name)) {
 39 | /******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
 40 | /******/ 		}
 41 | /******/ 	};
 42 | /******/
 43 | /******/ 	// define __esModule on exports
 44 | /******/ 	__webpack_require__.r = function(exports) {
 45 | /******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
 46 | /******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 47 | /******/ 		}
 48 | /******/ 		Object.defineProperty(exports, '__esModule', { value: true });
 49 | /******/ 	};
 50 | /******/
 51 | /******/ 	// create a fake namespace object
 52 | /******/ 	// mode & 1: value is a module id, require it
 53 | /******/ 	// mode & 2: merge all properties of value into the ns
 54 | /******/ 	// mode & 4: return value when already ns object
 55 | /******/ 	// mode & 8|1: behave like require
 56 | /******/ 	__webpack_require__.t = function(value, mode) {
 57 | /******/ 		if(mode & 1) value = __webpack_require__(value);
 58 | /******/ 		if(mode & 8) return value;
 59 | /******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
 60 | /******/ 		var ns = Object.create(null);
 61 | /******/ 		__webpack_require__.r(ns);
 62 | /******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
 63 | /******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
 64 | /******/ 		return ns;
 65 | /******/ 	};
 66 | /******/
 67 | /******/ 	// getDefaultExport function for compatibility with non-harmony modules
 68 | /******/ 	__webpack_require__.n = function(module) {
 69 | /******/ 		var getter = module && module.__esModule ?
 70 | /******/ 			function getDefault() { return module['default']; } :
 71 | /******/ 			function getModuleExports() { return module; };
 72 | /******/ 		__webpack_require__.d(getter, 'a', getter);
 73 | /******/ 		return getter;
 74 | /******/ 	};
 75 | /******/
 76 | /******/ 	// Object.prototype.hasOwnProperty.call
 77 | /******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
 78 | /******/
 79 | /******/ 	// __webpack_public_path__
 80 | /******/ 	__webpack_require__.p = "";
 81 | /******/
 82 | /******/
 83 | /******/ 	// Load entry module and return exports
 84 | /******/ 	return __webpack_require__(__webpack_require__.s = 0);
 85 | /******/ })
 86 | /************************************************************************/
 87 | /******/ ([
 88 | /* 0 */
 89 | /***/ (function(module, exports) {
 90 | 
 91 | (function () {
 92 |   let statsURL = null;
 93 |   let sendTime = 60000;
 94 |   let jsonTable = {};
 95 |   let sendingInterval = null;
 96 | 
 97 |   self.addEventListener(
 98 |     'message',
 99 |     function (e) {
100 |       let data = e.data;
101 |       //Get command parameter to identify operation
102 |       const { command, commandObj } = data;
103 |       switch (command) {
104 |         case 'start':
105 |           statsURL = commandObj
106 |             .replace(/ws:/, 'http:')
107 |             .replace(/wss:/, 'https:')
108 |             .replace(/mse_ld/, 'sessions');
109 |           start();
110 |           break;
111 |         case 'time':
112 |           correctSendTime(commandObj);
113 |           break;
114 |         case 'stop':
115 |           stop();
116 |           break;
117 |         case 'add':
118 |           addToTable(commandObj);
119 |           break;
120 |         default:
121 |           break;
122 |       }
123 |     },
124 |     false
125 |   );
126 | 
127 |   function correctSendTime(time) {
128 |     sendTime = time;
129 |   }
130 | 
131 |   function start() {
132 |     sendingInterval = this.setInterval(() => {
133 |       post();
134 |     }, sendTime);
135 |   }
136 | 
137 |   function stop() {
138 |     post();
139 |     clearInterval(sendingInterval);
140 |   }
141 | 
142 |   function addToTable(data) {
143 |     jsonTable = { ...jsonTable, ...data };
144 | 
145 |     if (data.event && data.event === 'play_stop') {
146 |       stop();
147 |     }
148 |   }
149 | 
150 |   // function roughSizeOfObject(object) {
151 |   //   let objectList = [];
152 |   //   let stack = [object];
153 |   //   let bytes = 0;
154 | 
155 |   //   while (stack.length) {
156 |   //     let value = stack.pop();
157 | 
158 |   //     if (typeof value === 'boolean') {
159 |   //       bytes += 4;
160 |   //     } else if (typeof value === 'string') {
161 |   //       bytes += value.length * 2;
162 |   //     } else if (typeof value === 'number') {
163 |   //       bytes += 8;
164 |   //     } else if (typeof value === 'object' && objectList.indexOf(value) === -1) {
165 |   //       objectList.push(value);
166 | 
167 |   //       for (let i in value) {
168 |   //         stack.push(value[i]);
169 |   //       }
170 |   //     }
171 |   //   }
172 |   //   return bytes;
173 |   // }
174 | 
175 |   function post() {
176 |     if (!jsonTable.started_at) {
177 |       return;
178 |     }
179 | 
180 |     const { source_id } = jsonTable;
181 |     const newUrl = statsURL.replace(/sessions/, `sessions/${source_id ? `${source_id}` : ''}`);
182 |     fetch(newUrl, {
183 |       headers: {
184 |         Accept: 'application/json',
185 |         'Content-Type': 'application/json',
186 |       },
187 |       method: 'PUT',
188 |       body: JSON.stringify(jsonTable),
189 |     });
190 |   }
191 | })();
192 | 
193 | 
194 | /***/ })
195 | /******/ ]);


--------------------------------------------------------------------------------
/dist/ws.worker.js:
--------------------------------------------------------------------------------
  1 | /******/ (function(modules) { // webpackBootstrap
  2 | /******/ 	// The module cache
  3 | /******/ 	var installedModules = {};
  4 | /******/
  5 | /******/ 	// The require function
  6 | /******/ 	function __webpack_require__(moduleId) {
  7 | /******/
  8 | /******/ 		// Check if module is in cache
  9 | /******/ 		if(installedModules[moduleId]) {
 10 | /******/ 			return installedModules[moduleId].exports;
 11 | /******/ 		}
 12 | /******/ 		// Create a new module (and put it into the cache)
 13 | /******/ 		var module = installedModules[moduleId] = {
 14 | /******/ 			i: moduleId,
 15 | /******/ 			l: false,
 16 | /******/ 			exports: {}
 17 | /******/ 		};
 18 | /******/
 19 | /******/ 		// Execute the module function
 20 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 21 | /******/
 22 | /******/ 		// Flag the module as loaded
 23 | /******/ 		module.l = true;
 24 | /******/
 25 | /******/ 		// Return the exports of the module
 26 | /******/ 		return module.exports;
 27 | /******/ 	}
 28 | /******/
 29 | /******/
 30 | /******/ 	// expose the modules object (__webpack_modules__)
 31 | /******/ 	__webpack_require__.m = modules;
 32 | /******/
 33 | /******/ 	// expose the module cache
 34 | /******/ 	__webpack_require__.c = installedModules;
 35 | /******/
 36 | /******/ 	// define getter function for harmony exports
 37 | /******/ 	__webpack_require__.d = function(exports, name, getter) {
 38 | /******/ 		if(!__webpack_require__.o(exports, name)) {
 39 | /******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
 40 | /******/ 		}
 41 | /******/ 	};
 42 | /******/
 43 | /******/ 	// define __esModule on exports
 44 | /******/ 	__webpack_require__.r = function(exports) {
 45 | /******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
 46 | /******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 47 | /******/ 		}
 48 | /******/ 		Object.defineProperty(exports, '__esModule', { value: true });
 49 | /******/ 	};
 50 | /******/
 51 | /******/ 	// create a fake namespace object
 52 | /******/ 	// mode & 1: value is a module id, require it
 53 | /******/ 	// mode & 2: merge all properties of value into the ns
 54 | /******/ 	// mode & 4: return value when already ns object
 55 | /******/ 	// mode & 8|1: behave like require
 56 | /******/ 	__webpack_require__.t = function(value, mode) {
 57 | /******/ 		if(mode & 1) value = __webpack_require__(value);
 58 | /******/ 		if(mode & 8) return value;
 59 | /******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
 60 | /******/ 		var ns = Object.create(null);
 61 | /******/ 		__webpack_require__.r(ns);
 62 | /******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
 63 | /******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
 64 | /******/ 		return ns;
 65 | /******/ 	};
 66 | /******/
 67 | /******/ 	// getDefaultExport function for compatibility with non-harmony modules
 68 | /******/ 	__webpack_require__.n = function(module) {
 69 | /******/ 		var getter = module && module.__esModule ?
 70 | /******/ 			function getDefault() { return module['default']; } :
 71 | /******/ 			function getModuleExports() { return module; };
 72 | /******/ 		__webpack_require__.d(getter, 'a', getter);
 73 | /******/ 		return getter;
 74 | /******/ 	};
 75 | /******/
 76 | /******/ 	// Object.prototype.hasOwnProperty.call
 77 | /******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
 78 | /******/
 79 | /******/ 	// __webpack_public_path__
 80 | /******/ 	__webpack_require__.p = "";
 81 | /******/
 82 | /******/
 83 | /******/ 	// Load entry module and return exports
 84 | /******/ 	return __webpack_require__(__webpack_require__.s = 0);
 85 | /******/ })
 86 | /************************************************************************/
 87 | /******/ ([
 88 | /* 0 */
 89 | /***/ (function(module, exports) {
 90 | 
 91 | (function () {
 92 |   //Define WebSocket and protocol variables
 93 |   let websocket = null;
 94 |   let mustStop = false;
 95 | 
 96 |   //Define based object response to WebSocketController
 97 |   // let onMessage_response = {
 98 |   //   command: 'incomingMsg',
 99 |   //   msg: null,
100 |   // }
101 | 
102 |   //Receive message from WebSocketController
103 |   self.addEventListener(
104 |     'message',
105 |     function (e) {
106 |       let data = e.data;
107 |       //Get command parameter to identify operation
108 |       let command = data.command;
109 | 
110 |       if (command === 'start') {
111 |         start(data.commandObj); //Establish WebSocket connection
112 |         // } else if (command === 'logout') {
113 |         //   sendOMMmessage(data.commandObj)
114 |         //   disconnect() //Terminate WebSocket connection
115 |       } else if (command === 'disconnect') {
116 |         disconnect();
117 |       } else if (command === 'send') {
118 |         sendOMMmessage(data.commandObj);
119 |       }
120 |     },
121 |     false
122 |   );
123 | 
124 |   /* -----------------  Application events functions  ----------------- */
125 | 
126 |   //Establish WebSocket connection
127 |   function start(wsURL) {
128 |     websocket = new WebSocket(wsURL);
129 |     websocket.binaryType = 'arraybuffer';
130 |     websocket.onopen = onOpen;
131 |     websocket.onmessage = onMessage;
132 |     websocket.onerror = onError;
133 |     websocket.onclose = onClose;
134 |   }
135 | 
136 |   function disconnect() {
137 |     if (websocket) {
138 |       websocket.close();
139 |     }
140 |     mustStop = true;
141 |     const disconnect_response = {
142 |       command: 'disconnect',
143 |       msg: 'Disconnected',
144 |     };
145 |     self.postMessage(disconnect_response);
146 |   }
147 | 
148 |   //Send message to ADS WebSocket
149 |   function sendOMMmessage(commandObj) {
150 |     websocket.send(commandObj);
151 |   }
152 | 
153 |   /* -----------------  WS events  ----------------- */
154 | 
155 |   //Establish WebSocket connection success
156 |   function onOpen() {
157 |     const onOpen_response = {
158 |       command: 'connect',
159 |       msg: 'Connected',
160 |     };
161 |     self.postMessage(onOpen_response);
162 |   }
163 | 
164 |   //Receives incoming message from WebSocket
165 |   function onMessage(event) {
166 |     const rawData = event.data;
167 |     const isDataAB = rawData instanceof ArrayBuffer;
168 |     const parsedData = !isDataAB ? JSON.parse(rawData) : void 0;
169 |     self.postMessage({ rawData, parsedData, isDataAB });
170 |   }
171 | 
172 |   function onError(event) {
173 |     const onError_response = {
174 |       command: 'error',
175 |       msg: JSON.stringify(event),
176 |     };
177 |     self.postMessage(onError_response);
178 |   }
179 | 
180 |   function onClose(e) {
181 |     if (mustStop) {
182 |       return;
183 |     }
184 |     const { code, reason } = e;
185 |     const onClose_response = {
186 |       command: 'close',
187 |       data: { code, reason },
188 |     };
189 |     self.postMessage(onClose_response);
190 |   }
191 | })();
192 | 
193 | 
194 | /***/ })
195 | /******/ ]);


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | const gulp = require('gulp');
 4 | 
 5 | const mseDepsList = [
 6 |   'dist/FlussonicMsePlayer.js'
 7 | ];
 8 | 
 9 | const mseDepsOutput = '../flussonic/wwwroot/flu/reactapp/lib/';
10 | 
11 | gulp.task('cp:flu', function() {
12 |   return gulp.src(mseDepsList)
13 |     .pipe(gulp.dest(mseDepsOutput));
14 | });
15 | 
16 | const webrtcOutput = '../flussonic/apps/demo/web-swift-publish/www/';
17 | 
18 | gulp.task('cp:webrtc', function() {
19 |   return gulp.src(mseDepsList)
20 |     .pipe(gulp.dest(webrtcOutput));
21 | });
22 | 
23 | const exampleSimpleOutput = 'examples/simple/public/';
24 | 
25 | gulp.task('cp:example:simple', function() {
26 |   return gulp.src(mseDepsList)
27 |     .pipe(gulp.dest(exampleSimpleOutput));
28 | });
29 | 
30 | gulp.task('cp',
31 |   gulp.parallel('cp:flu', 'cp:webrtc', 'cp:example:simple'))
32 | 
33 | gulp.watch('dist/**/*', gulp.series('cp'))
34 | 


--------------------------------------------------------------------------------
/messages.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flussonic/mse-player/7edf3e73e7daecbf69cb9b506eb007583f878102/messages.md


--------------------------------------------------------------------------------
/messages.ru.md:
--------------------------------------------------------------------------------
 1 | порядок сообщений с сервера после play
 2 | 
 3 | открытие соединение с вебсокетом:
 4 | `mse-init-segment`
 5 | нужно послать send('resume')
 6 | `event:resumed`
 7 | `ArrayBuffer`
 8 | ...
 9 | `ArrayBuffer`
10 | 
11 | seek:
12 | `mb old frames:ArrayBuffer`
13 | `event:seeked`
14 | `ArrayBuffer`
15 | ...
16 | `ArrayBuffer`
17 | 
18 | seek live:
19 | `mb old frames:ArrayBuffer`
20 | `event:switched_to_live`
21 | `ArrayBuffer`
22 | ...
23 | `ArrayBuffer`
24 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@flussonic/flussonic-mse-player",
 3 |   "version": "22.7.1",
 4 |   "description": "Media Source Extension support for Flussonic.",
 5 |   "main": "./dist/FlussonicMsePlayer.js",
 6 |   "unpkg": "./dist/FlussonicMsePlayer.min.js",
 7 |   "keywords": [
 8 |     "flussonic"
 9 |   ],
10 |   "homepage": "https://github.com/flussonic/mse-player",
11 |   "scripts": {
12 |     "test": "echo \"Error: no test specified\" && exit 1",
13 |     "build": "webpack --mode production --no-optional",
14 |     "build:sentry": "webpack --config webpack.config.sentry.js --mode production",
15 |     "build:frontci": "webpack --config webpack.config.frontci.js --mode production",
16 |     "start": "webpack-dev-server --env.development --mode development --config webpack.config.dev.js",
17 |     "size": "webpack --json | webpack-bundle-size-analyzer"
18 |   },
19 |   "repository": {
20 |     "type": "git",
21 |     "url": "git@github.com/flussonic/mse-player.git"
22 |   },
23 |   "author": "https://erlyvideo.ru/",
24 |   "bugs": {
25 |     "url": "https://github.com/flussonic/mse-player/issues"
26 |   },
27 |   "license": "ISC",
28 |   "devDependencies": {
29 |     "babel-core": "^6.26.0",
30 |     "babel-loader": "^7.1.2",
31 |     "babel-plugin-add-module-exports": "^0.2.1",
32 |     "babel-plugin-transform-es2015-classes": "^6.24.1",
33 |     "babel-plugin-transform-object-rest-spread": "^6.26.0",
34 |     "babel-preset-env": "^1.6.0",
35 |     "clean-webpack-plugin": "^4.0.0",
36 |     "directory-named-webpack-plugin": "^4.0.0",
37 |     "eslint": "7.2.0",
38 |     "eslint-config-airbnb": "18.2.1",
39 |     "eslint-plugin-import": "2.22.1",
40 |     "eslint-plugin-jsx-a11y": "6.4.1",
41 |     "eslint-plugin-react": "7.21.5",
42 |     "eslint-plugin-react-hooks": "1.7.0",
43 |     "gulp": "~4.0.0",
44 |     "html-loader": "^0.5.5",
45 |     "html-webpack-plugin": "^3.2.0",
46 |     "jest": "^23.5.0",
47 |     "uglifyjs-webpack-plugin": "^2.1.1",
48 |     "webpack": "^4.0.0",
49 |     "webpack-bundle-size-analyzer": "^3.1.0",
50 |     "webpack-cli": "^3.3.11",
51 |     "webpack-dev-server": "^3.10.3",
52 |     "worker-loader": "^3.0.8"
53 |   },
54 |   "optionalDependencies": {
55 |     "@sentry/browser": "^6.2.2",
56 |     "@sentry/tracing": "^6.2.2"
57 |   },
58 |   "dependencies": {
59 |     "parseurl": "~1.3.2"
60 |   }
61 | }
62 | 


--------------------------------------------------------------------------------
/src/FlussonicMsePlayer.js:
--------------------------------------------------------------------------------
1 | import FlussonicMsePlayer from './modules/MsePlayer.external';
2 | 
3 | export default FlussonicMsePlayer;
4 | 


--------------------------------------------------------------------------------
/src/FlussonicMsePlayer.test.js:
--------------------------------------------------------------------------------
 1 | import MSEPlayer from './FlussonicMsePlayer';
 2 | 
 3 | const rawUrl = 'http://localhost:8080/clock/mse_ld';
 4 | 
 5 | test('1. constructor return MSEPlayer instance', () => {
 6 |   const url = MSEPlayer.replaceHttpByWS(rawUrl);
 7 |   const mse = new MSEPlayer(null, url, { debug: true });
 8 | 
 9 |   expect(mse instanceof MSEPlayer).toBe(true);
10 |   expect(mse.url === url).toBe(true);
11 | });
12 | 
13 | test('2. reject processing play() if this.playing flag is true', () => {
14 |   const url = MSEPlayer.replaceHttpByWS(rawUrl);
15 |   const mse = new MSEPlayer(null, url, { debug: true });
16 |   mse.playing = true;
17 |   mse.play().then((data) => {
18 |     return expect(data).toEqual({ message: '[mse-player] _play: terminate because already has been playing' });
19 |   });
20 | });
21 | 


--------------------------------------------------------------------------------
/src/controllers/buffers.js:
--------------------------------------------------------------------------------
  1 | import { doArrayBuffer, base64ToArrayBuffer, /* RawDataToUint8Array,*/ getTrackId } from '../utils/mseUtils';
  2 | import { logger } from '../utils/logger';
  3 | 
  4 | import { AUDIO, VIDEO } from '../enums/common';
  5 | import { BUFFER_UPDATE_END } from '../enums/events';
  6 | 
  7 | const BUFFER_MODE_SEQUENCE = 'segments'; // segments
  8 | // const BUFFER_MODE_SEQUENCE = 'sequence'; // segments
  9 | 
 10 | export default class BuffersController {
 11 |   constructor(opts = {}) {
 12 |     logger.log('create BuffersController');
 13 |     this.media = opts.media;
 14 |     this.init(opts);
 15 | 
 16 |     this.doArrayBuffer = doArrayBuffer.bind(this);
 17 |     this.maybeAppend = this.maybeAppend.bind(this);
 18 |     this.onSBUpdateEnd = this.onSBUpdateEnd.bind(this);
 19 |     this.onAudioSBUpdateEnd = this.onAudioSBUpdateEnd.bind(this);
 20 |   }
 21 | 
 22 |   init(opts = {}) {
 23 |     this.flushRange = [];
 24 |     this.appended = 0;
 25 |     this.mediaSource = opts.mediaSource;
 26 |     // this.segments = []
 27 |     this.segmentsVideo = [];
 28 |     this.segmentsAudio = [];
 29 |     this.sourceBuffer = {};
 30 |     // this.audioBufferSize = 0;
 31 |     // this.videoBufferSize = 0;
 32 |     this.totalBytesCollected = 0;
 33 |   }
 34 | 
 35 |   setMediaSource(ms) {
 36 |     this.mediaSource = ms;
 37 |   }
 38 | 
 39 |   createSourceBuffers(data) {
 40 |     const sb = this.sourceBuffer;
 41 |     data.tracks.forEach((s) => {
 42 |       const isVideo = s.content === VIDEO;
 43 |       let mimeType = isVideo ? 'video/mp4; codecs="avc1.4d401f"' : 'audio/mp4; codecs="mp4a.40.2"';
 44 |       if (s.mime_type) {
 45 |         mimeType = s.mime_type;
 46 |       }
 47 | 
 48 |       sb[s.content] = this.mediaSource.addSourceBuffer(mimeType);
 49 |       sb[s.content].mode = BUFFER_MODE_SEQUENCE;
 50 |       // sb[s.content].timestampOffset = 0.25;
 51 |       const buffer = sb[s.content];
 52 |       if (isVideo) {
 53 |         buffer.addEventListener(BUFFER_UPDATE_END, this.onSBUpdateEnd);
 54 |       } else {
 55 |         buffer.addEventListener(BUFFER_UPDATE_END, this.onAudioSBUpdateEnd);
 56 |       }
 57 |     });
 58 |   }
 59 | 
 60 |   onSBUpdateEnd() {
 61 |     // if (this._needsFlush) {
 62 |     //   logger.log('flushing buffer');
 63 |     //   this.doFlush();
 64 |     // }
 65 | 
 66 |     if (this._needsEos) {
 67 |       this.checkEos();
 68 |     }
 69 | 
 70 |     if (!this._needsFlush && this.segmentsVideo.length) {
 71 |       const buffer = this.sourceBuffer.video;
 72 |       if (buffer) {
 73 |         if (buffer.updating) {
 74 |           return;
 75 |         }
 76 |         const segment = this.segmentsVideo[0];
 77 |         buffer.appendBuffer(segment.data);
 78 |         this.segmentsVideo.shift();
 79 |         this.videoBufferSize = this.videoBufferSize - segment.data.byteLength;
 80 |         this.appended++;
 81 |       }
 82 |     }
 83 |   }
 84 | 
 85 |   onAudioSBUpdateEnd() {
 86 |     // if (this._needsFlush) {
 87 |     //   logger.log('flushing buffer');
 88 |     //   this.doFlush();
 89 |     // }
 90 | 
 91 |     if (this._needsEos) {
 92 |       this.checkEos();
 93 |     }
 94 | 
 95 |     if (!this._needsFlush && this.segmentsAudio.length) {
 96 |       const buffer = this.sourceBuffer.audio;
 97 |       if (buffer) {
 98 |         if (buffer.updating) {
 99 |           return;
100 |         }
101 |         const segment = this.segmentsAudio[0];
102 |         buffer.appendBuffer(segment.data);
103 |         this.segmentsAudio.shift();
104 |         // this.audioBufferSize = this.audioBufferSize - segment.data.byteLength;
105 |         this.appended++;
106 |       }
107 |     }
108 |   }
109 | 
110 |   createTracks(tracks) {
111 |     tracks.forEach((track) => {
112 |       const view = base64ToArrayBuffer(track.payload);
113 |       const segment = {
114 |         type: this.getTypeBytrackId(track.id),
115 |         isInit: true,
116 |         data: view,
117 |       };
118 |       this.maybeAppend(segment);
119 |     });
120 |   }
121 | 
122 |   maybeAppend(segment) {
123 |     if (this._needsFlush) {
124 |       // this.segments.unshift(segment)
125 |       return;
126 |     }
127 |     if (!this.media || this.media.error) {
128 |       if (segment.type === 'audio') {
129 |         this.segmentsAudio = [];
130 |       } else {
131 |         this.segmentsVideo = [];
132 |       }
133 |       logger.error('trying to append although a media error occured, flush segment and abort');
134 |       this.media.error && logger.error('Error code:', this.media.error);
135 |       return;
136 |     }
137 |     const buffer = this.sourceBuffer[segment.type];
138 |     if (buffer) {
139 |       if (buffer.updating) {
140 |         // this.segments.unshift(segment)
141 |         return;
142 |       }
143 | 
144 |       buffer.appendBuffer(segment.data);
145 |       if (segment.type === 'audio') {
146 |         this.segmentsAudio.shift();
147 |       } else {
148 |         this.segmentsVideo.shift();
149 |       }
150 |       this.appended++;
151 |     }
152 |   }
153 | 
154 |   setTracksByType(data) {
155 |     const type = data.tracks ? 'tracks' : 'streams';
156 |     if (data[type].length === 1) {
157 |       this.audioTrackId = null;
158 |     }
159 |     data[type].forEach((s, index) => {
160 |       this[s.content === VIDEO ? 'videoTrackId' : 'audioTrackId'] = { index, id: s.id };
161 |     });
162 |   }
163 | 
164 |   getTypeBytrackId(id) {
165 |     if (!this.audioTrackId) {
166 |       return VIDEO;
167 |     }
168 |     return this.audioTrackId.id === id ? AUDIO : VIDEO;
169 |   }
170 | 
171 |   procArrayBuffer(rawData) {
172 |     const segment = this.rawDataToSegmnet(rawData);
173 |     if (segment.type === 'audio') {
174 |       this.segmentsAudio.push(segment);
175 |       // this.audioBufferSize = this.audioBufferSize + segment.data.byteLength;
176 |     } else {
177 |       this.segmentsVideo.push(segment);
178 |       // this.videoBufferSize = this.videoBufferSize + segment.data.byteLength;
179 |     }
180 |     this.totalBytesCollected = this.totalBytesCollected + segment.data.byteLength;
181 | 
182 |     this.doArrayBuffer(segment);
183 |     if (this.sourceBuffer) {
184 |       if (this.sourceBuffer.video && !this.sourceBuffer.video.updating) {
185 |         this.onSBUpdateEnd();
186 |       }
187 |       if (this.audioTrackId) {
188 |         if (this.sourceBuffer.audio && !this.sourceBuffer.audio.updating) {
189 |           this.onAudioSBUpdateEnd();
190 |         }
191 |       }
192 |     }
193 |   }
194 | 
195 |   seek() {
196 |     for (let k in this.sourceBuffer) {
197 |       this.sourceBuffer[k].abort();
198 |       this.sourceBuffer[k].mode = BUFFER_MODE_SEQUENCE;
199 |       // this.sourceBuffer[k].timestampOffset = this.sourceBuffer[k].timestampOffset - 0.2;
200 |     }
201 | 
202 |     // this.videoBufferSize = 0
203 |     // this.audioBufferSize = 0
204 |     // this.segmentsVideo = []
205 |     // this.segmentsAudio = []
206 |   }
207 | 
208 |   isBuffered() {
209 |     let appended = 0;
210 |     let sourceBuffer = this.sourceBuffer;
211 |     for (let type in sourceBuffer) {
212 |       appended += sourceBuffer[type].buffered.length;
213 |     }
214 |     return appended > 0;
215 |   }
216 | 
217 |   doFlush() {
218 |     // loop through all buffer ranges to flush
219 |     while (this.flushRange.length) {
220 |       let range = this.flushRange[0];
221 |       // flushBuffer will abort any buffer append in progress and flush Audio/Video Buffer
222 |       if (this.flushBuffer(range.start, range.end, range.type)) {
223 |         // range flushed, remove from flush array
224 |         this.flushRange.shift();
225 |         this.flushBufferCounter = 0;
226 |       } else {
227 |         this._needsFlush = true;
228 |         // avoid looping, wait for SB update end to retrigger a flush
229 |         return;
230 |       }
231 |     }
232 |     if (this.flushRange.length === 0) {
233 |       // everything flushed
234 |       this._needsFlush = false;
235 | 
236 |       // let's recompute this.appended, which is used to avoid flush looping
237 |       let appended = 0;
238 |       let sourceBuffer = this.sourceBuffer;
239 |       try {
240 |         for (let type in sourceBuffer) {
241 |           appended += sourceBuffer[type].buffered.length;
242 |         }
243 |       } catch (error) {
244 |         // error could be thrown while accessing buffered, in case sourcebuffer has already been removed from MediaSource
245 |         // this is harmess at this stage, catch this to avoid reporting an internal exception
246 |         logger.error('error while accessing sourceBuffer.buffered');
247 |       }
248 |       this.appended = appended;
249 |       this._setTracksFlag = false;
250 |     }
251 |   }
252 | 
253 |   // /*
254 |   //   flush specified buffered range,
255 |   //   return true once range has been flushed.
256 |   //   as sourceBuffer.remove() is asynchronous, flushBuffer will be retriggered on sourceBuffer update end
257 |   // */
258 |   flushBuffer(startOffset, endOffset, typeIn) {
259 |     let sb,
260 |       i,
261 |       bufStart,
262 |       bufEnd,
263 |       flushStart,
264 |       flushEnd,
265 |       sourceBuffer = this.sourceBuffer;
266 |     if (Object.keys(sourceBuffer).length) {
267 |       logger.log(`flushBuffer,pos/start/end: ${this.media.currentTime.toFixed(3)}/${startOffset}/${endOffset}`);
268 |       // safeguard to avoid infinite looping : don't try to flush more than the nb of appended segments
269 |       if (this.flushBufferCounter < this.appended) {
270 |         for (let type in sourceBuffer) {
271 |           // check if sourcebuffer type is defined (typeIn): if yes, let's only flush this one
272 |           // if no, let's flush all sourcebuffers
273 |           if (typeIn && type !== typeIn) {
274 |             continue;
275 |           }
276 | 
277 |           sb = sourceBuffer[type];
278 |           // we are going to flush buffer, mark source buffer as 'not ended'
279 |           sb.ended = false;
280 |           if (!sb.updating) {
281 |             try {
282 |               for (i = 0; i < sb.buffered.length; i++) {
283 |                 bufStart = sb.buffered.start(i);
284 |                 bufEnd = sb.buffered.end(i);
285 |                 // workaround firefox not able to properly flush multiple buffered range.
286 |                 if (
287 |                   navigator.userAgent.toLowerCase().indexOf('firefox') !== -1 &&
288 |                   endOffset === Number.POSITIVE_INFINITY
289 |                 ) {
290 |                   flushStart = startOffset;
291 |                   flushEnd = endOffset;
292 |                 } else {
293 |                   flushStart = Math.max(bufStart, startOffset);
294 |                   flushEnd = Math.min(bufEnd, endOffset);
295 |                 }
296 |                 /* sometimes sourcebuffer.remove() does not flush
297 |                    the exact expected time range.
298 |                    to avoid rounding issues/infinite loop,
299 |                    only flush buffer range of length greater than 500ms.
300 |                 */
301 |                 if (Math.min(flushEnd, bufEnd) - flushStart > 0.5) {
302 |                   this.flushBufferCounter++;
303 |                   logger.log(
304 |                     `flush ${type} [${flushStart},${flushEnd}], of [${bufStart},${bufEnd}], pos:${this.media.currentTime}`
305 |                   );
306 |                   sb.remove(flushStart, flushEnd);
307 |                   return false;
308 |                 }
309 |               }
310 |             } catch (e) {
311 |               logger.warn('exception while accessing sourcebuffer, it might have been removed from MediaSource');
312 |             }
313 |           } else {
314 |             // logger.log('abort ' + type + ' append in progress');
315 |             // this will abort any appending in progress
316 |             // sb.abort();
317 |             logger.warn('cannot flush, sb updating in progress');
318 |             return false;
319 |           }
320 |         }
321 |       } else {
322 |         logger.warn('abort flushing too many retries');
323 |       }
324 |       logger.log('buffer flushed');
325 |     }
326 |     // everything flushed !
327 |     return true;
328 |   }
329 | 
330 |   rawDataToSegmnet(rawData) {
331 |     const view = new Uint8Array(rawData);
332 |     const trackId = getTrackId(view);
333 |     const trackType = this.getTypeBytrackId(trackId);
334 |     return { type: trackType, data: view };
335 |   }
336 | 
337 |   // on BUFFER_EOS mark matching sourcebuffer(s) as ended and trigger checkEos()
338 |   onBufferEos(data = {}) {
339 |     let sb = this.sourceBuffer;
340 |     let dataType = data.type;
341 |     for (let type in sb) {
342 |       if (!dataType || type === dataType) {
343 |         if (!sb[type].ended) {
344 |           sb[type].ended = true;
345 |           logger.log(`${type} sourceBuffer now EOS`);
346 |         }
347 |       }
348 |     }
349 |     this.checkEos();
350 |   }
351 | 
352 |   // if all source buffers are marked as ended, signal endOfStream() to MediaSource.
353 |   checkEos() {
354 |     let sb = this.sourceBuffer,
355 |       mediaSource = this.mediaSource;
356 |     if (!mediaSource || mediaSource.readyState !== 'open') {
357 |       this._needsEos = false;
358 |       return;
359 |     }
360 |     for (let type in sb) {
361 |       let sbobj = sb[type];
362 |       if (!sbobj.ended) {
363 |         return;
364 |       }
365 | 
366 |       if (sbobj.updating) {
367 |         this._needsEos = true;
368 |         return;
369 |       }
370 |     }
371 |     logger.log('all media data available, signal endOfStream() to MediaSource and stop loading fragment');
372 |     // Notify the media element that it now has all of the media data
373 |     try {
374 |       mediaSource.endOfStream();
375 |     } catch (e) {
376 |       logger.warn('exception while calling mediaSource.endOfStream()');
377 |     }
378 |     this._needsEos = false;
379 |   }
380 | 
381 |   addSourceBuffer(type = 'audio') {
382 |     const sb = this.sourceBuffer;
383 |     const mimeType = type === 'video' ? 'video/mp4; codecs="avc1.4d401f"' : 'audio/mp4; codecs="mp4a.40.2"';
384 |     sb[type] = this.mediaSource.addSourceBuffer(mimeType);
385 |     sb[type].mode = BUFFER_MODE_SEQUENCE;
386 |     // sb[type].timestampOffset = 0.25;
387 |     const buffer = sb[type];
388 |     if (type === 'video') {
389 |       buffer.addEventListener(BUFFER_UPDATE_END, this.onSBUpdateEnd);
390 |     } else {
391 |       buffer.addEventListener(BUFFER_UPDATE_END, this.onAudioSBUpdateEnd);
392 |     }
393 |   }
394 | 
395 |   removeSourceBuffer(type = 'audio') {
396 |     const buffer = this.sourceBuffer[type];
397 |     if (type === 'audio') {
398 |       buffer.removeEventListener(BUFFER_UPDATE_END, this.onAudioSBUpdateEnd);
399 |     } else {
400 |       buffer.removeEventListener(BUFFER_UPDATE_END, this.onSBUpdateEnd);
401 |     }
402 |     this.mediaSource.removeSourceBuffer(buffer);
403 |     delete this.sourceBuffer[type];
404 |   }
405 | 
406 |   destroy() {
407 |     this.init();
408 |   }
409 | }
410 | 


--------------------------------------------------------------------------------
/src/controllers/mediaSource.js:
--------------------------------------------------------------------------------
  1 | import {logger, enableLogs} from '../utils/logger';
  2 | 
  3 | export default class MediaSourceController {
  4 |   constructor(opts) {
  5 |     logger.log('create BuffersController');
  6 |   }
  7 | 
  8 |   onAttachMedia(data) {
  9 |     this.media = data.media;
 10 |     const media = this.media;
 11 |     if (!(media instanceof HTMLMediaElement)) {
 12 |       throw new Error(MSG.NOT_HTML_MEDIA_ELEMENT);
 13 |     }
 14 |     if (media) {
 15 |       // setup the media source
 16 |       const ms = (this.mediaSource = new MediaSource());
 17 |       //Media Source listeners
 18 | 
 19 |       this.onmse = this.onMediaSourceEnded.bind(this);
 20 |       this.onmsc = this.onMediaSourceClose.bind(this);
 21 | 
 22 |       ms.addEventListener(EVENTS.MEDIA_SOURCE_SOURCE_ENDED, this.onmse);
 23 |       ms.addEventListener(EVENTS.MEDIA_SOURCE_SOURCE_CLOSE, this.onmsc);
 24 |       // link video and media Source
 25 |       media.src = URL.createObjectURL(ms);
 26 | 
 27 |       this.oncvp = mseUtils.checkVideoProgress(media, this).bind(this);
 28 |       this.media.addEventListener(EVENTS.MEDIA_ELEMENT_PROGRESS, this.oncvp);
 29 |       return new Promise((resolve) => {
 30 |         this.onmso = this.onMediaSourceOpen.bind(this, resolve);
 31 |         ms.addEventListener(EVENTS.MEDIA_SOURCE_SOURCE_OPEN, this.onmso);
 32 |       });
 33 |     }
 34 |   }
 35 | 
 36 |   play() {
 37 |     // TODO: to observe this case, I have no idea when it fired
 38 |     if (!this.mediaSource) {
 39 |       this.onAttachMedia({media: this.media});
 40 |       this.onsoa = this._play.bind(this, from, videoTrack, audioTack);
 41 |       this.mediaSource.addEventListener(EVENTS.MEDIA_SOURCE_SOURCE_OPEN, this.onsoa);
 42 |       logger.warn('mediaSource did not create');
 43 |       this.resolveThenMediaSourceOpen = this.resolveThenMediaSourceOpen ? this.resolveThenMediaSourceOpen : resolve;
 44 |       this.rejectThenMediaSourceOpen = this.rejectThenMediaSourceOpen ? this.rejectThenMediaSourceOpen : reject;
 45 |       return;
 46 |     }
 47 | 
 48 |     // deferring execution
 49 |     if (this.mediaSource && this.mediaSource.readyState !== 'open') {
 50 |       logger.warn('readyState is not "open"');
 51 |       this.shouldPlay = true;
 52 |       this.resolveThenMediaSourceOpen = this.resolveThenMediaSourceOpen ? this.resolveThenMediaSourceOpen : resolve;
 53 |       this.rejectThenMediaSourceOpen = this.rejectThenMediaSourceOpen ? this.rejectThenMediaSourceOpen : reject;
 54 |       return;
 55 |     }
 56 |   }
 57 | 
 58 |   onMediaSourceOpen(resolve) {
 59 |     resolve();
 60 |     let mediaSource = this.mediaSource;
 61 |     if (mediaSource) {
 62 |       // once received, don't listen anymore to sourceopen event
 63 |       mediaSource.removeEventListener(EVENTS.MEDIA_SOURCE_SOURCE_OPEN, this.onmso);
 64 |     }
 65 | 
 66 |     // play was called but stoped and was pend(1.readyState is not open)
 67 |     // and time is come to execute it
 68 |     if (this.shouldPlay) {
 69 |       logger.info(
 70 |         `readyState now is ${this.mediaSource.readyState}, and will be played`,
 71 |         // this.playTime,
 72 |         this.audioTack,
 73 |         this.videoTrack
 74 |       );
 75 |       this.shouldPlay = false;
 76 |       this._play(/*this.playTime, */ this.audioTack, this.videoTrack);
 77 |     }
 78 |   }
 79 | 
 80 |   removeMediaSource() {
 81 |     const ms = this.mediaSource;
 82 |     if (ms) {
 83 |       if (ms.readyState === 'open') {
 84 |         try {
 85 |           // endOfStream could trigger exception if any sourcebuffer is in updating state
 86 |           // we don't really care about checking sourcebuffer state here,
 87 |           // as we are anyway detaching the MediaSource
 88 |           // let's just avoid this exception to propagate
 89 |           ms.endOfStream();
 90 |         } catch (err) {
 91 |           logger.warn(`onMediaDetaching:${err.message} while calling endOfStream`);
 92 |         }
 93 |       }
 94 | 
 95 |       ms.removeEventListener(EVENTS.MEDIA_SOURCE_SOURCE_OPEN, this.onmso);
 96 |       ms.removeEventListener(EVENTS.MEDIA_SOURCE_SOURCE_ENDED, this.onmse);
 97 |       ms.removeEventListener(EVENTS.MEDIA_SOURCE_SOURCE_CLOSE, this.onmsc);
 98 |       this.onmso = null;
 99 |       this.onmse = null;
100 |       this.onmsc = null;
101 |     }
102 | 
103 |     // Detach properly the MediaSource from the HTMLMediaElement as
104 |     // suggested in https://github.com/w3c/media-source/issues/53.
105 |     URL.revokeObjectURL(this.media.src);
106 |     this.media.removeAttribute('src');
107 |     this.media.load();
108 |   }
109 | }
110 | 


--------------------------------------------------------------------------------
/src/controllers/ws.js:
--------------------------------------------------------------------------------
  1 | import parseUrl from 'parseurl';
  2 | // import EVENTS from '../enums/events'
  3 | 
  4 | import Worker from '../workers/ws.worker.js';
  5 | 
  6 | const WS_COMMAND_SEEK_LIVE = '';
  7 | const WS_COMMAND_SEEK = 'play_from=';
  8 | const LIVE = 'live';
  9 | 
 10 | import { logger } from '../utils/logger';
 11 | 
 12 | export default class WebSocketController {
 13 |   constructor(opts) {
 14 |     this.opts = opts;
 15 |     this.init();
 16 |     this.onwso = this.open.bind(this);
 17 |     this.onwsm = this.handleReceiveMessage.bind(this);
 18 |     this.onwse = this.handleError.bind(this);
 19 |     this.onwsc = this.onWSClose.bind(this);
 20 |   }
 21 | 
 22 |   init() {
 23 |     // if (this.websocket) {
 24 |     //   delete this.websocket
 25 |     // }
 26 |     if (this.wsWorker) {
 27 |       delete this.wsWorker;
 28 |     }
 29 |     this.opened = false;
 30 |     this.connectionPromise = void 0;
 31 |     clearTimeout(this.reconnect);
 32 |     this.reconnect = void 0;
 33 | 
 34 |     if (window.Worker) {
 35 |       this.wsWorker = new Worker();
 36 |       this.wsWorker.onmessage = this.onWorkerMessage.bind(this);
 37 |     }
 38 |   }
 39 | 
 40 |   onWorkerMessage(message) {
 41 |     const { data } = message;
 42 |     const { command } = data;
 43 |     switch (command) {
 44 |       case 'connect':
 45 |         this.open();
 46 |         break;
 47 |       case 'close':
 48 |         this.onWSClose(data);
 49 |         break;
 50 |       case 'error':
 51 |         this.handleError(data);
 52 |         break;
 53 |       default:
 54 |         this.handleReceiveMessage(data);
 55 |     }
 56 |   }
 57 | 
 58 |   start(url, time, videoTrack = '', audioTack = '') {
 59 |     /**
 60 |      * if call ws.send command immediately after start
 61 |      * it causes to error message like "ws still in connection status"
 62 |      * #6809
 63 |      */
 64 |     this.connectionPromise = new Promise((res, rej) => {
 65 |       this.socketURL = { url, time, videoTrack, audioTack };
 66 |       const wsURL = getWSURL(url, time, videoTrack, audioTack);
 67 |       this.wsWorker.postMessage({
 68 |         command: 'start',
 69 |         commandObj: wsURL,
 70 |       });
 71 | 
 72 |       this._openingResolve = res;
 73 |       // TODO: to think cases when ws can fall
 74 |       this._openingReject = rej;
 75 |     });
 76 | 
 77 |     return this.connectionPromise;
 78 |   }
 79 | 
 80 |   open() {
 81 |     if (this.opened) return;
 82 |     
 83 |     this.opened = true;
 84 |     this.paused = true;
 85 |     this._openingResolve(); // #6809
 86 |   }
 87 | 
 88 |   send(cmd) {
 89 |     this.wsWorker.postMessage({
 90 |       command: 'send',
 91 |       commandObj: cmd,
 92 |     });
 93 |   }
 94 | 
 95 |   resume() {
 96 |     clearTimeout(this.reconnect);
 97 |     logger.log('ws: send resume');
 98 |     // if (this.websocket.readyState === 0) {
 99 |     //   return setTimeout(() => this.resume(), 500)
100 |     // } else {
101 |     this.send('resume');
102 |     this.paused = false;
103 |     // }
104 |   }
105 | 
106 |   pause() {
107 |     logger.log('ws: send pause');
108 |     /**
109 |      * 0 (CONNECTING) The connection is not yet open.
110 |      * 1 (OPEN) The connection is open and ready to communicate.
111 |      * 2 (CLOSING) The connection is in the process of closing.
112 |      * 3 (CLOSED) The connection is closed or couldn't be opened.
113 |      */
114 |     // if (this.websocket.readyState === 1) {
115 |     this.send('pause');
116 |     this.paused = true;
117 |     // }
118 |   }
119 | 
120 |   seek(utc) {
121 |     const commandStr = utc === LIVE ? WS_COMMAND_SEEK_LIVE : WS_COMMAND_SEEK;
122 |     logger.log(`${commandStr}${utc}`);
123 |     this.send(`${commandStr}${utc}`);
124 |   }
125 | 
126 |   setTracks(videoTrack, audioTrack = null) {
127 |     this.send(`set_tracks=${videoTrack}${audioTrack}`);
128 |   }
129 | 
130 |   sendStats(data) {
131 |     // console.log(data);
132 |     const encoded = JSON.stringify(data);
133 |     this.send(encoded);
134 |   }
135 | 
136 |   handleReceiveMessage(e) {
137 |     this.opts.message(e);
138 |   }
139 | 
140 |   handleError(...args) {
141 |     if (this.opts.error) {
142 |       this.opts.error(...args);
143 |     }
144 |   }
145 | 
146 |   onWSClose(event) {
147 |     logger.log('WebSocket lost connection with code ', event.code + ' and reason: ' + event.reason); // например, "убит" процесс сервера
148 |     if (this.opts.error) {
149 |       this.opts.error({
150 |         error: 'WebSocket lost connection',
151 |         err: `WebSocket lost connection with code ${event.code} and reason: ${event.reason}`,
152 |         code: event.code,
153 |       });
154 |     }
155 |     if (this.opts.wsReconnect) {
156 |       if (event.wasClean && event.code !== 1000 && event.code !== 1006) {
157 |         logger.log('Clean websocket stop');
158 |         this.destroy();
159 |       } else {
160 |         const { url, /* time, */ videoTrack, audioTack } = this.socketURL;
161 |         this.reconnect = setTimeout(() => {
162 |           this.start(url, /*time, */ videoTrack, audioTack)
163 |             .then(() => {
164 |               clearTimeout(this.reconnect);
165 |               return;
166 |             })
167 |             .catch(() => {
168 |               this.destroy();
169 |               return;
170 |             });
171 |         }, 5000);
172 |       }
173 |     }
174 |     if (this.opts.closed) {
175 |       this.opts.closed(event);
176 |     }
177 |   }
178 | 
179 |   destroy() {
180 |     // if (this.websocket) {
181 |     //   // this.pause()
182 |     //   this.websocket.removeEventListener(EVENTS.WS_MESSAGE, this.onwsm)
183 |     //   this.websocket.removeEventListener(EVENTS.WS_CLOSE, this.onwsc)
184 |     //   this.websocket.close()
185 |     //   this.websocket.onclose = void 0 // disable onclose handler first
186 |     //   this.websocket = void 0
187 |     this.wsWorker.postMessage({
188 |       command: 'disconnect',
189 |     });
190 |     clearTimeout(this.reconnect);
191 |     this.reconnect = void 0;
192 |     this.init();
193 |     // }
194 |   }
195 | }
196 | 
197 | // TODO
198 | export function getWSURL(url, utc, videoTrack, audioTrack) {
199 |   // TODO: then use @param time it prevent to wrong data from ws(trackID view[47] for example is 100)
200 |   // const time = utc
201 |   utc = LIVE;
202 |   const time = utc;
203 | 
204 |   if (!time && !videoTrack && !audioTrack) {
205 |     return url;
206 |   }
207 | 
208 |   const parsedUrl = parseUrl({ url });
209 |   let othersParams = '';
210 | 
211 |   if (parsedUrl.query) {
212 |     const currentParamsKeysValues = parsedUrl.query.split('&').map((keyValue) => keyValue.split('='));
213 | 
214 |     othersParams = currentParamsKeysValues
215 |       .filter((p) => p[0] !== 'from' && p[0] !== 'tracks')
216 |       .map((kv) => kv.join('='))
217 |       .join('&');
218 | 
219 |     logger.log(othersParams);
220 |   }
221 | 
222 |   const cleanUrl = `${parsedUrl.protocol}//${parsedUrl.host}${parsedUrl.pathname}?`;
223 |   const tracksExists = !!videoTrack || !!audioTrack;
224 |   const ampFrom = tracksExists && !!time && time !== LIVE ? '&' : '';
225 |   let fromQuery = utc === LIVE ? '' : `from=${Math.floor(time)}`;
226 |   if (!utc) {
227 |     fromQuery = '';
228 |   }
229 |   const resultUrl =
230 |     `${cleanUrl}${tracksExists ? `tracks=${videoTrack}${audioTrack}` : ''}` +
231 |     `${ampFrom}${fromQuery}` +
232 |     `${(tracksExists || (!!time && time !== LIVE)) && !!othersParams ? '&' : ''}${othersParams}`;
233 |   return resultUrl;
234 | }
235 | 


--------------------------------------------------------------------------------
/src/demo/index.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 |   <head>
  3 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4 |     <!-- <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.bundle.min.js"></script> -->
  5 |     <!-- <script src='https://code.highcharts.com/highcharts.js'></script> -->
  6 |     <script src="https://code.highcharts.com/stock/highstock.js"></script>
  7 |     <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
  8 |     <script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
  9 |   </head>
 10 |   <style>
 11 |     .player-container {
 12 |       border: 1px solid black;
 13 |       position: relative;
 14 |       height: 50vh;
 15 |       display: flex;
 16 |       justify-content: center;
 17 |       align-items: flex-start;
 18 |       flex-wrap: wrap;
 19 |     }
 20 | 
 21 |     #player {
 22 |       position: relative;
 23 |       width: 100%;
 24 |       height: 100%;
 25 |     }
 26 |     .stallingLabel {
 27 |       position: absolute;
 28 |       bottom: 0;
 29 |       left: 50%;
 30 |       color: #fff;
 31 |       background: #000;
 32 |     }
 33 | 
 34 |     .playButton {
 35 |       position: absolute;
 36 |       left: 0;
 37 |       right: 0;
 38 |       top: 0;
 39 |       bottom: 0;
 40 |       z-index: 100;
 41 |       display: none;
 42 |       justify-content: center;
 43 |       align-items: center;
 44 |       font-size: 180px;
 45 |       background: #000;
 46 |       color: #fff;
 47 |       cursor: pointer;
 48 |     }
 49 | 
 50 |     .pauseButton {
 51 |       position: absolute;
 52 |       left: 0;
 53 |       right: 0;
 54 |       top: 0;
 55 |       bottom: 0;
 56 |       z-index: 101;
 57 |       display: none;
 58 |       justify-content: center;
 59 |       align-items: center;
 60 |       font-size: 180px;
 61 |       color: #fff;
 62 |       cursor: pointer;
 63 |     }
 64 | 
 65 |     .mbr-controls {
 66 |       display: none;
 67 |     }
 68 | 
 69 |     .controls-panel {
 70 |       margin: 16px 0;
 71 |     }
 72 | 
 73 |     button {
 74 |       margin: 8px 0;
 75 |     }
 76 | 
 77 |     .indicator-wrapper {
 78 |       display: flex;
 79 |       justify-content: center;
 80 |       align-items: center;
 81 |       margin-bottom: 16px;
 82 |       width: 50%;
 83 |       float: left;
 84 |     }
 85 | 
 86 |     .gray {
 87 |       background-color: gray;
 88 |     }
 89 |     .black {
 90 |       background-color: black;
 91 |     }
 92 |     .red {
 93 |       background-color: red;
 94 |     }
 95 |     .yellow {
 96 |       background-color: yellow;
 97 |     }
 98 |     .green {
 99 |       background-color: green;
100 |     }
101 | 
102 |     #indicator, #nIndicator {
103 |       width: 32px;
104 |       height: 32px;
105 |       border-radius: 50%;
106 |       display: inline-block;
107 |       margin-left: 16px;
108 |       transition: 100ms ease-in-out;
109 |     }
110 | 
111 |     canvas {
112 |       margin-bottom: 8px;
113 |     }
114 | 
115 |     .loading {
116 |       position: absolute;
117 |       top: calc(50% - 64px);
118 |       left: calc(50% - 64px);
119 |       font-size: 128px;
120 |       color: #FFF;
121 |       width: 128px;
122 |       height: 128px;
123 |       text-align: center;
124 |       vertical-align: middle;
125 |       line-height: 116px;
126 |       opacity: 0;
127 |     }
128 | 
129 |     @-webkit-keyframes rotating /* Safari and Chrome */ {
130 |       from {
131 |         -webkit-transform: rotate(0deg);
132 |         -o-transform: rotate(0deg);
133 |         transform: rotate(0deg);
134 |       }
135 |       to {
136 |         -webkit-transform: rotate(360deg);
137 |         -o-transform: rotate(360deg);
138 |         transform: rotate(360deg);
139 |       }
140 |     }
141 | 
142 |     @keyframes rotating {
143 |       from {
144 |         -ms-transform: rotate(0deg);
145 |         -moz-transform: rotate(0deg);
146 |         -webkit-transform: rotate(0deg);
147 |         -o-transform: rotate(0deg);
148 |         transform: rotate(0deg);
149 |       }
150 |       to {
151 |         -ms-transform: rotate(360deg);
152 |         -moz-transform: rotate(360deg);
153 |         -webkit-transform: rotate(360deg);
154 |         -o-transform: rotate(360deg);
155 |         transform: rotate(360deg);
156 |       }
157 |     }
158 | 
159 |     .rotating {
160 |       -webkit-animation: rotating 3s linear infinite;
161 |       -moz-animation: rotating 3s linear infinite;
162 |       -ms-animation: rotating 3s linear infinite;
163 |       -o-animation: rotating 3s linear infinite;
164 |       animation: rotating 3s linear infinite;
165 |     }
166 | 
167 |     .visible {
168 |       opacity: 1;
169 |     }
170 |   </style>
171 | <body>
172 |   <div class="player-container">
173 |     <video id="player" autoplay muted></video>
174 |     <div id="stallingLabel" class="stallingLabel">
175 |       [callbacks]
176 |     </div>
177 |     <div id="playButton" class="playButton">▶</div>
178 |     <div id="pauseButton" class="pauseButton">▌▌</div>
179 |     <div id="loading" class="loading rotating">◌</div>
180 |   </div>
181 |   <div class="controls-panel">
182 |     <div class="mbr-controls">
183 |       <div>
184 |         <label for="videoTracks">video tracks</label>
185 |         <select name="videoTracks" id="videoTracks"></select>
186 |       </div>
187 |       <div>
188 |         <label for="audioTracks">audio tracks</label>
189 |         <select name="audioTracks" id="audioTracks"></select>
190 |       </div>
191 |       <button onclick="window.setTracks()">set tracks</button>
192 |     </div>
193 |     <div style="float: right;">
194 |       <button onclick="window.player.play()">Play</button>
195 |       <button onclick="window.player.stop()">Stop</button>
196 |       <button onclick="window.player.pause()">Pause</button>
197 |       <button id="muted" onclick="unmute()">Unmute</button>
198 |     </div>
199 |     <!-- <div>
200 |       <input type="text" id="seek" value="1538561793"/>
201 |       <button onclick="seek()">seek</button>
202 |     </div> -->
203 |     <!-- <canvas id="bufferChart" height="60"></canvas> -->
204 |     <!-- <div style="display: flex;">
205 |       <div class="indicator-wrapper"><span>Ready State:</span><div id="indicator" class="gray"></div></div>
206 |       <div class="indicator-wrapper"><span>Network State:</span><div id="nIndicator" class="gray"></div></div>
207 |     </div> -->
208 |     <!-- <canvas id="socketLag" height="50"></canvas>
209 |     <canvas id="bufferLengthChart" height="50"></canvas>
210 |     <canvas id="MSELDBuffers" height="60"></canvas>
211 |     <canvas id="MSELDEvents" height="50"></canvas> -->
212 | 
213 |     <!-- <div id="container" style="height: 300px; min-width: 310px"></div>
214 |     <div id="container2" style="height: 300px; min-width: 310px"></div> -->
215 |   </div>
216 |   <script type="text/javascript" src="index.js"></script>
217 | </body>
218 | </html>
219 | 


--------------------------------------------------------------------------------
/src/demo/index.js:
--------------------------------------------------------------------------------
  1 | import FlussonicMsePlayer from '../FlussonicMsePlayer.js';
  2 | import { humanTime } from './utils';
  3 | import { decode } from 'querystring';
  4 | 
  5 | window.onload = onLoad;
  6 | 
  7 | function onLoad() {
  8 |   let streamer_ws = 'ws://localhost:8080';
  9 |   let stream_name = 'clock';
 10 |   let videotrack, audiotrack, token, videoQuality, statsSendEnable = false, statsSendTime = 60;
 11 | 
 12 |   // parse query string
 13 |   let query = window.location.search;
 14 |   if (query) {
 15 |     let qs = decode(query.replace(/^\?/, ''));
 16 |     if (qs.host) {
 17 |       streamer_ws = qs.host;
 18 |     }
 19 |     if (qs.name) {
 20 |       stream_name = qs.name;
 21 |     }
 22 |     if (qs.videotrack) {
 23 |       videotrack = qs.videotrack;
 24 |     }
 25 |     if (qs.audiotrack) {
 26 |       audiotrack = qs.audiotrack;
 27 |     }
 28 |     if (qs.from) {
 29 |       from = qs.from;
 30 |     }
 31 |     if (qs.token) {
 32 |       token = qs.token;
 33 |     }
 34 |     if (qs.videoQuality) {
 35 |       videoQuality = qs.videoQuality;
 36 |     }
 37 |     if (qs.statsSendEnable) {
 38 |       statsSendEnable = qs.statsSendEnable === 'true' ? true : false;
 39 |     }
 40 |     if (qs.statsSendTime) {
 41 |       statsSendTime = Number(qs.statsSendTime);
 42 |     }
 43 |   }
 44 |   let url = `${streamer_ws}/${stream_name}/mse_ld${token ? `?token=${token}` : ''}`;
 45 | 
 46 |   const element = document.getElementById('player');
 47 |   const videoTracksSelect = document.getElementById('videoTracks');
 48 |   const audioTracksSelect = document.getElementById('audioTracks');
 49 |   const mbrControls = document.querySelector('.mbr-controls');
 50 |   const loading = document.getElementById('loading');
 51 |   const stallingLabel = document.getElementById('stallingLabel');
 52 |   const showStallingIndicator = (value) => {
 53 |     stallingLabel.innerText = '' + value;
 54 |   };
 55 | 
 56 |   let showFirstFrameUTC = false;
 57 | 
 58 |   // let timeLineChart = []
 59 |   // let graphUTCLabels = []
 60 |   // let graphCurrentTime = []
 61 |   // let graphBufferedTime = []
 62 |   let graphBufferedLength = [];
 63 |   let readySt = [];
 64 |   let mseVideoBufferSize = [];
 65 |   let mseAudioBufferSize = [];
 66 | 
 67 |   let messagesUTC = [];
 68 |   // const messagesTimelag = []
 69 | 
 70 |   const opts = {
 71 |     debug: true,
 72 |     connectionRetries: 3,
 73 |     errorsBeforeStop: 1,
 74 |     retryMuted: true,
 75 |     onCrashTryVideoOnly: true,
 76 |     maxBufferDelay: 2,
 77 |     videotrack,
 78 |     audiotrack,
 79 |     // preferHQ: true,
 80 |     videoQuality,
 81 |     progressUpdateTime: 100,
 82 |     wsReconnect: false,
 83 |     statsSendEnable,
 84 |     statsSendTime, // in seconds
 85 |     // sentryConfig: 'https://*some sentry instance*',
 86 |     onStartStalling: () => {
 87 |       showStallingIndicator('start stalling');
 88 |       loading.classList.add('visible');
 89 |     },
 90 |     onEndStalling: () => {
 91 |       showStallingIndicator('stop stalling');
 92 |       loading.classList.remove('visible');
 93 |     },
 94 |     onSeeked: () => {
 95 |       showFirstFrameUTC = true;
 96 |     },
 97 |     onProgress: (utc) => {
 98 |       if (showFirstFrameUTC) {
 99 |         console.log('%c first frame after action: ' + humanTime(utc) + ' ' + utc, 'background: red');
100 |         showFirstFrameUTC = false;
101 |       }
102 |       // timeLineChart.push({
103 |       //   x: new Date(),
104 |       //   // y: 0,
105 |       // })
106 |       // if (timeLineChart.length === 100) {
107 |       //   timeLineChart.shift()
108 |       // }
109 |       // eventsChart.update()
110 |     },
111 |     onDisconnect: (status) => {
112 |       console.log('Websocket status:', status);
113 |       const restart = () => {
114 |         window.player.restart();
115 |         clearInterval(restartTimer);
116 |       };
117 |       let restartTimer = setInterval(restart, 10000);
118 |     },
119 |     onMediaInfo: (rawMetaData) => {
120 |       console.log('rawMetaData:', rawMetaData);
121 |       let videoOptions, audioOptions;
122 |       const videoTracks = window.player.getVideoTracks();
123 |       const audioTracks = window.player.getAudioTracks();
124 |       if (videoTracks) {
125 |         videoOptions = videoTracks.map(
126 |           (v, i) =>
127 |             `<option value="${v['track_id']}">${v['bitrate']} ${v['codec']} ${v['fps']} ${v['width']}x${v['height']}</option>`
128 |         );
129 |         videoTracksSelect.innerHTML = videoOptions.join('');
130 |       }
131 | 
132 |       if (audioTracks) {
133 |         audioOptions = audioTracks.map(
134 |           (v) => `<option value="${v['track_id']}">${v['bitrate']} ${v['codec']} ${v['lang']}</option>`
135 |         );
136 |         audioOptions.push('<option value="">None</option>');
137 |         audioTracksSelect.innerHTML = audioOptions.join('');
138 |       }
139 | 
140 |       mbrControls.style.display = 'block';
141 |     },
142 |     onError: (err) => {
143 |       console.log('••••• ERRROR', err);
144 |     },
145 |     // onEvent: (event) => {
146 |     //   console.log('EVENT', event);
147 |     //   if (typeof event === 'object' && event.type) {
148 |     //     let color = 'gray';
149 |     //     switch (event.type) {
150 |     //       case 'waiting':
151 |     //         color = 'red';
152 |     //         break;
153 |     //       case 'playing':
154 |     //         color = 'green';
155 |     //         break;
156 |     //       default:
157 |     //         color = 'gray';
158 |     //         break;
159 |     //     }
160 |     //     const time = new Date();
161 |     //     myChart.xAxis[0].addPlotBand({
162 |     //       label: { text: event.type },
163 |     //       color,
164 |     //       width: 2,
165 |     //       value: Date.now(time),
166 |     //       zIndex: 3,
167 |     //     });
168 |     //   }
169 |     // },
170 |     onAutoplay: (func) => {
171 |       // console.log('onAutoplay', func)
172 |       const element = document.getElementById('playButton');
173 |       element.style.display = 'flex';
174 |       window.autoplayFunc = func.bind(this);
175 |       window.addEventListener('click', window.hidePlayButton);
176 |       window.addEventListener('touchstart', window.hidePlayButton);
177 |     },
178 |     onMuted: () => {
179 |       console.log('[onMuted]');
180 |     },
181 |     // onStats: (stats) => {
182 |     //   const {endTime, currentTime, videoBuffer, audioBuffer, timestamp, readyState, networkState} = stats
183 | 
184 |     //   mseVideoBufferSize.push([timestamp, videoBuffer])
185 |     //   mseAudioBufferSize.push([timestamp, audioBuffer])
186 | 
187 |     //   const readyIndicator = document.getElementById('indicator')
188 |     //   readyIndicator.className = ''
189 |     //   switch (readyState) {
190 |     //     case 0:
191 |     //       readyIndicator.classList.add('black')
192 |     //       break
193 |     //     case 1:
194 |     //       readyIndicator.classList.add('gray')
195 |     //       break
196 |     //     case 2:
197 |     //       readyIndicator.classList.add('red')
198 |     //       break
199 |     //     case 3:
200 |     //       readyIndicator.classList.add('yellow')
201 |     //       break
202 |     //     case 4:
203 |     //       readyIndicator.classList.add('green')
204 |     //       break
205 |     //     default:
206 |     //       readyIndicator.classList.add('gray')
207 |     //       break
208 |     //   }
209 |     //   const networkIndicator = document.getElementById('nIndicator')
210 |     //   networkIndicator.className = ''
211 |     //   switch (networkState) {
212 |     //     case 0:
213 |     //       networkIndicator.classList.add('black')
214 |     //       break
215 |     //     case 1:
216 |     //       networkIndicator.classList.add('yellow')
217 |     //       break
218 |     //     case 2:
219 |     //       networkIndicator.classList.add('green')
220 |     //       break
221 |     //     case 3:
222 |     //       networkIndicator.classList.add('red')
223 |     //       break
224 |     //     default:
225 |     //       networkIndicator.classList.add('gray')
226 |     //       break
227 |     //   }
228 | 
229 |     //   graphBufferedLength.push([timestamp, (endTime - currentTime) * 1000])
230 |     //   readySt.push([timestamp, readyState])
231 |     // },
232 |     onMessage: (messageStats) => {
233 |       const { utc, messageTimeDiff } = messageStats;
234 |       messagesUTC.push([utc, messageTimeDiff]);
235 |     },
236 |     onPause: () => {
237 |       const element = document.getElementById('pauseButton');
238 |       element.style.display = 'flex';
239 |     },
240 |     onResume: () => {
241 |       const element = document.getElementById('pauseButton');
242 |       element.style.display = 'none';
243 |     },
244 |   };
245 | 
246 |   window.player = new FlussonicMsePlayer(element, url, opts);
247 |   window.play = (videotrack = undefined, audiotrack) => {
248 |     if (!videotrack) {
249 |       audiotrack = undefined;
250 |     }
251 |     window.player
252 |       .play(videotrack, audiotrack)
253 |       .then((success) => {
254 |         console.log('resolve', success);
255 |       })
256 |       .catch((err) => {
257 |         console.log(err);
258 |       });
259 |   };
260 | 
261 |   window.hidePlayButton = () => {
262 |     const element = document.getElementById('playButton');
263 |     element.style.display = 'none';
264 |     window.removeEventListener('click', window.hidePlayButton);
265 |     window.removeEventListener('touchstart', window.hidePlayButton);
266 |     window.autoplayFunc();
267 |   };
268 | 
269 |   window.play(videotrack, audiotrack);
270 | 
271 |   window.setTracks = () => {
272 |     const videoTrackId = videoTracksSelect.options[videoTracksSelect.selectedIndex].value;
273 |     const audioTrackId = audioTracksSelect.options[audioTracksSelect.selectedIndex].value;
274 |     console.log({ videoTracksSelect }, videoTrackId, audioTrackId);
275 |     window.player.setTracks([videoTrackId, audioTrackId]);
276 |   };
277 | 
278 |   window.seek = () => {
279 |     const element = document.getElementById('seek');
280 |     let value;
281 |     if (!element || element instanceof HTMLInputElement) {
282 |       if (element.value === 'live') {
283 |         value = 'live';
284 |       } else {
285 |         value = parseInt(element.value, 10);
286 |         value = value > 0 ? value : void 0;
287 |       }
288 |     }
289 |     if (value) {
290 |       window.player.seek(value);
291 |     } else throw new Error('incorrect input!');
292 |   };
293 | 
294 |   window.unmute = () => {
295 |     const element = document.getElementById('muted');
296 |     if (window.player && window.player.media) {
297 |       if (window.player.media.muted) {
298 |         window.player.media.muted = false;
299 |         element.innerText = 'Mute';
300 |       } else {
301 |         window.player.media.muted = true;
302 |         element.innerText = 'Unmute';
303 |       }
304 |     }
305 |   };
306 | 
307 |   //   let myChart = Highcharts.stockChart('container', {
308 |   //     // Create the chart
309 |   //     chart: {},
310 | 
311 |   //     time: {
312 |   //       useUTC: true,
313 |   //     },
314 | 
315 |   //     rangeSelector: {
316 |   //       buttons: [
317 |   //         {
318 |   //           count: 1,
319 |   //           type: 'minute',
320 |   //           text: '1M',
321 |   //         },
322 |   //         {
323 |   //           count: 5,
324 |   //           type: 'minute',
325 |   //           text: '5M',
326 |   //         },
327 |   //         {
328 |   //           type: 'all',
329 |   //           text: 'All',
330 |   //         },
331 |   //       ],
332 |   //       inputEnabled: false,
333 |   //       selected: 0,
334 |   //     },
335 | 
336 |   //     title: {
337 |   //       text: 'MSELD Statistics',
338 |   //     },
339 | 
340 |   //     // exporting: {
341 |   //     //   enabled: false,
342 |   //     // },
343 | 
344 |   //     xAxis: {
345 |   //       plotBands: [],
346 |   //       plotLines: [],
347 |   //     },
348 | 
349 |   //     yAxis: [
350 |   //       {
351 |   //         title: {
352 |   //           text: 'Milliseconds',
353 |   //         },
354 |   //         align: 'left',
355 |   //       },
356 |   //       {
357 |   //         title: {
358 |   //           text: 'State',
359 |   //         },
360 |   //         opposite: true,
361 |   //         align: 'right',
362 |   //         // floor: 0,
363 |   //         // ceiling: 4,
364 |   //         max: 4,
365 |   //       },
366 |   //     ],
367 | 
368 |   //     series: [
369 |   //       {
370 |   //         name: 'WS message lag',
371 |   //         data: [],
372 |   //       },
373 |   //       {
374 |   //         name: 'Media Element have seconds in buffer',
375 |   //         data: [],
376 |   //       },
377 |   //       {
378 |   //         name: 'Ready State',
379 |   //         type: 'line',
380 |   //         yAxis: 1,
381 |   //         data: [],
382 |   //         max: 4,
383 |   //         zones: [
384 |   //           {
385 |   //             value: 0,
386 |   //             color: 'black',
387 |   //           },
388 |   //           {
389 |   //             value: 1,
390 |   //             color: 'gray',
391 |   //           },
392 |   //           {
393 |   //             value: 2,
394 |   //             color: 'red',
395 |   //           },
396 |   //           {
397 |   //             value: 3,
398 |   //             color: 'yellow',
399 |   //           },
400 |   //           {
401 |   //             value: 4,
402 |   //             color: 'green',
403 |   //           },
404 |   //           {
405 |   //             color: 'gray',
406 |   //           },
407 |   //         ],
408 |   //       },
409 |   //     ],
410 |   //   });
411 | 
412 |   //   let myMseChart = Highcharts.stockChart('container2', {
413 |   //     // Create the chart
414 |   //     chart: {},
415 | 
416 |   //     time: {
417 |   //       useUTC: true,
418 |   //     },
419 | 
420 |   //     rangeSelector: {
421 |   //       buttons: [
422 |   //         {
423 |   //           count: 1,
424 |   //           type: 'minute',
425 |   //           text: '1M',
426 |   //         },
427 |   //         {
428 |   //           count: 5,
429 |   //           type: 'minute',
430 |   //           text: '5M',
431 |   //         },
432 |   //         {
433 |   //           type: 'all',
434 |   //           text: 'All',
435 |   //         },
436 |   //       ],
437 |   //       inputEnabled: false,
438 |   //       selected: 0,
439 |   //     },
440 | 
441 |   //     title: {
442 |   //       text: 'MSELD Buffer Statistics',
443 |   //     },
444 | 
445 |   //     // xAxis: {
446 |   //     //   plotBands: [],
447 |   //     //   plotLines: [],
448 |   //     // },
449 | 
450 |   //     yAxis: [
451 |   //       {
452 |   //         title: {
453 |   //           text: 'Bytes',
454 |   //         },
455 |   //         align: 'left',
456 |   //       },
457 |   //     ],
458 | 
459 |   //     series: [
460 |   //       {
461 |   //         name: 'WS audio buffer',
462 |   //         data: [],
463 |   //       },
464 |   //       {
465 |   //         name: 'WS video buffer',
466 |   //         data: [],
467 |   //       },
468 |   //     ],
469 |   //   });
470 | 
471 |   //   setInterval(() => {
472 |   //     const prepare = function (data) {
473 |   //       // const maxElements = 5000
474 |   //       data.sort((a, b) => {
475 |   //         return a[0] - b[0];
476 |   //       });
477 |   //       // if (data.length >= maxElements) {
478 |   //       //   data = data.splice(data.length - maxElements, data.length)
479 |   //       // }
480 |   //       return data;
481 |   //     };
482 | 
483 |   //     messagesUTC = prepare(messagesUTC);
484 |   //     graphBufferedLength = prepare(graphBufferedLength);
485 |   //     readySt = prepare(readySt);
486 |   //     mseAudioBufferSize = prepare(mseAudioBufferSize);
487 |   //     mseVideoBufferSize = prepare(mseVideoBufferSize);
488 | 
489 |   //     myChart.series[0].setData(messagesUTC);
490 |   //     myChart.series[1].setData(graphBufferedLength);
491 |   //     myChart.series[2].setData(readySt);
492 | 
493 |   //     myMseChart.series[0].setData(mseAudioBufferSize);
494 |   //     myMseChart.series[1].setData(mseVideoBufferSize);
495 |   //   }, 5000);
496 | }
497 | 


--------------------------------------------------------------------------------
/src/demo/utils.js:
--------------------------------------------------------------------------------
 1 | export function pad2(n) {
 2 |   return n <= 9 ? '0' + n : '' + n;
 3 | }
 4 | 
 5 | export function humanTime(utcOrLive, lt = true) {
 6 |   // $FlowFixMe: string > 0 is always false
 7 |   if (!(utcOrLive > 0)) {
 8 |     return '';
 9 |   }
10 | 
11 |   // $FlowFixMe: just for flow
12 |   const utc = utcOrLive;
13 | 
14 |   var d = new Date();
15 |   d.setTime(utc * 1000);
16 |   var localTime = !(lt === false);
17 | 
18 |   var h = localTime ? d.getHours() : d.getUTCHours();
19 |   var m = localTime ? d.getMinutes() : d.getUTCMinutes();
20 |   var s = localTime ? d.getSeconds() : d.getUTCSeconds();
21 | 
22 |   return pad2(h) + ':' + pad2(m) + ':' + pad2(s);
23 | }
24 | 


--------------------------------------------------------------------------------
/src/enums/common.js:
--------------------------------------------------------------------------------
1 | export const VIDEO = 'video';
2 | export const AUDIO = 'audio';
3 | 


--------------------------------------------------------------------------------
/src/enums/events.js:
--------------------------------------------------------------------------------
 1 | const EVENTS = {
 2 |   // MediaSource
 3 |   MEDIA_SOURCE_SOURCE_OPEN: 'sourceopen',
 4 |   MEDIA_SOURCE_SOURCE_ENDED: 'sourceended',
 5 |   MEDIA_SOURCE_SOURCE_CLOSE: 'sourceclose',
 6 | 
 7 |   // HTMLMediaElement
 8 |   MEDIA_ELEMENT_PLAY: 'play',
 9 |   MEDIA_ELEMENT_PAUSE: 'pause',
10 |   MEDIA_ELEMENT_PROGRESS: 'progress',
11 |   MEDIA_ELEMENT_EMPTIED: 'emptied',
12 |   MEDIA_ELEMENT_SUSPEND: 'suspend',
13 |   MEDIA_ELEMENT_STALLED: 'stalled',
14 |   MEDIA_ELEMENT_WAITING: 'waiting',
15 |   MEDIA_ELEMENT_RATECHANGE: 'ratechange',
16 |   MEDIA_ELEMENT_PLAYING: 'playing',
17 | 
18 |   // WebSocket
19 |   WS_OPEN: 'open',
20 |   WS_MESSAGE: 'message',
21 |   WS_ERROR: 'error',
22 |   WS_CLOSE: 'close',
23 | 
24 |   // Buffer
25 |   BUFFER_UPDATE_END: 'updateend',
26 |   BUFFER_ERROR: 'onerror',
27 |   BUFFER_ABORT: 'onabort',
28 | };
29 | 
30 | export default EVENTS;
31 | 


--------------------------------------------------------------------------------
/src/enums/messages.js:
--------------------------------------------------------------------------------
1 | const MSG = {
2 |   NOT_HTML_MEDIA_ELEMENT: 'media should be an HTMLMediaElement instance',
3 | };
4 | 
5 | export default MSG;
6 | 


--------------------------------------------------------------------------------
/src/enums/segments.js:
--------------------------------------------------------------------------------
1 | export const EVENT_SEGMENT = 'event';
2 | export const MSE_INIT_SEGMENT = 'mse_init_segment';
3 | export const MSE_MEDIA_SEGMENT = 'mse_media_segment';
4 | 


--------------------------------------------------------------------------------
/src/modules/MsePlayer.external.js:
--------------------------------------------------------------------------------
   1 | import WebSocketController from '../controllers/ws';
   2 | import BuffersController from '../controllers/buffers';
   3 | // import MediaSourceController from '../controllers/mediaSource'
   4 | import Worker from '../workers/stats.worker.js';
   5 | 
   6 | import * as mseUtils from '../utils/mseUtils';
   7 | import { logger, enableLogs } from '../utils/logger';
   8 | 
   9 | import { MSE_INIT_SEGMENT, EVENT_SEGMENT } from '../enums/segments';
  10 | import { AUDIO, VIDEO } from '../enums/common';
  11 | import EVENTS from '../enums/events';
  12 | import MSG from '../enums/messages';
  13 | 
  14 | const WS_EVENT_PAUSED = 'paused';
  15 | const WS_EVENT_RESUMED = 'resumed';
  16 | const WS_EVENT_SEEKED = 'seeked';
  17 | const WS_EVENT_SWITCHED_TO_LIVE = 'switched_to_live';
  18 | const WS_EVENT_EOS = 'recordings_ended';
  19 | const WS_EVENT_NO_LIVE = 'stream_unavailable';
  20 | const WS_EVENT_TRACKS_SWITCHED = 'tracks_switched';
  21 | const WS_TRY_RECONNECT = false;
  22 | const WS_PREFER_HIGH_QUALITY = false;
  23 | 
  24 | const TYPE_CONTENT_VIDEO = VIDEO;
  25 | const TYPE_CONTENT_AUDIO = AUDIO;
  26 | const DEFAULT_ERRORS_BEFORE_STOP = 1;
  27 | const DEFAULT_UPDATE = 500;
  28 | const DEFAULT_CONNECTIONS_RETRIES = 0;
  29 | const DEFAULT_RETRY_MUTED = false;
  30 | // const DEFAULT_FORCE_UNMUTED = false;
  31 | const MAX_BUFFER_DELAY = 2;
  32 | const DEFAULT_ON_CRASH_TRY_VIDEO_ONLY = true;
  33 | const DEFAULT_STATS_SEND = true;
  34 | 
  35 | export default class MSEPlayer {
  36 |   static get version() {
  37 |     return VERSION;
  38 |   }
  39 | 
  40 |   static replaceHttpByWS(url) {
  41 |     return mseUtils.replaceHttpByWS(url);
  42 |   }
  43 | 
  44 |   static isSupported() {
  45 |     return mseUtils.isSupportedMSE();
  46 |   }
  47 |   /**
  48 |    *
  49 |    * @param media HTMLMediaElement
  50 |    * @param urlStream
  51 |    * @param opts
  52 |    */
  53 | 
  54 |   constructor(media, urlStream, opts = {}) {
  55 |     if (opts.debug) {
  56 |       enableLogs(true);
  57 |       window.humanTime = mseUtils.humanTime;
  58 |     }
  59 | 
  60 |     logger.info('[mse-player]:', MSEPlayer.version);
  61 | 
  62 |     this.opts = opts || {};
  63 | 
  64 |     this.media = media;
  65 |     this.url = urlStream;
  66 |     this.firstStart = true;
  67 | 
  68 |     this.opts.progressUpdateTime = this.opts.progressUpdateTime || DEFAULT_UPDATE;
  69 | 
  70 |     this.opts.errorsBeforeStop = this.opts.errorsBeforeStop ? this.opts.errorsBeforeStop : DEFAULT_ERRORS_BEFORE_STOP;
  71 | 
  72 |     if (typeof this.opts.errorsBeforeStop !== 'number' || isNaN(this.opts.errorsBeforeStop)) {
  73 |       throw new Error('invalid errorsBeforeStop param, should be number');
  74 |     }
  75 | 
  76 |     this.opts.connectionRetries = this.opts.connectionRetries || DEFAULT_CONNECTIONS_RETRIES;
  77 | 
  78 |     if (typeof this.opts.connectionRetries !== 'number' || isNaN(this.opts.connectionRetries)) {
  79 |       throw new Error('invalid connectionRetries param, should be number');
  80 |     }
  81 | 
  82 |     this.opts.wsReconnect = this.opts.wsReconnect ? this.opts.wsReconnect : WS_TRY_RECONNECT;
  83 | 
  84 |     if (typeof this.opts.wsReconnect !== 'boolean') {
  85 |       throw new Error('invalid wsReconnect param, should be boolean');
  86 |     }
  87 | 
  88 |     this.opts.preferHQ = this.opts.preferHQ ? this.opts.preferHQ : WS_PREFER_HIGH_QUALITY;
  89 | 
  90 |     if (typeof this.opts.preferHQ !== 'boolean') {
  91 |       throw new Error('invalid preferHQ param, should be boolean');
  92 |     }
  93 | 
  94 |     this.opts.onCrashTryVideoOnly = this.opts.onCrashTryVideoOnly || DEFAULT_ON_CRASH_TRY_VIDEO_ONLY;
  95 | 
  96 |     if (typeof this.opts.onCrashTryVideoOnly !== 'boolean') {
  97 |       throw new Error('invalid onCrashTryVideoOnly param, should be boolean');
  98 |     }
  99 | 
 100 |     this.retry = 0;
 101 |     this.retryConnectionTimer;
 102 | 
 103 |     this.opts.retryMuted = this.opts.retryMuted ? this.opts.retryMuted : DEFAULT_RETRY_MUTED;
 104 | 
 105 |     if (typeof this.opts.retryMuted !== 'boolean') {
 106 |       throw new Error('invalid retryMuted param, should be boolean');
 107 |     }
 108 | 
 109 |     this.opts.maxBufferDelay = this.opts.maxBufferDelay ? this.opts.maxBufferDelay : MAX_BUFFER_DELAY;
 110 |     const ua = navigator.userAgent;
 111 |     if (/Edge/.test(ua) || /trident.*rv:1\d/i.test(ua)) {
 112 |       this.opts.maxBufferDelay = 10; // very slow buffers in Edge
 113 |     }
 114 | 
 115 |     if (typeof this.opts.maxBufferDelay !== 'number') {
 116 |       throw new Error('invalid maxBufferDelay param, should be number');
 117 |     }
 118 | 
 119 |     if (this.opts.videoQuality) {
 120 |       if (typeof this.opts.videoQuality !== 'string') {
 121 |         throw new Error('invalid videoQuality param, should be string');
 122 |       }
 123 |       if (this.opts.videoQuality !== 'highest' && this.opts.videoQuality !== 'lowest') {
 124 |         throw new Error('invalid videoQuality param, should be highest or lowest');
 125 |       }
 126 |     }
 127 | 
 128 |     try {
 129 |       this.Sentry = require('@sentry/browser');
 130 |     } catch (e) {
 131 |       this.noSentry = true;
 132 |     }
 133 | 
 134 |     this.opts.sentryConfig = this.opts.sentryConfig ? this.opts.sentryConfig : '';
 135 |     if (typeof this.opts.sentryConfig !== 'string') {
 136 |       throw new Error('invalid sentryConfig param, should be string');
 137 |     }
 138 | 
 139 |     if (this.opts.sentryConfig.length && !this.noSentry) {
 140 |       this.Sentry.init({
 141 |         dsn: this.opts.sentryConfig,
 142 |         environment: process.env.NODE_ENV || 'development',
 143 |         release: 'Mse Player@' + MSEPlayer.version,
 144 |       });
 145 | 
 146 |       document.onerror = (err) => {
 147 |         this.Sentry.captureException(err);
 148 |       };
 149 |     }
 150 | 
 151 |     // Stats block start
 152 |     this.opts.statsSendEnable = this.opts.statsSendEnable ? this.opts.statsSendEnable : DEFAULT_STATS_SEND;
 153 |     if (typeof this.opts.maxBufferDelay !== 'number') {
 154 |       throw new Error('invalid maxBufferDelay param, should be number');
 155 |     }
 156 | 
 157 |     if (window.Worker) {
 158 |       this.statsWorker = new Worker();
 159 |       this.statsWorker.onmessage = this.onStatsWorkerMessage.bind(this);
 160 | 
 161 |       if (this.opts.statsSendTime) {
 162 |         if (typeof this.opts.statsSendTime !== 'number') {
 163 |           throw new Error('invalid statsSendTime param, should be number');
 164 |         }
 165 |         this.statsWorker.postMessage({
 166 |           command: 'time',
 167 |           commandObj: this.opts.statsSendTime * 1000,
 168 |         });
 169 |       }
 170 |       this.statsWorker.postMessage({
 171 |         command: 'start',
 172 |         commandObj: this.url,
 173 |       });
 174 |       this.statsWorkerStarted = true;
 175 |     }
 176 | 
 177 |     this.resetStats = () => {
 178 |       this.playerStatsObject = {
 179 |         proto: 'mseld',
 180 |         user_agent: navigator.userAgent,
 181 |         bytes: 0,
 182 |         // player info
 183 |         application: {
 184 |           application_name: 'mseld_player',
 185 |           application_version: MSEPlayer.version,
 186 |           // counts
 187 |           stall_count: 0,
 188 |           pause_count: 0,
 189 |           error_count: 0,
 190 |           reconnect_count: 0,
 191 |           bitrate_change_count: 0,
 192 |           // durations
 193 |           live_duration: 0,
 194 |           stall_duration: 0,
 195 |           pause_duration: 0,
 196 |           // frames stats
 197 |           total_video_frames: 0,
 198 |           dropped_video_frames: 0,
 199 |           corrupted_video_frames: 0,
 200 |         },
 201 |       };
 202 |       this.addStat(this.playerStatsObject);
 203 |       if (!this.statsWorkerStarted) {
 204 |         this.statsWorker.postMessage({
 205 |           command: 'start',
 206 |           commandObj: this.url,
 207 |         });
 208 |         this.statsWorkerStarted = true;
 209 |       }
 210 |     };
 211 |     // Stats block end
 212 | 
 213 |     this.onProgress = opts && opts.onProgress;
 214 |     if (opts && opts.onDisconnect) {
 215 |       this.onDisconnect = opts && opts.onDisconnect;
 216 |     } else {
 217 |       this.onDisconnect = (status) => {
 218 |         logger.log('[websocket status]:', status);
 219 |       };
 220 |     }
 221 |     this.onMediaInfo = opts && opts.onMediaInfo;
 222 |     this.onError = opts && opts.onError;
 223 |     this.onEventCallback = opts && opts.onEvent;
 224 |     this.onAutoplay = opts && opts.onAutoplay;
 225 |     this.onMuted = opts && opts.onMuted;
 226 |     this.onStats = opts && opts.onStats;
 227 |     this.onMessage = opts && opts.onMessage;
 228 |     this.onPause = opts && opts.onPause;
 229 |     this.onResume = opts && opts.onResume;
 230 | 
 231 |     if (media instanceof HTMLMediaElement) {
 232 |       // iOS autoplay with no fullscreen fix
 233 |       media.WebKitPlaysInline = true;
 234 |       media.controls = false;
 235 |     }
 236 | 
 237 |     this.ws = new WebSocketController({
 238 |       message: this.dispatchMessage.bind(this),
 239 |       closed: this.onDisconnect.bind(this),
 240 |       error: this.onError,
 241 |       wsReconnect: this.opts.wsReconnect,
 242 |     });
 243 | 
 244 |     /*
 245 |      * SourceBuffers Controller
 246 |      */
 247 |     this.sb = new BuffersController({ media });
 248 | 
 249 |     this.messageTime = Date.now();
 250 |     this.init();
 251 |   }
 252 | 
 253 |   play(videoTrack, audioTrack) {
 254 |     logger.log('[mse-player]: play()');
 255 |     if (this.playing) {
 256 |       logger.log('MSE is already playing');
 257 |       return;
 258 |     }
 259 |     if (this.ws && this.ws.websocket && !this._pause) {
 260 |       logger.log('[mse-player]: websocket already opened');
 261 |       return;
 262 |     }
 263 | 
 264 |     return this._play(videoTrack, audioTrack)
 265 |       .then(() => {
 266 |         this.playing = true;
 267 |         this._stop = false;
 268 | 
 269 |         if (this.pendingTracks) {
 270 |           this.setTracks(this.pendingTracks);
 271 |           this.pendingTracks = undefined;
 272 |         }
 273 |       })
 274 |       .catch((error) => {
 275 |         this.onPlayerError(error);
 276 |         logger.error('[mse-player]: got error on play', error);
 277 |         this.playing = false;
 278 |       });
 279 |   }
 280 | 
 281 |   stop() {
 282 |     if (this.playPromise) {
 283 |       this.onEvent({
 284 |         key: Date.now(),
 285 |         data: {
 286 |           event: 'play_stop',
 287 |         },
 288 |       });
 289 |       this.playerStatsObject.closed_at = Date.now();
 290 |       this.addStat({
 291 |         closed_at: this.playerStatsObject.closed_at,
 292 |       });
 293 |       if (this.opts.statsSendEnable) {
 294 |         this.statsWorkerStarted = false;
 295 |       }
 296 | 
 297 |       this.playPromise
 298 |         .catch(() => {
 299 |           if (this.resetTimer) {
 300 |             clearTimeout(this.resetTimer);
 301 |             this.resetTimer = void 0;
 302 |           }
 303 |           if (this._stop) {
 304 |             logger.log('[mse-player]: already stopped');
 305 |             return;
 306 |           }
 307 |           return this.onMediaDetaching();
 308 |         })
 309 |         .finally(() => {
 310 |           if (this.resetTimer) {
 311 |             clearTimeout(this.resetTimer);
 312 |             this.resetTimer = void 0;
 313 |           }
 314 |           if (this._stop) {
 315 |             logger.log('[mse-player]: already stopped');
 316 |             return;
 317 |           }
 318 |           return this.onMediaDetaching();
 319 |         });
 320 |     } else {
 321 |       logger.log('[mse-player]: no playPromise exists, nothing to stop');
 322 |     }
 323 |     this.firstStart = true;
 324 |     delete this.uuid;
 325 |   }
 326 | 
 327 |   pause() {
 328 |     if (!canPause.bind(this)()) {
 329 |       return logger.log('[mse:playback] can not do pause');
 330 |     }
 331 |     const binded = _pause.bind(this);
 332 |     // https://developers.google.com/web/updates/2017/06/play-request-was-interrupted
 333 |     this.playPromise.then(binded, binded).catch(binded, binded);
 334 |     function _pause() {
 335 |       this.ws.pause();
 336 |       this.media.pause();
 337 |       this._pause = true;
 338 |       this.playing = false;
 339 | 
 340 |       this.addPlayerStat('pause_count');
 341 |       this.pauseStarted = Date.now();
 342 | 
 343 |       if (this.onPause) {
 344 |         try {
 345 |           this.onPause();
 346 |         } catch (e) {
 347 |           logger.error('Error ' + e.name + ':' + e.message + '\n' + e.stack);
 348 |         }
 349 |       }
 350 |     }
 351 | 
 352 |     function canPause() {
 353 |       if (
 354 |         this._pause ||
 355 |         !this.playing ||
 356 |         !this.media ||
 357 |         !this.ws ||
 358 |         !this.mediaSource ||
 359 |         (this.mediaSource && this.mediaSource.readyState !== 'open') ||
 360 |         !this.playPromise
 361 |       ) {
 362 |         return false;
 363 |       }
 364 |       return true;
 365 |     }
 366 |   }
 367 | 
 368 |   restart(fullRestart = true) {
 369 |     const from = fullRestart ? undefined : this.sb.lastLoadedUTC;
 370 | 
 371 |     this.playing = false;
 372 |     this.ws.destroy();
 373 |     this.ws.init();
 374 |     this.ws.start(this.url, from, this.videoTrack, this.audioTrack);
 375 | 
 376 |     this.addPlayerStat('reconnect_count');
 377 |     this.onEndStalling();
 378 |   }
 379 | 
 380 |   retryConnection(/*time = null, */ videoTrack = null, audioTrack = null) {
 381 |     if (this.retry >= this.opts.connectionRetries) {
 382 |       clearInterval(this.retryConnectionTimer);
 383 |       return;
 384 |     }
 385 |     logger.log('%cconnectionRetry:', 'background: orange;', `Retrying ${this.retry + 1}`);
 386 |     this.mediaSource = void 0;
 387 |     this.init();
 388 |     this.ws.destroy();
 389 |     this.sb.destroy();
 390 | 
 391 |     this.play(videoTrack, audioTrack).then(() => {
 392 |       this.onEndStalling();
 393 |     });
 394 |     this.retry = this.retry + 1;
 395 |   }
 396 | 
 397 |   setTracks(data) {
 398 |     let tracks = data;
 399 |     if (!this.mediaInfo) {
 400 |       logger.warn('Media info did not loaded. Should try after onMediaInfo triggered or inside.');
 401 |       return;
 402 |     }
 403 | 
 404 |     if (tracks === 'lowest') {
 405 |       tracks = this.autoTrackSelection(false);
 406 |     } else if (tracks === 'highest') {
 407 |       tracks = this.autoTrackSelection(true);
 408 |     } else if (!Array.isArray(tracks)) {
 409 |       logger.error('tracks should be an Array instance: ["v1", "a1"]');
 410 |       return;
 411 |     }
 412 | 
 413 |     if (!this.playing) {
 414 |       this.pendingTracks = tracks;
 415 |       return;
 416 |     }
 417 | 
 418 |     const videoTracksType = this.mediaInfo.streams ? 'streams' : 'tracks';
 419 | 
 420 |     let videoTracksStr = tracks
 421 |       .filter((id) => {
 422 |         const stream = this.mediaInfo[videoTracksType].find((s) => id === s['track_id']);
 423 |         return !!stream && stream.content === TYPE_CONTENT_VIDEO;
 424 |       })
 425 |       .join('');
 426 | 
 427 |     let audioTracksStr = tracks
 428 |       .filter((id) => {
 429 |         const stream = this.mediaInfo[videoTracksType].find((s) => id === s['track_id']);
 430 |         if (stream) {
 431 |           // if (stream.bitrate && stream.bitrate === 0) {
 432 |           //   return null
 433 |           // }
 434 |           return !!stream && stream.content === TYPE_CONTENT_AUDIO;
 435 |         } else {
 436 |           return null;
 437 |         }
 438 |       })
 439 |       .join('');
 440 | 
 441 |     if (!audioTracksStr.length && !videoTracksStr.length) {
 442 |       logger.warn('No such stream tracks! Setting to default parameters');
 443 |       const videoTracks = this.getVideoTracks();
 444 |       const audioTracks = this.getAudioTracks();
 445 |       if (audioTracks.length) {
 446 |         audioTracksStr = audioTracks[0].track_id;
 447 |       } else {
 448 |         logger.warn('No audio tracks');
 449 |       }
 450 |       if (videoTracks.length) {
 451 |         // Добавить адаптивный выбор видео дорожки?
 452 |         videoTracksStr = videoTracks[0].track_id;
 453 |       } else {
 454 |         logger.warn('No video tracks');
 455 |       }
 456 |     }
 457 | 
 458 |     if (!audioTracksStr.length) {
 459 |       if (this.sb.sourceBuffer.audio) {
 460 |         this.sb.removeSourceBuffer();
 461 |       }
 462 |       this.media.muted = true;
 463 |       logger.warn('No audio tracks');
 464 |     }
 465 | 
 466 |     if (videoTracksStr.length && audioTracksStr.length && this.mediaSource.sourceBuffers.length <= 1) {
 467 |       this.stop();
 468 |       this.media.muted = false;
 469 |       this.play();
 470 |     }
 471 | 
 472 |     this.onStartStalling();
 473 |     this.ws.setTracks(videoTracksStr, audioTracksStr);
 474 | 
 475 |     this.addPlayerStat('bitrate_change_count');
 476 | 
 477 |     this.videoTrack = videoTracksStr;
 478 |     this.audioTrack = audioTracksStr;
 479 |     // ?
 480 |     this._setTracksFlag = true;
 481 |     this.waitForInitFrame = true;
 482 |   }
 483 | 
 484 |   autoTrackSelection(bestestBest) {
 485 |     if (!this.mediaInfo) {
 486 |       logger.warn('Media info did not loaded. Should try after onMediaInfo triggered or inside.');
 487 |       return;
 488 |     }
 489 |     const videoTracks = this.getVideoTracks();
 490 |     const audioTracks = this.getAudioTracks();
 491 | 
 492 |     let resultVideo, resultAudio;
 493 |     if (bestestBest) {
 494 |       let bestVideo, videoParam;
 495 |       if (videoTracks[0].bitrate) {
 496 |         videoParam = 'bitrate';
 497 |       } else if (videoTracks[0].pixel_width) {
 498 |         videoParam = 'pixel_width';
 499 |       }
 500 |       bestVideo = videoTracks[0][videoParam];
 501 |       resultVideo = videoTracks[0].track_id;
 502 |       videoTracks.forEach((track) => {
 503 |         if (track[videoParam] > bestVideo) {
 504 |           bestVideo = track[videoParam];
 505 |           resultVideo = track.track_id;
 506 |         }
 507 |       });
 508 |       if (audioTracks.length) {
 509 |         // let bestAudio = audioTracks[0].sample_rate;
 510 |         resultAudio = audioTracks[0].track_id;
 511 |         audioTracks.forEach((track) => {
 512 |           if (track.sample_rate > bestVideo) {
 513 |             // bestAudio = track.sample_rate;
 514 |             resultAudio = track.track_id;
 515 |           }
 516 |         });
 517 |       }
 518 |     } else {
 519 |       let worstVideo, videoParam;
 520 |       if (videoTracks[0].bitrate) {
 521 |         videoParam = 'bitrate';
 522 |       } else if (videoTracks[0].pixel_width) {
 523 |         videoParam = 'pixel_width';
 524 |       }
 525 |       worstVideo = videoTracks[0][videoParam];
 526 |       resultVideo = videoTracks[0].track_id;
 527 |       videoTracks.forEach((track) => {
 528 |         if (track[videoParam] < worstVideo) {
 529 |           worstVideo = track[videoParam];
 530 |           resultVideo = track.track_id;
 531 |         }
 532 |       });
 533 |       if (audioTracks.length) {
 534 |         let worstAudio;
 535 |         worstAudio = audioTracks[0].sample_rate;
 536 |         resultAudio = audioTracks[0].track_id;
 537 |         audioTracks.forEach((track) => {
 538 |           if (track.sample_rate < worstAudio) {
 539 |             worstAudio = track.sample_rate;
 540 |             resultAudio = track.track_id;
 541 |           }
 542 |         });
 543 |       }
 544 |     }
 545 | 
 546 |     const resultData = [];
 547 |     if (resultVideo && resultVideo.length) {
 548 |       resultData.push(resultVideo);
 549 |     }
 550 |     if (resultAudio && resultAudio.length) {
 551 |       resultData.push(resultAudio);
 552 |     }
 553 |     return resultData;
 554 |   }
 555 | 
 556 |   /**
 557 |    *
 558 |    *  Private members
 559 |    *
 560 |    */
 561 | 
 562 |   _play(videoTrack, audioTrack) {
 563 |     this.liveError = false;
 564 |     return new Promise((resolve, reject) => {
 565 |       logger.log('_play', videoTrack, audioTrack);
 566 |       if (this.playing) {
 567 |         const message = '[mse-player] _play: terminate because already has been playing';
 568 |         logger.log(message);
 569 |         return resolve({ message });
 570 |       }
 571 | 
 572 |       if (this._pause) {
 573 |         // should invoke play method of video in onClick scope
 574 |         // further logic are duplicated at checkVideoProgress
 575 |         // https://github.com/jwplayer/jwplayer/issues/2421#issuecomment-333130812
 576 | 
 577 |         if (this.ws && this.ws.opened === false) {
 578 |           logger.log('WebSocket Closed, trying to restart it');
 579 |           this._pause = false;
 580 |           this.restart(true);
 581 |           return;
 582 |         } else {
 583 |           logger.log('WebSocket is in opened state, resuming');
 584 |           this._pause = false;
 585 |           this._resume(); // ws
 586 |           if (this.pauseStarted) {
 587 |             const { application } = this.playerStatsObject;
 588 |             if (application) {
 589 |               let { pause_duration } = application;
 590 |               pause_duration += Date.now() - this.pauseStarted;
 591 |               this.addPlayerStat('pause_duration', false, pause_duration);
 592 |               delete this.pauseStarted;
 593 |             }
 594 |           }
 595 |         }
 596 | 
 597 |         this.playPromise = this.media.play();
 598 |         logger.log('_play: terminate because _paused and should resume');
 599 |         return this.playPromise;
 600 |       }
 601 | 
 602 |       this.resetStats();
 603 |       this.playerStatsObject.opened_at = Date.now();
 604 |       this.uuid = this.generateUUID();
 605 |       this.addStat({ opened_at: this.playerStatsObject.opened_at, id: this.uuid });
 606 | 
 607 |       this.videoTrack = videoTrack;
 608 |       this.audioTrack = audioTrack;
 609 |       this._pause = false;
 610 | 
 611 |       // TODO: to observe this case, I have no idea when it fired
 612 |       if (!this.mediaSource) {
 613 |         this.onAttachMedia({ media: this.media }).then(() => {
 614 |           this.onsoa = this._play.bind(this, videoTrack, audioTrack);
 615 |           this.sb.setMediaSource(this.mediaSource);
 616 |           this.mediaSource.addEventListener(EVENTS.MEDIA_SOURCE_SOURCE_OPEN, this.onsoa);
 617 |           logger.warn('mediaSource did not create');
 618 |           this.resolveThenMediaSourceOpen = this.resolveThenMediaSourceOpen ? this.resolveThenMediaSourceOpen : resolve;
 619 |           this.rejectThenMediaSourceOpen = this.rejectThenMediaSourceOpen ? this.rejectThenMediaSourceOpen : reject;
 620 |           return;
 621 |         });
 622 |       }
 623 | 
 624 |       // deferring execution
 625 |       if (this.mediaSource && this.mediaSource.readyState !== 'open') {
 626 |         logger.warn('readyState is not "open", it\'s currently ', this.mediaSource.readyState);
 627 |         this.shouldPlay = true;
 628 |         this.resolveThenMediaSourceOpen = this.resolveThenMediaSourceOpen ? this.resolveThenMediaSourceOpen : resolve;
 629 |         this.rejectThenMediaSourceOpen = this.rejectThenMediaSourceOpen ? this.rejectThenMediaSourceOpen : reject;
 630 |         return;
 631 |       }
 632 | 
 633 |       const ifApple = function () {
 634 |         let iDevices = ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod', 'Safari'];
 635 | 
 636 |         if (navigator.platform) {
 637 |           while (iDevices.length) {
 638 |             if (navigator.platform === iDevices.pop()) {
 639 |               return true;
 640 |             }
 641 |           }
 642 |         }
 643 | 
 644 |         return false;
 645 |       };
 646 | 
 647 |       // for autoplay on interaction
 648 |       const autoPlayFunc = new Promise((resolve, reject) => {
 649 |         if (this.media.autoplay && this.media.muted !== true && !this.opts.retryMuted) {
 650 |           if (this.onAutoplay && !ifApple()) {
 651 |             this.onAutoplay(() => {
 652 |               this.media.muted = false;
 653 |               return resolve();
 654 |             });
 655 |           } else {
 656 |             this.media.muted = true;
 657 |             return resolve();
 658 |           }
 659 |         } else {
 660 |           return resolve();
 661 |         }
 662 |         reject();
 663 |       });
 664 | 
 665 |       autoPlayFunc.then(() => {
 666 |         this.ws.start(this.url, this.playTime, this.videoTrack, this.audioTrack).then(() => {
 667 |           // https://developers.google.com/web/updates/2017/06/play-request-was-interrupted
 668 |           this.playPromise = this.media.play();
 669 |           this.playPromise
 670 |             .then(() => {
 671 |               this.onStartStalling(); // switch off at progress checker
 672 |               this.startProgressTimer();
 673 |               if (this.resolveThenMediaSourceOpen) {
 674 |                 this._stop = false;
 675 |                 this.resolveThenMediaSourceOpen();
 676 |                 this.resolveThenMediaSourceOpen = void 0;
 677 |                 this.rejectThenMediaSourceOpen = void 0;
 678 |                 clearInterval(this.retryConnectionTimer);
 679 |                 this.retry = 0;
 680 |               }
 681 |               this.onEvent({
 682 |                 key: Date.now(),
 683 |                 data: {
 684 |                   event: 'play_started',
 685 |                 },
 686 |               });
 687 |             })
 688 |             .catch((err) => {
 689 |               logger.log('playPromise rejection.', err);
 690 |               // if error, this.ws.connectionPromise can be undefined
 691 |               if (this.ws.connectionPromise) {
 692 |                 this.ws.connectionPromise.then(() => this.ws.destroy()); // #6694
 693 |               }
 694 | 
 695 |               if (this.opts.retryMuted && this.media.muted == false) {
 696 |                 if (this.onMuted) {
 697 |                   this.onMuted();
 698 |                 }
 699 |                 this.media.muted = true;
 700 |                 this._play(/*from, */ videoTrack, audioTrack);
 701 |               }
 702 | 
 703 |               this.onPlayerError({
 704 |                 error: 'play_promise_reject',
 705 |                 err,
 706 |               });
 707 | 
 708 |               if (this.rejectThenMediaSourceOpen) {
 709 |                 this.rejectThenMediaSourceOpen();
 710 |                 this.resolveThenMediaSourceOpen = void 0;
 711 |                 this.rejectThenMediaSourceOpen = void 0;
 712 |               }
 713 | 
 714 |               if (!this.opts.retryMuted) {
 715 |                 this.stop();
 716 |               }
 717 | 
 718 |               if (this.opts.onCrashTryVideoOnly) {
 719 |                 const { activeStreams } = this.mediaInfo;
 720 |                 const { video } = activeStreams;
 721 |                 if (video) {
 722 |                   this._play(video);
 723 |                 }
 724 |               }
 725 |             });
 726 | 
 727 |           return this.playPromise;
 728 |         });
 729 |       });
 730 |     });
 731 |   }
 732 | 
 733 |   init(fromStop = false) {
 734 |     this._pause = false;
 735 |     this.playing = false;
 736 |     // flag to pending execution(true)
 737 |     this.shouldPlay = false;
 738 |     // store to execute pended method play
 739 |     // this.playTime = void 0
 740 |     this.audioTrack = '';
 741 |     this.videoTrack = '';
 742 |     this.endProgressTimer();
 743 | 
 744 |     if (!fromStop) {
 745 |       this.onEvent({
 746 |         key: Date.now(),
 747 |         data: {
 748 |           event: 'play_init',
 749 |           userInfo: window.navigator.userAgent,
 750 |           playerInfo: `MSEPlayer${MSEPlayer.version ? `@${MSEPlayer.version}` : ''}`,
 751 |         },
 752 |       });
 753 |     }
 754 |   }
 755 | 
 756 |   _resume() {
 757 |     this.ws.resume();
 758 | 
 759 |     this.onEvent({
 760 |       key: Date.now(),
 761 |       data: {
 762 |         event: 'play_websocket_resume',
 763 |       },
 764 |     });
 765 |   }
 766 | 
 767 |   onMediaDetaching() {
 768 |     if (this.stopRunning) {
 769 |       logger.warn('stop is running.');
 770 |       return;
 771 |     }
 772 |     this.stopRunning = true;
 773 |     // workaround pending playPromise state
 774 |     // TODO: how to be with pending internal statuses
 775 |     // https://developers.google.com/web/updates/2017/06/play-request-was-interrupted
 776 |     // const bindedMD =
 777 |     this.handlerMediaDetaching.bind(this);
 778 |     if (this.playPromise) {
 779 |       // there are two cases:
 780 |       // resolved/rejected
 781 |       // both required to shutdown ws, mediasources and etc.
 782 |       this.playPromise
 783 |         .catch(() => {
 784 |           return this.handlerMediaDetaching();
 785 |         })
 786 |         .finally(() => {
 787 |           return this.handlerMediaDetaching();
 788 |         });
 789 |     } else {
 790 |       return this.handlerMediaDetaching();
 791 |     }
 792 |   }
 793 | 
 794 |   handlerMediaDetaching() {
 795 |     logger.info('media source detaching');
 796 |     return new Promise((resolve, reject) => {
 797 |       // destroy media source and detach from media element
 798 |       this.removeMediaSource();
 799 |       if (!this.media) {
 800 |         return reject('no media to detach');
 801 |       }
 802 |       this.removeListeners();
 803 |       this.oncvp = null;
 804 |       this.mediaSource = null;
 805 | 
 806 |       this.init(true);
 807 |       this.ws.destroy();
 808 |       this.sb.destroy();
 809 |       this.media.onemptied = () => {
 810 |         logger.log('[mse-player]: media emptied');
 811 |         this.stopRunning = false;
 812 |         this._stop = true;
 813 |         delete this.playPromise;
 814 |         return resolve();
 815 |       };
 816 |     });
 817 |   }
 818 | 
 819 |   removeMediaSource() {
 820 |     const ms = this.mediaSource;
 821 |     if (ms) {
 822 |       if (ms.readyState === 'open') {
 823 |         try {
 824 |           // endOfStream could trigger exception if any sourcebuffer is in updating state
 825 |           // we don't really care about checking sourcebuffer state here,
 826 |           // as we are anyway detaching the MediaSource
 827 |           // let's just avoid this exception to propagate
 828 |           ms.endOfStream();
 829 |         } catch (err) {
 830 |           logger.warn(`onMediaDetaching:${err.message} while calling endOfStream`);
 831 |         }
 832 |       }
 833 | 
 834 |       ms.removeEventListener(EVENTS.MEDIA_SOURCE_SOURCE_OPEN, this.onmso);
 835 |       ms.removeEventListener(EVENTS.MEDIA_SOURCE_SOURCE_ENDED, this.onmse);
 836 |       ms.removeEventListener(EVENTS.MEDIA_SOURCE_SOURCE_CLOSE, this.onmsc);
 837 |       this.onmso = null;
 838 |       this.onmse = null;
 839 |       this.onmsc = null;
 840 |     }
 841 | 
 842 |     // Detach properly the MediaSource from the HTMLMediaElement as
 843 |     // suggested in https://github.com/w3c/media-source/issues/53.
 844 |     // URL.revokeObjectURL(this.media.src)
 845 |     const close = () => {
 846 |       this.media.src = '';
 847 |       this.media.load();
 848 |       if (this.resetTimer) {
 849 |         clearTimeout(this.resetTimer);
 850 |         this.resetTimer = void 0;
 851 |       }
 852 |     };
 853 | 
 854 |     this.playPromise &&
 855 |       this.playPromise
 856 |         .then(() => {
 857 |           close();
 858 |         })
 859 |         .catch(() => {
 860 |           close();
 861 |         });
 862 |   }
 863 | 
 864 |   onMediaElementEmptied(resolve) {
 865 |     if (this.onMediaElementEmptied && this.media) {
 866 |       this.media.removeEventListener(EVENTS.MEDIA_ELEMENT_EMPTIED, this.onMediaElementEmptied);
 867 |       this._onmee = void 0;
 868 |     }
 869 |     return resolve;
 870 |   }
 871 | 
 872 |   onAttachMedia(data) {
 873 |     this.media = data.media;
 874 |     const media = this.media;
 875 |     if (!(media instanceof HTMLMediaElement)) {
 876 |       throw new Error(MSG.NOT_HTML_MEDIA_ELEMENT);
 877 |     }
 878 |     if (media) {
 879 |       // setup the media source
 880 |       const ms = (this.mediaSource = new MediaSource());
 881 |       // Media Source listeners
 882 |       this.onmse = this.onMediaSourceEnded.bind(this);
 883 |       this.onmsc = this.onMediaSourceClose.bind(this);
 884 | 
 885 |       ms.addEventListener(EVENTS.MEDIA_SOURCE_SOURCE_ENDED, this.onmse);
 886 |       ms.addEventListener(EVENTS.MEDIA_SOURCE_SOURCE_CLOSE, this.onmsc);
 887 |       // link video and media Source
 888 |       media.src = URL.createObjectURL(ms);
 889 |       this.eventLog = (event) => {
 890 |         if (this.onEvent) {
 891 |           this.onEvent(event);
 892 |         }
 893 |       };
 894 |       this.addListeners();
 895 | 
 896 |       if (this.liveError) {
 897 |         this.player = void 0;
 898 |         return;
 899 |       }
 900 |       return new Promise((resolve) => {
 901 |         this.onmso = this.onMediaSourceOpen.bind(this, resolve);
 902 |         ms.addEventListener(EVENTS.MEDIA_SOURCE_SOURCE_OPEN, this.onmso);
 903 |       });
 904 |     }
 905 |   }
 906 | 
 907 |   onMediaSourceOpen(resolve) {
 908 |     resolve();
 909 |     let mediaSource = this.mediaSource;
 910 |     if (mediaSource) {
 911 |       // once received, don't listen anymore to sourceopen event
 912 |       mediaSource.removeEventListener(EVENTS.MEDIA_SOURCE_SOURCE_OPEN, this.onmso);
 913 |     }
 914 | 
 915 |     URL.revokeObjectURL(this.media.src);
 916 | 
 917 |     // play was called but stoped and was pend(1.readyState is not open)
 918 |     // and time is come to execute it
 919 |     if (this.shouldPlay) {
 920 |       this.shouldPlay = false;
 921 |       logger.info(
 922 |         `readyState now is ${this.mediaSource.readyState}, and will be played`,
 923 |         // this.playTime,
 924 |         this.audioTrack,
 925 |         this.videoTrack
 926 |       );
 927 |       this._play(/*this.playTime, */ this.audioTrack, this.videoTrack);
 928 |     }
 929 |   }
 930 | 
 931 |   onDisconnect(event) {
 932 |     this.onEvent({
 933 |       key: Date.now(),
 934 |       data: {
 935 |         event: 'play_diconnected',
 936 |       },
 937 |     });
 938 |     if (this.opts.onDisconnect) {
 939 |       this.opts.onDisconnect(event);
 940 |     }
 941 |   }
 942 | 
 943 |   // canStartUnmuted() {
 944 |   //   if (!this.playing && this.shouldPlay) {
 945 |   //     this.shouldPlay = false
 946 |   //     this._play(this.playTime, this.audioTrack, this.videoTrack).then(() => {
 947 |   //       this.media.muted = false
 948 |   //       window.removeEventListener('click', this.canStartUnmuted)
 949 |   //       window.removeEventListener('touchstart', this.canStartUnmuted)
 950 |   //     })
 951 |   //   }
 952 |   // }
 953 | 
 954 |   dispatchMessage(data) {
 955 |     if (this.stopRunning) {
 956 |       return;
 957 |     }
 958 | 
 959 |     if (!this.playerStatsObject.first_byte_at) {
 960 |       this.playerStatsObject.first_byte_at = Date.now();
 961 |       this.addStat({ first_byte_at: this.playerStatsObject.first_byte_at });
 962 |     }
 963 | 
 964 |     const { rawData, parsedData, isDataAB } = data;
 965 |     // mseUtils.logDM(isDataAB, parsedData)
 966 | 
 967 |     try {
 968 |       // ArrayBuffer data
 969 |       if (isDataAB) {
 970 |         // wait for MSE_INIT_SEGMENT
 971 |         if (this.waitForInitFrame) {
 972 |           return logger.log('old frames');
 973 |         }
 974 |         this.sb.procArrayBuffer(rawData);
 975 |       }
 976 | 
 977 |       /*
 978 |        * EVENTS
 979 |        */
 980 |       if (parsedData && parsedData.type === EVENT_SEGMENT) {
 981 |         const eventType = parsedData[EVENT_SEGMENT];
 982 |         logger.log(
 983 |           `%c ${parsedData.type} ${parsedData.type === 'event' ? parsedData.event : 'mse_init_segment'}`,
 984 |           'background: aquamarine;',
 985 |           parsedData
 986 |         );
 987 |         switch (eventType) {
 988 |           case WS_EVENT_RESUMED:
 989 |             if (this._pause && !this.playing) {
 990 |               // wait for "progress" event, for shift currentTime and start playing
 991 |               this.onStartStalling();
 992 |             }
 993 |             this.onResume && this.onResume();
 994 |             break;
 995 |           case WS_EVENT_PAUSED:
 996 |             break;
 997 |           case WS_EVENT_SEEKED:
 998 |           case WS_EVENT_SWITCHED_TO_LIVE:
 999 |             this.seekValue = void 0;
1000 |             if (this.opts.onSeeked) {
1001 |               try {
1002 |                 this.opts.onSeeked();
1003 |               } catch (err) {
1004 |                 logger.error(err);
1005 |               }
1006 |             }
1007 |             break;
1008 |           case WS_EVENT_EOS:
1009 |             this._eos = true;
1010 |             this.sb.onBufferEos();
1011 |             break;
1012 |           // if live source is unavailability
1013 |           case WS_EVENT_NO_LIVE:
1014 |             if ('static' in parsedData && parsedData.static == false) {
1015 |               logger.info('Stream is on on demand mode, waiting for init segment');
1016 |               this.onStartStalling();
1017 |             } else {
1018 |               logger.warn('do playPromise reject with error');
1019 |               if (this.ws.connectionPromise) {
1020 |                 this.ws.connectionPromise.then(() => this.ws.pause()); // #6694
1021 |               }
1022 |               if (!this.liveError) {
1023 |                 this.onPlayerError({
1024 |                   error: 'playPromise reject - stream unavaible',
1025 |                 });
1026 |                 this.liveError = true;
1027 |               }
1028 | 
1029 |               if (this.rejectThenMediaSourceOpen) {
1030 |                 this.rejectThenMediaSourceOpen();
1031 |                 this.resolveThenMediaSourceOpen = void 0;
1032 |                 this.rejectThenMediaSourceOpen = void 0;
1033 |               }
1034 |               this.playPromise = Promise.reject('stream unavaible');
1035 |               this.mediaSource.endOfStream();
1036 |             }
1037 |             break;
1038 |           case WS_EVENT_TRACKS_SWITCHED:
1039 |             break;
1040 |           default:
1041 |             if (this.opts.onEvent) {
1042 |               this.opts.onEvent({ error: 'unhandled_event', event: eventType });
1043 |             }
1044 |             logger.warn('unknown type of event', eventType);
1045 |         }
1046 |         return;
1047 |       }
1048 |       // MSE_INIT_SEGMENT
1049 |       if (parsedData && parsedData.type === MSE_INIT_SEGMENT) {
1050 |         return this.procInitSegment(rawData);
1051 |       }
1052 |     } catch (err) {
1053 |       mseUtils.showDispatchError.bind(this)(err);
1054 |       try {
1055 |         if (this.media.error) {
1056 |           this.onPlayerError({
1057 |             error: 'Media error',
1058 |             mediaError: this.media.error,
1059 |           });
1060 |           this.stop();
1061 |         } else {
1062 |           if (this.mediaInfo && this.mediaInfo.activeStreams) {
1063 |             const { activeStreams } = this.mediaInfo;
1064 |             this.setTracks([
1065 |               activeStreams.video ? activeStreams.video : '',
1066 |               activeStreams.audio ? activeStreams.audio : '',
1067 |             ]);
1068 |           }
1069 |         }
1070 |       } catch (err) {
1071 |         this.ws.pause();
1072 |       }
1073 |     }
1074 |   }
1075 | 
1076 |   procInitSegment(rawData) {
1077 |     const data = JSON.parse(rawData);
1078 | 
1079 |     if (data.type !== MSE_INIT_SEGMENT) {
1080 |       return logger.warn(`type is not ${MSE_INIT_SEGMENT}`);
1081 |     }
1082 | 
1083 |     if (this.waitForInitFrame) {
1084 |       this.waitForInitFrame = false;
1085 |     }
1086 | 
1087 |     if (this.resetTimer) {
1088 |       clearTimeout(this.resetTimer);
1089 |       this.resetTimer = void 0;
1090 |     }
1091 | 
1092 |     if (this.sb.isBuffered()) {
1093 |       // this.media.pause()
1094 |       // this.previouslyPaused = false
1095 |       // this._setTracksFlag = true
1096 |       // this.immediateSwitch = true
1097 |       // const startOffset = 0
1098 |       // const endOffset = Infinity
1099 |       // // TODO: should invoke remove method of SourceBuffer's
1100 |       // this.sb.flushRange.push({start: startOffset, end: endOffset, type: void 0})
1101 |       // // attempt flush immediately
1102 |       // this.sb.flushBufferCounter = 0
1103 |       this.sb.doFlush();
1104 |       this.sb.seek();
1105 |     }
1106 | 
1107 |     // calc this.audioTrackId this.videoTrackId
1108 |     this.sb.setTracksByType(data);
1109 | 
1110 |     const metadata = {
1111 |       ...data.metadata,
1112 |       tracks: data.metadata.streams ? data.metadata.streams : data.metadata.tracks,
1113 |       streams: data.metadata.streams ? data.metadata.streams : data.metadata.tracks,
1114 |     };
1115 | 
1116 |     let streams = data.metadata.streams;
1117 |     if (data.metadata.tracks) {
1118 |       streams = data.metadata.tracks;
1119 |     }
1120 | 
1121 |     const activeStreams = {};
1122 | 
1123 |     const videoIndex = this.sb.videoTrackId && this.sb.videoTrackId.id - 1;
1124 |     if (streams[videoIndex] && streams[videoIndex]['track_id']) {
1125 |       if (
1126 |         (streams[videoIndex].bitrate && streams[videoIndex].bitrate === 0) ||
1127 |         streams[videoIndex].height === 0 ||
1128 |         streams[videoIndex].width === 0
1129 |       ) {
1130 |         this.onPlayerError({
1131 |           error: 'Video track error',
1132 |         });
1133 |         return;
1134 |       }
1135 |       activeStreams.video = streams[videoIndex]['track_id'];
1136 |     }
1137 | 
1138 |     const audioIndex = this.sb.audioTrackId && this.sb.audioTrackId.id - 1;
1139 |     if (audioIndex) {
1140 |       if (streams[audioIndex] && streams[audioIndex]['track_id']) {
1141 |         if (streams[audioIndex].bitrate && streams[audioIndex].bitrate === 0) {
1142 |           this.onPlayerError({
1143 |             error: 'Audio track error',
1144 |           });
1145 |           let idToDelete;
1146 |           data.tracks.forEach((item, index) => {
1147 |             if (item.id === this.sb.audioTrackId.id) {
1148 |               idToDelete = index;
1149 |             }
1150 |           });
1151 |           data.tracks.splice(idToDelete, 1);
1152 |           if (this.sb.sourceBuffer.audio) {
1153 |             this.mediaSource.removeSourceBuffer(this.sb.sourceBuffer.audio);
1154 |             // this.sb.audioTrackId = void 0
1155 |             delete this.sb.sourceBuffer.audio;
1156 |           }
1157 |         } else {
1158 |           activeStreams.audio = streams[audioIndex]['track_id'];
1159 |         }
1160 |       }
1161 |     }
1162 | 
1163 |     const activeInfo = { ...metadata, activeStreams, version: MSEPlayer.version };
1164 |     this.playerStatsObject.source_id = data.session_id;
1165 |     this.addStat({ source_id: this.playerStatsObject.source_id });
1166 |     this.doMediaInfo(activeInfo);
1167 |     logger.log('%cprocInitSegment:', 'background: lightpink;', data);
1168 |     this.onEvent({
1169 |       key: Date.now(),
1170 |       data: {
1171 |         event: 'play_metadata',
1172 |         ...activeInfo,
1173 |       },
1174 |     });
1175 | 
1176 |     if (this.mediaSource && !this.mediaSource.sourceBuffers.length) {
1177 |       this.sb.setMediaSource(this.mediaSource);
1178 |       this.sb.createSourceBuffers(data);
1179 |     }
1180 |     if (!this.liveError) {
1181 |       this.sb.createTracks(data.tracks);
1182 |     }
1183 | 
1184 |     if (this.opts.videoQuality && this.firstStart) {
1185 |       let selectedTracks;
1186 |       if (this.opts.videoQuality === 'lowest') {
1187 |         selectedTracks = this.autoTrackSelection(false);
1188 |       } else if (this.opts.videoQuality === 'highest') {
1189 |         selectedTracks = this.autoTrackSelection(true);
1190 |       }
1191 |       if (
1192 |         selectedTracks[0] !== activeStreams.video ||
1193 |         (activeStreams.audio && selectedTracks[1] !== activeStreams.audio)
1194 |       ) {
1195 |         this.ws.setTracks(selectedTracks[0] || '', selectedTracks[1] || '');
1196 |         return;
1197 |       }
1198 |       this.firstStart = false;
1199 |     }
1200 | 
1201 |     if (this.opts.preferHQ) {
1202 |       logger.info('[MSE]: preferHQ option is depricated. Use videoQuality(lowest/highest) instead');
1203 |     }
1204 | 
1205 |     this.ws.resume();
1206 |   }
1207 | 
1208 |   doMediaInfo(metadata) {
1209 |     logger.log('%cmediaInfo:', 'background: orange;', metadata);
1210 |     this.mediaInfo = metadata;
1211 |     if (this.onMediaInfo) {
1212 |       try {
1213 |         this.onMediaInfo(metadata);
1214 |       } catch (e) {
1215 |         logger.error(mseUtils.errorMsg(e));
1216 |       }
1217 |     }
1218 |   }
1219 | 
1220 |   getVideoTracks() {
1221 |     if (!this.mediaInfo) {
1222 |       return;
1223 |     }
1224 |     const videoTracksType = this.mediaInfo.streams ? 'streams' : 'tracks';
1225 |     return this.mediaInfo[videoTracksType].filter((s) => s.content === TYPE_CONTENT_VIDEO);
1226 |   }
1227 | 
1228 |   getAudioTracks() {
1229 |     if (!this.mediaInfo) {
1230 |       return;
1231 |     }
1232 |     const videoTracksType = this.mediaInfo.streams ? 'streams' : 'tracks';
1233 |     return this.mediaInfo[videoTracksType].filter((s) => s.content === TYPE_CONTENT_AUDIO);
1234 |   }
1235 | 
1236 |   /**
1237 |    * on immediate level switch end, after new fragment has been buffered:
1238 |    * - nudge video decoder by slightly adjusting video currentTime (if currentTime buffered)
1239 |    * - resume the playback if needed
1240 |    */
1241 |   immediateLevelSwitchEnd() {
1242 |     const media = this.media;
1243 |     if (media && media.buffered.length) {
1244 |       this.immediateSwitch = false;
1245 |       // if (BufferHelper.isBuffered(media, media.currentTime)) {
1246 |       // only nudge if currentTime is buffered
1247 |       // media.currentTime -= 0.0001;
1248 |       // }
1249 |       if (!this.previouslyPaused) {
1250 |         this.playPromise = media.play();
1251 |         this.playPromise.then(() => {
1252 |           this._pause = false;
1253 |           this.playing = true;
1254 |         });
1255 |       }
1256 |     }
1257 |   }
1258 | 
1259 |   onStartStalling() {
1260 |     if (this._pause) return;
1261 |     if (!this.resetTimer) {
1262 |       this.resetTimer = setTimeout(() => {
1263 |         this.restart();
1264 |       }, 60000);
1265 |     }
1266 | 
1267 |     if (this._stalling) return;
1268 |     if (this.opts.onStartStalling) {
1269 |       this.opts.onStartStalling();
1270 |     }
1271 |     this._stalling = true;
1272 |     logger.log('onStartStalling');
1273 | 
1274 |     if (this.playerStatsObject.started_at) {
1275 |       this.addPlayerStat('stall_count');
1276 |       this.startStallingTime = Date.now();
1277 |     }
1278 |     this.onEvent({
1279 |       key: Date.now(),
1280 |       data: {
1281 |         event: 'play_stalled',
1282 |       },
1283 |     });
1284 |   }
1285 | 
1286 |   onEndStalling() {
1287 |     if (!this._stalling) return;
1288 |     if (this.opts.onEndStalling) {
1289 |       this.opts.onEndStalling();
1290 |     }
1291 |     this._stalling = false;
1292 |     logger.log('onEndStalling');
1293 | 
1294 |     clearTimeout(this.resetTimer);
1295 |     this.resetTimer = void 0;
1296 | 
1297 |     if (this.startStallingTime) {
1298 |       const { application } = this.playerStatsObject;
1299 |       if (application) {
1300 |         let { stall_duration } = application;
1301 |         stall_duration += Date.now() - this.startStallingTime;
1302 |         this.startStallingTime = null;
1303 |         this.addPlayerStat('stall_duration', false, stall_duration);
1304 |       }
1305 |     }
1306 | 
1307 |     this.onEvent({
1308 |       key: Date.now(),
1309 |       data: {
1310 |         event: 'play_resumed',
1311 |       },
1312 |     });
1313 |   }
1314 | 
1315 |   startProgressTimer() {
1316 |     this.timer = setInterval(this.onTimer.bind(this), this.opts.progressUpdateTime);
1317 |   }
1318 | 
1319 |   endProgressTimer() {
1320 |     clearInterval(this.timer);
1321 |     this.timer = void 0;
1322 |   }
1323 | 
1324 |   onTimer() {
1325 |     if (this._eos) {
1326 |       return logger.log('nothing to play');
1327 |     }
1328 | 
1329 |     // #TODO explain
1330 |     if (this.immediateSwitch) {
1331 |       this.immediateLevelSwitchEnd();
1332 |     }
1333 | 
1334 |     if (this.sb.lastLoadedUTC === this.utcPrev) {
1335 |       // logger.log('%cloaded utc is not change', 'background: orange;', this.sb.lastLoadedUTC, this.utcPrev, this._stalling)
1336 |       return;
1337 |     }
1338 | 
1339 |     if (this._stalling) {
1340 |       // logger.log('%cStalling flag is true', 'background: lightred;')
1341 |       return;
1342 |     }
1343 | 
1344 |     this.utcPrev = this.sb.lastLoadedUTC;
1345 | 
1346 |     if (!this.onProgress) {
1347 |       return;
1348 |     }
1349 |     try {
1350 |       this.onProgress(this.sb.lastLoadedUTC);
1351 |     } catch (e) {
1352 |       logger.error(mseUtils.errorMsg(e));
1353 |     }
1354 |   }
1355 | 
1356 |   onMediaSourceEnded() {
1357 |     logger.log('media source ended');
1358 |     try {
1359 |       if (this.opts.onEOS) {
1360 |         this.opts.onEOS();
1361 |       }
1362 |     } catch (err) {
1363 |       logger.error('error while proccessing onEOS');
1364 |     }
1365 |   }
1366 | 
1367 |   onMediaSourceClose() {
1368 |     logger.log('media source closed');
1369 |   }
1370 | 
1371 |   onConnectionRetry() {
1372 |     if (!this.retryConnectionTimer && !this._stop) {
1373 |       if (this.retry < this.opts.connectionRetries) {
1374 |         this.retryConnectionTimer = setInterval(() => this.retryConnection(), 5000);
1375 |       }
1376 |     } else if (this.retry >= this.opts.connectionRetries) {
1377 |       clearInterval(this.retryConnectionTimer);
1378 |     }
1379 |   }
1380 | 
1381 |   loadingIndication(event) {
1382 |     const { type } = event;
1383 |     if (type === 'playing') {
1384 |       this.playing = true;
1385 |       this.onEndStalling();
1386 | 
1387 |       if (!this.playerStatsObject.started_at) {
1388 |         this.playerStatsObject.started_at = Date.now();
1389 |         this.addStat({ started_at: this.playerStatsObject.started_at });
1390 |       }
1391 |     } else if (type === 'waiting') {
1392 |       this.playing = false;
1393 |       this.onStartStalling();
1394 |     }
1395 |   }
1396 | 
1397 |   onEvent(event) {
1398 |     if (this.onEventCallback) {
1399 |       this.onEventCallback(event);
1400 |     }
1401 |   }
1402 | 
1403 |   onPlayerError(errorData) {
1404 |     if (this.playerStatsObject) {
1405 |       this.addPlayerStat('error_count');
1406 |     }
1407 | 
1408 |     this.onError && this.onError(errorData);
1409 |   }
1410 | 
1411 |   addListeners() {
1412 |     if (this.media) {
1413 |       // checkVideoProgress
1414 |       this.oncvp = mseUtils.checkVideoProgress(this.media, this).bind(this);
1415 |       this.media.addEventListener(EVENTS.MEDIA_ELEMENT_PROGRESS, this.oncvp);
1416 | 
1417 |       // this.media.addEventListener(EVENTS.MEDIA_ELEMENT_STALLED, this.loadingIndication.bind(this));
1418 |       // this.media.addEventListener(EVENTS.MEDIA_ELEMENT_SUSPEND, this.loadingIndication.bind(this));
1419 |       // this.media.addEventListener(EVENTS.MEDIA_ELEMENT_RATECHANGE, this.loadingIndication.bind(this));
1420 |       this.media.addEventListener(EVENTS.MEDIA_ELEMENT_PLAYING, this.loadingIndication.bind(this));
1421 |       this.media.addEventListener(EVENTS.MEDIA_ELEMENT_WAITING, this.loadingIndication.bind(this));
1422 |       // this.media.addEventListener(EVENTS.MEDIA_ELEMENT_PAUSE, this.pause.bind(this));
1423 |     }
1424 |   }
1425 |   removeListeners() {
1426 |     if (this.media) {
1427 |       this.media.removeEventListener(EVENTS.MEDIA_ELEMENT_PROGRESS, this.oncvp);
1428 | 
1429 |       // this.media.removeEventListener(EVENTS.MEDIA_ELEMENT_STALLED, this.loadingIndication.bind(this));
1430 |       // this.media.removeEventListener(EVENTS.MEDIA_ELEMENT_SUSPEND, this.loadingIndication.bind(this));
1431 |       // this.media.removeEventListener(EVENTS.MEDIA_ELEMENT_RATECHANGE, this.loadingIndication.bind(this));
1432 |       this.media.removeEventListener(EVENTS.MEDIA_ELEMENT_PLAYING, this.loadingIndication);
1433 |       this.media.removeEventListener(EVENTS.MEDIA_ELEMENT_WAITING, this.loadingIndication);
1434 |       // this.media.removeEventListener(EVENTS.MEDIA_ELEMENT_PAUSE, this.pause)
1435 |     }
1436 |   }
1437 | 
1438 |   generateUUID() {
1439 |     // Public Domain/MIT
1440 |     let d = new Date().getTime(); //Timestamp
1441 |     let d2 = (typeof performance !== 'undefined' && performance.now && performance.now() * 1000) || 0; //Time in microseconds since page-load or 0 if unsupported
1442 |     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
1443 |       let r = Math.random() * 16; //random number between 0 and 16
1444 |       if (d > 0) {
1445 |         //Use timestamp until depleted
1446 |         r = (d + r) % 16 | 0;
1447 |         d = Math.floor(d / 16);
1448 |       } else {
1449 |         //Use microseconds since page-load if supported
1450 |         r = (d2 + r) % 16 | 0;
1451 |         d2 = Math.floor(d2 / 16);
1452 |       }
1453 |       return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
1454 |     });
1455 |   }
1456 | 
1457 |   addPlayerStat(name, count = true, data = null) {
1458 |     const { application } = this.playerStatsObject;
1459 |     if (application) {
1460 |       if (data) {
1461 |         application[name] = Math.round(data);
1462 |       } else if (count) {
1463 |         application[name]++;
1464 |       }
1465 |       this.playerStatsObject.application = application;
1466 |       this.addStat({ application });
1467 |     }
1468 |   }
1469 | 
1470 |   addStat(data) {
1471 |     this.statsWorker &&
1472 |       this.statsWorker.postMessage({
1473 |         command: 'add',
1474 |         commandObj: data,
1475 |       });
1476 |   }
1477 | 
1478 |   getStats() {
1479 |     return {
1480 |       ...this.playerStatsObject,
1481 |       id: this.uuid,
1482 |     };
1483 |   }
1484 | 
1485 |   onStatsWorkerMessage() {
1486 |     if (!this.playerStatsObject.started_at) {
1487 |       return;
1488 |     }
1489 | 
1490 |     if (this.opts.statsSendEnable) {
1491 |       const { source_id } = (this.playerStatsObject && this.playerStatsObject.source_id) || {};
1492 |       const newUrl = this.url.replace(/sessions/, `sessions/${source_id ? `${source_id}` : ''}`);
1493 |       fetch(newUrl, {
1494 |         headers: {
1495 |           Accept: 'application/json',
1496 |           'Content-Type': 'application/json',
1497 |         },
1498 |         method: 'PUT',
1499 |         body: JSON.stringify(this.getStats()),
1500 |       });
1501 |     }
1502 |   }
1503 | }
1504 | 


--------------------------------------------------------------------------------
/src/utils/get-self-scope.js:
--------------------------------------------------------------------------------
 1 | export function getSelfScope() {
 2 |   // see https://stackoverflow.com/a/11237259/589493
 3 |   if (typeof window === 'undefined') {
 4 |     /* eslint-disable-next-line no-undef */
 5 |     return self;
 6 |   } else {
 7 |     return window;
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/utils/logger.js:
--------------------------------------------------------------------------------
 1 | import { getSelfScope } from './get-self-scope';
 2 | 
 3 | function noop() {}
 4 | 
 5 | const fakeLogger = {
 6 |   trace: noop,
 7 |   debug: noop,
 8 |   log: noop,
 9 |   warn: noop,
10 |   info: noop,
11 |   error: noop,
12 | };
13 | 
14 | let exportedLogger = fakeLogger;
15 | 
16 | // let lastCallTime;
17 | // function formatMsgWithTimeInfo(type, msg) {
18 | //   const now = Date.now();
19 | //   const diff = lastCallTime ? '+' + (now - lastCallTime) : '0';
20 | //   lastCallTime = now;
21 | //   msg = (new Date(now)).toISOString() + ' | [' +  type + '] > ' + msg + ' ( ' + diff + ' ms )';
22 | //   return msg;
23 | // }
24 | 
25 | function formatMsg(type, msg) {
26 |   msg = '[' + type + '] > ' + msg;
27 |   return msg;
28 | }
29 | 
30 | const global = getSelfScope();
31 | 
32 | function consolePrintFn(type) {
33 |   const func = global.console[type];
34 |   if (func) {
35 |     return function (...args) {
36 |       if (args[0]) {
37 |         args[0] = formatMsg(type, args[0]);
38 |       }
39 | 
40 |       args && func.apply(global.console, args);
41 |     };
42 |   }
43 |   return noop;
44 | }
45 | 
46 | function exportLoggerFunctions(debugConfig, ...functions) {
47 |   functions.forEach(function (type) {
48 |     exportedLogger[type] = debugConfig[type] ? debugConfig[type].bind(debugConfig) : consolePrintFn(type);
49 |   });
50 | }
51 | 
52 | export const enableLogs = function (debugConfig) {
53 |   if (debugConfig === true || typeof debugConfig === 'object') {
54 |     exportLoggerFunctions(
55 |       debugConfig,
56 |       // Remove out from list here to hard-disable a log-level
57 |       'trace',
58 |       'debug',
59 |       'log',
60 |       'info',
61 |       'warn',
62 |       'error'
63 |     );
64 |     // Some browsers don't allow to use bind on console object anyway
65 |     // fallback to default if needed
66 |     try {
67 |       exportedLogger.log();
68 |     } catch (e) {
69 |       exportedLogger = fakeLogger;
70 |     }
71 |   } else {
72 |     exportedLogger = fakeLogger;
73 |   }
74 | };
75 | 
76 | export const logger = exportedLogger;
77 | 


--------------------------------------------------------------------------------
/src/utils/mseUtils.js:
--------------------------------------------------------------------------------
  1 | import { logger } from '../utils/logger';
  2 | 
  3 | export function getMediaSource() {
  4 |   if (typeof window !== 'undefined') {
  5 |     return window.MediaSource || window.WebKitMediaSource;
  6 |   }
  7 | }
  8 | 
  9 | export function isAndroid() {
 10 |   const ua = navigator.userAgent;
 11 |   return ua.indexOf('Android') !== -1;
 12 | }
 13 | 
 14 | export function isSupportedMSE() {
 15 |   // https://bugs.chromium.org/p/chromium/issues/detail?id=539707
 16 |   if (isAndroid()) {
 17 |     return false;
 18 |   }
 19 |   const mediaSource = getMediaSource();
 20 |   const sourceBuffer = window.SourceBuffer || window.WebKitSourceBuffer;
 21 |   const isTypeSupported =
 22 |     mediaSource &&
 23 |     typeof mediaSource.isTypeSupported === 'function' &&
 24 |     mediaSource.isTypeSupported('video/mp4; codecs="avc1.4d401f,mp4a.40.2"');
 25 | 
 26 |   // if SourceBuffer is exposed ensure its API is valid
 27 |   // safari and old version of Chrome doe not expose SourceBuffer globally so checking SourceBuffer.prototype is impossible
 28 |   const sourceBufferValidAPI =
 29 |     !sourceBuffer ||
 30 |     (sourceBuffer.prototype &&
 31 |       typeof sourceBuffer.prototype.appendBuffer === 'function' &&
 32 |       typeof sourceBuffer.prototype.remove === 'function');
 33 |   return !!isTypeSupported && !!sourceBufferValidAPI;
 34 | }
 35 | 
 36 | export function base64ToArrayBuffer(base64) {
 37 |   return Uint8Array.from(atob(base64), (c) => c.charCodeAt(0));
 38 | }
 39 | 
 40 | export function RawDataToUint8Array(rawData) {
 41 |   // 12,4 = mfhd;20,4 slice - segment.id;36,4 = tfhd;44,4 slice - track.id;64,4 = tfdt
 42 |   // 72,8 slice - prestime;84,4 = futc;92,8 slice - real utc;104,4 = trun
 43 |   return new Uint8Array(rawData);
 44 | }
 45 | 
 46 | export function getTrackId(data) {
 47 |   return data[47];
 48 | }
 49 | 
 50 | export function getRealUtcFromData(view) {
 51 |   const pts1 = (view[92] << 24) | (view[93] << 16) | (view[94] << 8) | view[95];
 52 |   const pts2 = (view[96] << 24) | (view[97] << 16) | (view[98] << 8) | view[99];
 53 |   const realUtc = pts1 + pts2 / 1000000;
 54 |   return realUtc;
 55 | }
 56 | 
 57 | export function doArrayBuffer(segment) {
 58 |   if (!segment.isInit) {
 59 |     // last loaded frame's utc
 60 |     this.utc = getRealUtcFromData(segment.data);
 61 |     this.lastLoadedUTC = this.utc;
 62 |   }
 63 | 
 64 |   // this.maybeAppend(segment, isVideo)
 65 | }
 66 | 
 67 | export function debugData(rawData) {
 68 |   // const view = RawDataToUint8Array(rawData)
 69 |   const view = new Uint8Array(rawData);
 70 |   const trackId = getTrackId(view);
 71 |   const utc = getRealUtcFromData(view);
 72 | 
 73 |   return { trackId, utc, view };
 74 | }
 75 | 
 76 | export const checkVideoProgress = (media, player) => () => {
 77 |   const {
 78 |     currentTime: ct,
 79 |     buffered,
 80 |     buffered: { length: l },
 81 |   } = media;
 82 | 
 83 |   const debounce = function (func, wait, immediate) {
 84 |     let timeout;
 85 |     return function () {
 86 |       let context = this,
 87 |         args = arguments;
 88 |       let later = function () {
 89 |         timeout = null;
 90 |         if (!immediate) func.apply(context, args);
 91 |       };
 92 |       let callNow = immediate && !timeout;
 93 |       clearTimeout(timeout);
 94 |       timeout = setTimeout(later, wait);
 95 |       if (callNow) func.apply(context, args);
 96 |     };
 97 |   };
 98 | 
 99 |   const removeBufferRange = (type, sb, startOffset, endOffset) => {
100 |     try {
101 |       for (let i = 0; i < sb.buffered.length; i++) {
102 |         let bufStart = sb.buffered.start(i);
103 |         let bufEnd = sb.buffered.end(i);
104 |         let removeStart = Math.max(bufStart, startOffset);
105 |         let removeEnd = Math.min(bufEnd, endOffset);
106 | 
107 |         /* sometimes sourcebuffer.remove() does not flush
108 |           the exact expected time range.
109 |           to avoid rounding issues/infinite loop,
110 |           only flush buffer range of length greater than 500ms.
111 |         */
112 |         if (Math.min(removeEnd, bufEnd) - removeStart > 0.5) {
113 |           // let currentTime = 'null';
114 |           // if (media) {
115 |           //   currentTime = media.currentTime.toString();
116 |           // }
117 |           if (sb.updating) {
118 |             return;
119 |           }
120 |           // logger.log(`sb remove ${type} [${removeStart},${removeEnd}], of [${bufStart},${bufEnd}], pos:${currentTime}`)
121 |           sb.remove(removeStart, removeEnd);
122 |           return true;
123 |         }
124 |       }
125 |     } catch (error) {
126 |       logger.warn('removeBufferRange failed', error);
127 |     }
128 | 
129 |     return false;
130 |   };
131 | 
132 |   if (player) {
133 |     const { sourceBuffer } = player.sb;
134 |     const bufferTypes = Object.keys(sourceBuffer);
135 |     const targetBackBufferPosition = ct - 30;
136 | 
137 |     for (let index = bufferTypes.length - 1; index >= 0; index--) {
138 |       const bufferType = bufferTypes[index];
139 |       const sb = sourceBuffer[bufferType];
140 |       if (sb) {
141 |         const buffered = sb.buffered;
142 |         // when target buffer start exceeds actual buffer start
143 |         if (buffered.length > 0 && targetBackBufferPosition > buffered.start(0)) {
144 |           // remove buffer up until current time minus minimum back buffer length (removing buffer too close to current
145 |           // time will lead to playback freezing)
146 |           // credits for level target duration - https://github.com/videojs/http-streaming/blob/3132933b6aa99ddefab29c10447624efd6fd6e52/src/segment-loader.js#L91
147 |           debounce(removeBufferRange(bufferType, sb, 0, targetBackBufferPosition), 100);
148 |         }
149 |       }
150 |     }
151 |   }
152 | 
153 |   if (player.media.readyState <= 2 && player.media.networkState === 2) {
154 |     player.onStartStalling();
155 |   } else if (player.media.readyState > 2) {
156 |     player.onEndStalling();
157 |   }
158 | 
159 |   if (!l) {
160 |     return;
161 |   }
162 |   const endTime = buffered.end(l - 1);
163 |   const delay = Math.abs(endTime - ct);
164 |   // if (player._stalling) {
165 |   //   // player.onEndStalling()
166 |   //   // если поставлена пауза
167 |   //   if (media.paused && player._pause && !player.playing) {
168 |   //     media.currentTime = endTime - 0.0001
169 |   //     player.playPromise = media.play()
170 |   //     player.playPromise
171 |   //       .then(() => {
172 |   //         player._pause = false
173 |   //         player.playing = true
174 |   //       })
175 |   //       .catch(() => {
176 |   //         return
177 |   //       })
178 |   //   }
179 |   // }
180 | 
181 |   if (player.playerStatsObject) {
182 |     player.playerStatsObject.bytes = player.sb.totalBytesCollected;
183 |     player.playerStatsObject.updated_at = Date.now();
184 |     if (player.playing) {
185 |       if (player.playbackSegmentStart) {
186 |         const { application: playerIns } = player.playerStatsObject;
187 |         if (playerIns) {
188 |           const vQuality = player.media.getVideoPlaybackQuality();
189 |           const { corruptedVideoFrames, droppedVideoFrames, totalVideoFrames } = vQuality;
190 |           let { live_duration } = playerIns;
191 |           live_duration += player.playerStatsObject.updated_at - player.playbackSegmentStart;
192 |           player.addPlayerStat('live_duration', false, live_duration);
193 |           player.addPlayerStat('total_video_frames', false, totalVideoFrames);
194 |           player.addPlayerStat('dropped_video_frames', false, droppedVideoFrames);
195 |           player.addPlayerStat('corrupted_video_frames', false, corruptedVideoFrames);
196 |         }
197 |       }
198 |       player.playbackSegmentStart = player.playerStatsObject.updated_at;
199 |     }
200 | 
201 |     player.addStat({
202 |       updated_at: player.playerStatsObject.updated_at,
203 |       bytes: player.sb.totalBytesCollected,
204 |     });
205 |   }
206 | 
207 |   if (delay <= player.opts.maxBufferDelay) {
208 |     return;
209 |   }
210 | 
211 |   logger.log('nudge', ct, '->', l ? endTime : '-', ct - endTime); //evt, )
212 |   media.currentTime = endTime - 0.2; // (Math.abs(ct - endTime)) //
213 | };
214 | 
215 | export const replaceHttpByWS = (url) => url.replace(/^http/, 'ws');
216 | 
217 | export const errorMsg = (e) => `Error ${e.name}: ${e.message}\n${e.stack}`;
218 | 
219 | export function pad2(n) {
220 |   return n <= 9 ? '0' + n : '' + n;
221 | }
222 | 
223 | export function humanTime(utcOrLive, lt = true) {
224 |   // $FlowFixMe: string > 0 is always false
225 |   if (!(utcOrLive > 0)) {
226 |     return '';
227 |   }
228 | 
229 |   // $FlowFixMe: just for flow
230 |   const utc = utcOrLive;
231 | 
232 |   let d = new Date();
233 |   d.setTime(utc * 1000);
234 |   let localTime = !(lt === false);
235 | 
236 |   let h = localTime ? d.getHours() : d.getUTCHours();
237 |   let m = localTime ? d.getMinutes() : d.getUTCMinutes();
238 |   let s = localTime ? d.getSeconds() : d.getUTCSeconds();
239 | 
240 |   return pad2(h) + ':' + pad2(m) + ':' + pad2(s);
241 | }
242 | 
243 | export function logDM(isDataAB, parsedData) {
244 |   if (parsedData) {
245 |     logger.log(
246 |       `%c ${parsedData.type} ${parsedData.type === 'event' ? parsedData.event : 'mse_init_segment'}`,
247 |       'background: aquamarine;',
248 |       parsedData
249 |     );
250 |   }
251 | }
252 | 
253 | let errorsCount = 0;
254 | 
255 | export function showDispatchError(e, err = '') {
256 |   if ('data' in e) {
257 |     const rawData = e.data;
258 |     const isDataAB = rawData instanceof ArrayBuffer;
259 |     if (isDataAB) {
260 |       logger.error('Data:', debugData(e.data));
261 |     }
262 |   }
263 | 
264 |   logger.error(errorMsg(e), err);
265 | 
266 |   if (this.media && 'error' in this.media) {
267 |     logger.error('MediaError:', this.media.error);
268 |   }
269 | 
270 |   errorsCount++;
271 | 
272 |   if (errorsCount >= this.opts.errorsBeforeStop) {
273 |     errorsCount = 0;
274 |     this.stopPromise = this.stop();
275 |   }
276 | 
277 |   if (this.onError) {
278 |     this.onError(err, e);
279 |   }
280 | }
281 | 
282 | /*
283 |  * debug staff, after each operation you should
284 |  * set count to 0, if you want show info about
285 |  * ArrayBuffer frames
286 |  */
287 | // let count = 0
288 | 


--------------------------------------------------------------------------------
/src/workers/retroview.worker.js:
--------------------------------------------------------------------------------
 1 | (function () {
 2 |   let retroviewURL = null;
 3 |   let sendTime = 60000;
 4 |   let jsonTable = {};
 5 |   let sendingInterval = null;
 6 | 
 7 |   self.addEventListener(
 8 |     'message',
 9 |     function (e) {
10 |       let data = e.data;
11 |       //Get command parameter to identify operation
12 |       const { command, commandObj } = data;
13 |       switch (command) {
14 |         case 'start':
15 |           retroviewURL = commandObj;
16 |           start();
17 |           break;
18 |         case 'time':
19 |           correctSendTime(commandObj);
20 |           break;
21 |         case 'stop':
22 |           stop();
23 |           break;
24 |         case 'add':
25 |           addToTable(commandObj);
26 |           break;
27 |         default:
28 |           break;
29 |       }
30 |     },
31 |     false
32 |   );
33 | 
34 |   function correctSendTime(time) {
35 |     sendTime = time;
36 |   }
37 | 
38 |   function start() {
39 |     sendingInterval = this.setInterval(() => {
40 |       post();
41 |     }, sendTime);
42 |   }
43 | 
44 |   function stop() {
45 |     clearInterval(sendingInterval);
46 |     post();
47 |   }
48 | 
49 |   function addToTable(tData) {
50 |     const { key, data } = tData;
51 |     if (key in jsonTable) {
52 |       jsonTable = { ...jsonTable, [key]: { ...jsonTable[key], ...data } };
53 |     } else {
54 |       jsonTable = { ...jsonTable, ...tData };
55 |     }
56 |     if (data.event && data.event === 'play_stop') {
57 |       stop();
58 |     }
59 |   }
60 | 
61 |   function roughSizeOfObject(object) {
62 |     let objectList = [];
63 |     let stack = [object];
64 |     let bytes = 0;
65 | 
66 |     while (stack.length) {
67 |       let value = stack.pop();
68 | 
69 |       if (typeof value === 'boolean') {
70 |         bytes += 4;
71 |       } else if (typeof value === 'string') {
72 |         bytes += value.length * 2;
73 |       } else if (typeof value === 'number') {
74 |         bytes += 8;
75 |       } else if (
76 |         typeof value === 'object' &&
77 |         objectList.indexOf(value) === -1
78 |       ) {
79 |         objectList.push(value);
80 | 
81 |         for (let i in value) {
82 |           stack.push(value[i]);
83 |         }
84 |       }
85 |     }
86 |     return bytes;
87 |   }
88 | 
89 |   function post() {
90 |     console.log('post', {
91 |       jsonTable,
92 |       sendTime,
93 |       tableSize: roughSizeOfObject(jsonTable),
94 |     });
95 |   }
96 | })();
97 | 


--------------------------------------------------------------------------------
/src/workers/stats.worker.js:
--------------------------------------------------------------------------------
  1 | (function () {
  2 |   let statsURL = null;
  3 |   let sendTime = 60000;
  4 |   let jsonTable = {};
  5 |   let sendingInterval = null;
  6 | 
  7 |   self.addEventListener(
  8 |     'message',
  9 |     function (e) {
 10 |       let data = e.data;
 11 |       //Get command parameter to identify operation
 12 |       const { command, commandObj } = data;
 13 |       switch (command) {
 14 |         case 'start':
 15 |           statsURL = commandObj
 16 |             .replace(/ws:/, 'http:')
 17 |             .replace(/wss:/, 'https:')
 18 |             .replace(/mse_ld/, 'sessions');
 19 |           start();
 20 |           break;
 21 |         case 'time':
 22 |           correctSendTime(commandObj);
 23 |           break;
 24 |         case 'stop':
 25 |           stop();
 26 |           break;
 27 |         case 'add':
 28 |           addToTable(commandObj);
 29 |           break;
 30 |         default:
 31 |           break;
 32 |       }
 33 |     },
 34 |     false
 35 |   );
 36 | 
 37 |   function correctSendTime(time) {
 38 |     sendTime = time;
 39 |   }
 40 | 
 41 |   function start() {
 42 |     sendingInterval = this.setInterval(() => {
 43 |       post();
 44 |     }, sendTime);
 45 |   }
 46 | 
 47 |   function stop() {
 48 |     post();
 49 |     clearInterval(sendingInterval);
 50 |   }
 51 | 
 52 |   function addToTable(data) {
 53 |     jsonTable = { ...jsonTable, ...data };
 54 | 
 55 |     if (data.event && data.event === 'play_stop') {
 56 |       stop();
 57 |     }
 58 |   }
 59 | 
 60 |   // function roughSizeOfObject(object) {
 61 |   //   let objectList = [];
 62 |   //   let stack = [object];
 63 |   //   let bytes = 0;
 64 | 
 65 |   //   while (stack.length) {
 66 |   //     let value = stack.pop();
 67 | 
 68 |   //     if (typeof value === 'boolean') {
 69 |   //       bytes += 4;
 70 |   //     } else if (typeof value === 'string') {
 71 |   //       bytes += value.length * 2;
 72 |   //     } else if (typeof value === 'number') {
 73 |   //       bytes += 8;
 74 |   //     } else if (typeof value === 'object' && objectList.indexOf(value) === -1) {
 75 |   //       objectList.push(value);
 76 | 
 77 |   //       for (let i in value) {
 78 |   //         stack.push(value[i]);
 79 |   //       }
 80 |   //     }
 81 |   //   }
 82 |   //   return bytes;
 83 |   // }
 84 | 
 85 |   function post() {
 86 |     if (!jsonTable.started_at) {
 87 |       return;
 88 |     }
 89 | 
 90 |     const { source_id } = jsonTable;
 91 |     const newUrl = statsURL.replace(/sessions/, `sessions/${source_id ? `${source_id}` : ''}`);
 92 |     fetch(newUrl, {
 93 |       headers: {
 94 |         Accept: 'application/json',
 95 |         'Content-Type': 'application/json',
 96 |       },
 97 |       method: 'PUT',
 98 |       body: JSON.stringify(jsonTable),
 99 |     });
100 |   }
101 | })();
102 | 


--------------------------------------------------------------------------------
/src/workers/ws.worker.js:
--------------------------------------------------------------------------------
  1 | (function () {
  2 |   //Define WebSocket and protocol variables
  3 |   let websocket = null;
  4 |   let mustStop = false;
  5 | 
  6 |   //Define based object response to WebSocketController
  7 |   // let onMessage_response = {
  8 |   //   command: 'incomingMsg',
  9 |   //   msg: null,
 10 |   // }
 11 | 
 12 |   //Receive message from WebSocketController
 13 |   self.addEventListener(
 14 |     'message',
 15 |     function (e) {
 16 |       let data = e.data;
 17 |       //Get command parameter to identify operation
 18 |       let command = data.command;
 19 | 
 20 |       if (command === 'start') {
 21 |         start(data.commandObj); //Establish WebSocket connection
 22 |         // } else if (command === 'logout') {
 23 |         //   sendOMMmessage(data.commandObj)
 24 |         //   disconnect() //Terminate WebSocket connection
 25 |       } else if (command === 'disconnect') {
 26 |         disconnect();
 27 |       } else if (command === 'send') {
 28 |         sendOMMmessage(data.commandObj);
 29 |       }
 30 |     },
 31 |     false
 32 |   );
 33 | 
 34 |   /* -----------------  Application events functions  ----------------- */
 35 | 
 36 |   //Establish WebSocket connection
 37 |   function start(wsURL) {
 38 |     websocket = new WebSocket(wsURL);
 39 |     websocket.binaryType = 'arraybuffer';
 40 |     websocket.onopen = onOpen;
 41 |     websocket.onmessage = onMessage;
 42 |     websocket.onerror = onError;
 43 |     websocket.onclose = onClose;
 44 |   }
 45 | 
 46 |   function disconnect() {
 47 |     if (websocket) {
 48 |       websocket.close();
 49 |     }
 50 |     mustStop = true;
 51 |     const disconnect_response = {
 52 |       command: 'disconnect',
 53 |       msg: 'Disconnected',
 54 |     };
 55 |     self.postMessage(disconnect_response);
 56 |   }
 57 | 
 58 |   //Send message to ADS WebSocket
 59 |   function sendOMMmessage(commandObj) {
 60 |     websocket.send(commandObj);
 61 |   }
 62 | 
 63 |   /* -----------------  WS events  ----------------- */
 64 | 
 65 |   //Establish WebSocket connection success
 66 |   function onOpen() {
 67 |     const onOpen_response = {
 68 |       command: 'connect',
 69 |       msg: 'Connected',
 70 |     };
 71 |     self.postMessage(onOpen_response);
 72 |   }
 73 | 
 74 |   //Receives incoming message from WebSocket
 75 |   function onMessage(event) {
 76 |     const rawData = event.data;
 77 |     const isDataAB = rawData instanceof ArrayBuffer;
 78 |     const parsedData = !isDataAB ? JSON.parse(rawData) : void 0;
 79 |     self.postMessage({ rawData, parsedData, isDataAB });
 80 |   }
 81 | 
 82 |   function onError(event) {
 83 |     const onError_response = {
 84 |       command: 'error',
 85 |       msg: JSON.stringify(event),
 86 |     };
 87 |     self.postMessage(onError_response);
 88 |   }
 89 | 
 90 |   function onClose(e) {
 91 |     if (mustStop) {
 92 |       return;
 93 |     }
 94 |     const { code, reason } = e;
 95 |     const onClose_response = {
 96 |       command: 'close',
 97 |       data: { code, reason },
 98 |     };
 99 |     self.postMessage(onClose_response);
100 |   }
101 | })();
102 | 


--------------------------------------------------------------------------------
/webpack.config.dev.js:
--------------------------------------------------------------------------------
  1 | const path = require('path');
  2 | const webpack = require('webpack');
  3 | const HtmlWebPackPlugin = require('html-webpack-plugin');
  4 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
  5 | const WebpackBundleSizeAnalyzerPlugin = require('webpack-bundle-size-analyzer').WebpackBundleSizeAnalyzerPlugin;
  6 | 
  7 | const DirectoryNamedWebpackPlugin = require('directory-named-webpack-plugin');
  8 | 
  9 | const port = 8090;
 10 | 
 11 | module.exports = {
 12 |   node: { Buffer: false, global: true, process: true, setImmediate: false },
 13 |   entry: {
 14 |     index: [path.resolve(__dirname, 'src/demo/index.js')],
 15 |     FlussonicMsePlayer: [path.resolve(__dirname, 'src/FlussonicMsePlayer.js')],
 16 |   },
 17 |   output: {         
 18 |     path: path.resolve(__dirname, 'dist/'),
 19 |     chunkFilename: 'scripts/[name].[hash].js',
 20 |     filename: '[name].js',
 21 |     library: 'FlussonicMsePlayer',
 22 |     libraryTarget: 'umd',
 23 |   },
 24 |   plugins: [
 25 |     new webpack.DefinePlugin({
 26 |       VERSION: JSON.stringify(require('./package.json').version),
 27 |     }), 
 28 |     new HtmlWebPackPlugin({
 29 |       template: './src/demo/index.html',
 30 |       filename: './index.html',
 31 |       inject: 'head',
 32 |     }),
 33 |     new WebpackBundleSizeAnalyzerPlugin('./reports/plain-report.txt'),
 34 |   ],
 35 |   module: {
 36 |     rules: [
 37 |       {
 38 |         test: /\.js$/,
 39 |         exclude: /node_modules/,
 40 |         use: 'babel-loader',
 41 |       },
 42 |       {
 43 |         test: /\.html$/,
 44 |         use: 'html-loader',
 45 |       },
 46 |       {
 47 |         test: /\.worker\.js$/,
 48 |         loader: 'worker-loader',
 49 |         options: {
 50 |           inline: 'fallback',
 51 |         },
 52 |       },
 53 |     ],
 54 |   },
 55 |   optimization: {
 56 |     splitChunks: {
 57 |       chunks: 'async',
 58 |       maxInitialRequests: Infinity,
 59 |       minSize: 0,
 60 |       cacheGroups: {
 61 |         sentry: {
 62 |           test: /node_modules[\\/]@sentry/,
 63 |           name: 'sentry',
 64 |           chunks: 'all',
 65 |           priority: 1,
 66 |         },
 67 |         // core_js: {
 68 |         //   test: /node_modules[\\/]parseurl/,
 69 |         //   name: 'parseurl',
 70 |         //   chunks: 'all',
 71 |         //   priority: 1,
 72 |         // },
 73 |         // commons: {
 74 |         //   test: /[\\/]node_modules[\\/]/,
 75 |         //   name: 'vendors',
 76 |         //   chunks: 'all',
 77 |         // },
 78 |         default: {
 79 |           reuseExistingChunk: true,
 80 |         },
 81 |       },
 82 |     },
 83 |     minimize: true,
 84 |     minimizer: [
 85 |       new UglifyJsPlugin({
 86 |         include: /\.min\.js$/,
 87 |         cache: true,
 88 |         parallel: true,
 89 |         uglifyOptions: {
 90 |           compress: true,
 91 |         },
 92 |         sourceMap: false,
 93 |       }),
 94 |     ],
 95 |     removeAvailableModules: true,
 96 |   },
 97 |   resolve: {
 98 |     modules: ['node_modules'],
 99 |     plugins: [new DirectoryNamedWebpackPlugin(true)],
100 |   },
101 |   devServer: {
102 |     host: '0.0.0.0',
103 |     port,
104 |   },
105 | };
106 | 


--------------------------------------------------------------------------------
/webpack.config.frontci.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const webpack = require('webpack');
 3 | const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 4 | const HtmlWebPackPlugin = require('html-webpack-plugin');
 5 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 6 | 
 7 | const DirectoryNamedWebpackPlugin = require('directory-named-webpack-plugin');
 8 | 
 9 | module.exports = {
10 |   node: { Buffer: false, global: true, process: true, setImmediate: false },
11 |   entry: {
12 |     index: [path.resolve(__dirname, 'src/demo/index.js')],
13 |     FlussonicMsePlayer: [path.resolve(__dirname, 'src/FlussonicMsePlayer.js')],
14 |   },
15 |   output: {
16 |     path: path.resolve(__dirname, 'frontci/'),
17 |   },
18 |   plugins: [
19 |     new webpack.DefinePlugin({
20 |       VERSION: JSON.stringify(require('./package.json').version),
21 |     }),
22 |     new HtmlWebPackPlugin({
23 |       template: './src/demo/index.html',
24 |       filename: './index.html',
25 |       inject: 'head',
26 |     }),
27 |     new CleanWebpackPlugin(),
28 |   ],
29 |   module: {
30 |     rules: [
31 |       {
32 |         test: /\.js$/,
33 |         exclude: /node_modules/,
34 |         use: 'babel-loader',
35 |       },
36 |       {
37 |         test: /\.html$/,
38 |         use: 'html-loader',
39 |       },
40 |       {
41 |         test: /\.worker\.js$/,
42 |         loader: 'worker-loader',
43 |         options: { inline: 'fallback' },
44 |       },
45 |     ],
46 |   },
47 |   optimization: {
48 |     splitChunks: {
49 |       chunks: 'async',
50 |       maxInitialRequests: Infinity,
51 |       minSize: 0,
52 |       cacheGroups: {
53 |         sentry: {
54 |           test: /node_modules[\\/]@sentry/,
55 |           name: 'sentry',
56 |           chunks: 'all',
57 |           priority: 1,
58 |         },
59 |         // core_js: {
60 |         //   test: /node_modules[\\/]parseurl/,
61 |         //   name: 'parseurl',
62 |         //   chunks: 'all',
63 |         //   priority: 1,
64 |         // },
65 |         // commons: {
66 |         //   test: /[\\/]node_modules[\\/]/,
67 |         //   name: 'vendors',
68 |         //   chunks: 'all',
69 |         // },
70 |         default: {
71 |           reuseExistingChunk: true,
72 |         },
73 |       },
74 |     },
75 |     minimize: true,
76 |     minimizer: [
77 |       new UglifyJsPlugin({
78 |         include: /\.min\.js$/,
79 |         cache: true,
80 |         parallel: true,
81 |         uglifyOptions: {
82 |           compress: true,
83 |         },
84 |         sourceMap: false,
85 |       }),
86 |     ],
87 |     removeAvailableModules: true,
88 |   },
89 |   resolve: {
90 |     modules: ['node_modules'],
91 |     plugins: [new DirectoryNamedWebpackPlugin(true)],
92 |   },
93 |   devServer: {
94 |     disableHostCheck: true, // https://github.com/webpack/webpack-dev-server/issues/882
95 |   },
96 | };
97 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const webpack = require('webpack');
 3 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 4 | // const HtmlWebPackPlugin = require('html-webpack-plugin');
 5 | const WebpackBundleSizeAnalyzerPlugin = require('webpack-bundle-size-analyzer').WebpackBundleSizeAnalyzerPlugin;
 6 | 
 7 | const DirectoryNamedWebpackPlugin = require('directory-named-webpack-plugin');
 8 | 
 9 | module.exports = {
10 |   mode: 'production',
11 |   node: { Buffer: false, global: true, process: true, setImmediate: false },
12 |   entry: {
13 |     FlussonicMsePlayer: [path.resolve(__dirname, 'src/FlussonicMsePlayer.js')],
14 |     'FlussonicMsePlayer.min': [path.resolve(__dirname, 'src/FlussonicMsePlayer.js')],
15 |   },
16 |   output: {
17 |     library: 'FlussonicMsePlayer',
18 |     libraryTarget: 'umd',
19 |     path: path.resolve(__dirname, 'dist/'),
20 |     filename: '[name].js',
21 |     chunkFilename: 'scripts/[name].[hash].js',
22 |   },
23 |   plugins: [
24 |     new webpack.DefinePlugin({
25 |       VERSION: JSON.stringify(require('./package.json').version),
26 |     }),
27 |     new WebpackBundleSizeAnalyzerPlugin('./reports/plain-report.txt'),
28 |     new webpack.IgnorePlugin({
29 |       resourceRegExp: /@sentry/,
30 |     }),
31 |   ],
32 |   module: {
33 |     rules: [
34 |       {
35 |         test: /\.js$/,
36 |         loader: 'babel-loader',
37 |         exclude: [path.resolve(__dirname, './node_modules')],
38 |       },
39 |       {
40 |         test: /\.worker\.js$/,
41 |         loader: 'worker-loader',
42 |         options: { inline: 'fallback', filename: '[name].js' },
43 |       },
44 |     ],
45 |   },
46 |   resolve: {
47 |     modules: ['node_modules'],
48 |     plugins: [new DirectoryNamedWebpackPlugin(true)],
49 |   },
50 |   optimization: {
51 |     splitChunks: {
52 |       chunks: 'async',
53 |       maxInitialRequests: Infinity,
54 |       minSize: 0,
55 |       cacheGroups: {
56 |         sentry: {
57 |           test: /node_modules[\\/]@sentry/,
58 |           name: 'sentry',
59 |           chunks: 'all',
60 |           priority: 1,
61 |         },
62 |         // parseurl: {
63 |         //   test: /node_modules[\\/]parseurl/,
64 |         //   name: 'parseurl',
65 |         //   chunks: 'all',
66 |         //   priority: 1,
67 |         // },
68 |         // commons: {
69 |         //   test: /[\\/]node_modules[\\/]/,
70 |         //   name: 'vendors',
71 |         //   chunks: 'all',
72 |         // },
73 |         default: {
74 |           reuseExistingChunk: true,
75 |         },
76 |       },
77 |     },
78 |     minimize: true,
79 |     minimizer: [
80 |       new UglifyJsPlugin({
81 |         include: /\.min\.js$/,
82 |         cache: true,
83 |         parallel: true,
84 |         uglifyOptions: {
85 |           compress: true,
86 |         },
87 |         sourceMap: false,
88 |       }),
89 |     ],
90 |     removeAvailableModules: true,
91 |   },
92 |   devServer: {
93 |     disableHostCheck: true, // https://github.com/webpack/webpack-dev-server/issues/882
94 |   },
95 | };
96 | 


--------------------------------------------------------------------------------
/webpack.config.sentry.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const webpack = require('webpack');
 3 | const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 4 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 5 | // const HtmlWebPackPlugin = require('html-webpack-plugin');
 6 | const WebpackBundleSizeAnalyzerPlugin = require('webpack-bundle-size-analyzer').WebpackBundleSizeAnalyzerPlugin;
 7 | 
 8 | const DirectoryNamedWebpackPlugin = require('directory-named-webpack-plugin');
 9 | 
10 | module.exports = {
11 |   mode: 'production',
12 |   node: { Buffer: false, global: true, process: true, setImmediate: false },
13 |   entry: {
14 |     FlussonicMsePlayer: [path.resolve(__dirname, 'src/FlussonicMsePlayer.js')],
15 |   },
16 |   output: {
17 |     path: path.resolve(__dirname, 'dist/'),
18 |     chunkFilename: 'scripts/[name].[hash].js',
19 |     filename: '[name].sentry.js',
20 |     library: 'FlussonicMsePlayer',
21 |     libraryTarget: 'umd',
22 |   },
23 |   plugins: [
24 |     new CleanWebpackPlugin(),
25 |     new webpack.DefinePlugin({
26 |       VERSION: JSON.stringify(require('./package.json').version),
27 |     }),
28 |     new WebpackBundleSizeAnalyzerPlugin('./reports/plain-report.txt'),
29 |   ],
30 |   module: {
31 |     rules: [
32 |       {
33 |         test: /\.js$/,
34 |         loader: 'babel-loader',
35 |         exclude: [path.resolve(__dirname, './node_modules')],
36 |       },
37 |       { test: /\.worker\.js$/, loader: 'worker-loader', options: { inline: 'fallback', filename: '[name].js' } },
38 |     ],
39 |   },
40 |   resolve: {
41 |     modules: ['node_modules'],
42 |     plugins: [new DirectoryNamedWebpackPlugin(true)],
43 |   },
44 |   optimization: {
45 |     splitChunks: {
46 |       chunks: 'async',
47 |       maxInitialRequests: Infinity,
48 |       minSize: 0,
49 |       cacheGroups: {
50 |         sentry: {
51 |           test: /node_modules[\\/]@sentry/,
52 |           name: 'sentry',
53 |           chunks: 'all',
54 |           priority: 1,
55 |         },
56 |         // core_js: {
57 |         //   test: /node_modules[\\/]parseurl/,
58 |         //   name: 'parseurl',
59 |         //   chunks: 'all',
60 |         //   priority: 1,
61 |         // },
62 |         // commons: {
63 |         //   test: /[\\/]node_modules[\\/]/,
64 |         //   name: 'vendors',
65 |         //   chunks: 'all',
66 |         // },
67 |         default: {
68 |           reuseExistingChunk: true,
69 |         },
70 |       },
71 |     },
72 |     minimize: true,
73 |     minimizer: [
74 |       new UglifyJsPlugin({
75 |         cache: true,
76 |         parallel: true,
77 |       }),
78 |     ],
79 |     removeAvailableModules: true,
80 |   },
81 |   devServer: {
82 |     disableHostCheck: true, // https://github.com/webpack/webpack-dev-server/issues/882
83 |   },
84 | };
85 | 


--------------------------------------------------------------------------------