diff --git a/package-lock.json b/package-lock.json
index dbd2000..4460a20 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,22 +13,358 @@
"amfe-flexible": "^2.2.1",
"axios": "^1.6.2",
"echarts": "^5.4.3",
+ "element-plus": "^2.4.3",
+ "pinia": "^2.1.7",
"postcss-pxtorem": "^5.1.1",
"vue": "^3.3.8",
"vue-router": "^4.2.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.5.0",
+ "@vitejs/plugin-vue-jsx": "^3.1.0",
"postcss-pxtorem": "^6.0.0",
"sass": "^1.69.5",
"sass-loader": "^13.3.2",
"vite": "^5.0.0"
}
},
- "node_modules/@babel/parser": {
+ "node_modules/@ampproject/remapping": {
+ "version": "2.2.1",
+ "resolved": "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.2.1.tgz",
+ "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
+ "dev": true,
+ "dependencies": {
+ "@jridgewell/gen-mapping": "^0.3.0",
+ "@jridgewell/trace-mapping": "^0.3.9"
+ },
+ "engines": {
+ "node": ">=6.0.0"
+ }
+ },
+ "node_modules/@babel/code-frame": {
+ "version": "7.23.5",
+ "resolved": "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.23.5.tgz",
+ "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==",
+ "dev": true,
+ "dependencies": {
+ "@babel/highlight": "^7.23.4",
+ "chalk": "^2.4.2"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/compat-data": {
+ "version": "7.23.5",
+ "resolved": "https://registry.npmmirror.com/@babel/compat-data/-/compat-data-7.23.5.tgz",
+ "integrity": "sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==",
+ "dev": true,
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/core": {
+ "version": "7.23.5",
+ "resolved": "https://registry.npmmirror.com/@babel/core/-/core-7.23.5.tgz",
+ "integrity": "sha512-Cwc2XjUrG4ilcfOw4wBAK+enbdgwAcAJCfGUItPBKR7Mjw4aEfAFYrLxeRp4jWgtNIKn3n2AlBOfwwafl+42/g==",
+ "dev": true,
+ "dependencies": {
+ "@ampproject/remapping": "^2.2.0",
+ "@babel/code-frame": "^7.23.5",
+ "@babel/generator": "^7.23.5",
+ "@babel/helper-compilation-targets": "^7.22.15",
+ "@babel/helper-module-transforms": "^7.23.3",
+ "@babel/helpers": "^7.23.5",
+ "@babel/parser": "^7.23.5",
+ "@babel/template": "^7.22.15",
+ "@babel/traverse": "^7.23.5",
+ "@babel/types": "^7.23.5",
+ "convert-source-map": "^2.0.0",
+ "debug": "^4.1.0",
+ "gensync": "^1.0.0-beta.2",
+ "json5": "^2.2.3",
+ "semver": "^6.3.1"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/generator": {
+ "version": "7.23.5",
+ "resolved": "https://registry.npmmirror.com/@babel/generator/-/generator-7.23.5.tgz",
+ "integrity": "sha512-BPssCHrBD+0YrxviOa3QzpqwhNIXKEtOa2jQrm4FlmkC2apYgRnQcmPWiGZDlGxiNtltnUFolMe8497Esry+jA==",
+ "dev": true,
+ "dependencies": {
+ "@babel/types": "^7.23.5",
+ "@jridgewell/gen-mapping": "^0.3.2",
+ "@jridgewell/trace-mapping": "^0.3.17",
+ "jsesc": "^2.5.1"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/helper-annotate-as-pure": {
+ "version": "7.22.5",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
+ "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
+ "dev": true,
+ "dependencies": {
+ "@babel/types": "^7.22.5"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/helper-compilation-targets": {
+ "version": "7.22.15",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.15.tgz",
+ "integrity": "sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw==",
+ "dev": true,
+ "dependencies": {
+ "@babel/compat-data": "^7.22.9",
+ "@babel/helper-validator-option": "^7.22.15",
+ "browserslist": "^4.21.9",
+ "lru-cache": "^5.1.1",
+ "semver": "^6.3.1"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/helper-create-class-features-plugin": {
+ "version": "7.23.5",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.23.5.tgz",
+ "integrity": "sha512-QELlRWxSpgdwdJzSJn4WAhKC+hvw/AtHbbrIoncKHkhKKR/luAlKkgBDcri1EzWAo8f8VvYVryEHN4tax/V67A==",
+ "dev": true,
+ "dependencies": {
+ "@babel/helper-annotate-as-pure": "^7.22.5",
+ "@babel/helper-environment-visitor": "^7.22.20",
+ "@babel/helper-function-name": "^7.23.0",
+ "@babel/helper-member-expression-to-functions": "^7.23.0",
+ "@babel/helper-optimise-call-expression": "^7.22.5",
+ "@babel/helper-replace-supers": "^7.22.20",
+ "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+ "@babel/helper-split-export-declaration": "^7.22.6",
+ "semver": "^6.3.1"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ },
+ "peerDependencies": {
+ "@babel/core": "^7.0.0"
+ }
+ },
+ "node_modules/@babel/helper-environment-visitor": {
+ "version": "7.22.20",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
+ "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
+ "dev": true,
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/helper-function-name": {
+ "version": "7.23.0",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
+ "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
+ "dev": true,
+ "dependencies": {
+ "@babel/template": "^7.22.15",
+ "@babel/types": "^7.23.0"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/helper-hoist-variables": {
+ "version": "7.22.5",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
+ "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
+ "dev": true,
+ "dependencies": {
+ "@babel/types": "^7.22.5"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/helper-member-expression-to-functions": {
+ "version": "7.23.0",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.23.0.tgz",
+ "integrity": "sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==",
+ "dev": true,
+ "dependencies": {
+ "@babel/types": "^7.23.0"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/helper-module-imports": {
+ "version": "7.22.15",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
+ "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
+ "dev": true,
+ "dependencies": {
+ "@babel/types": "^7.22.15"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/helper-module-transforms": {
+ "version": "7.23.3",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz",
+ "integrity": "sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==",
+ "dev": true,
+ "dependencies": {
+ "@babel/helper-environment-visitor": "^7.22.20",
+ "@babel/helper-module-imports": "^7.22.15",
+ "@babel/helper-simple-access": "^7.22.5",
+ "@babel/helper-split-export-declaration": "^7.22.6",
+ "@babel/helper-validator-identifier": "^7.22.20"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ },
+ "peerDependencies": {
+ "@babel/core": "^7.0.0"
+ }
+ },
+ "node_modules/@babel/helper-optimise-call-expression": {
+ "version": "7.22.5",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz",
+ "integrity": "sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==",
+ "dev": true,
+ "dependencies": {
+ "@babel/types": "^7.22.5"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/helper-plugin-utils": {
+ "version": "7.22.5",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+ "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+ "dev": true,
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/helper-replace-supers": {
+ "version": "7.22.20",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-replace-supers/-/helper-replace-supers-7.22.20.tgz",
+ "integrity": "sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==",
+ "dev": true,
+ "dependencies": {
+ "@babel/helper-environment-visitor": "^7.22.20",
+ "@babel/helper-member-expression-to-functions": "^7.22.15",
+ "@babel/helper-optimise-call-expression": "^7.22.5"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ },
+ "peerDependencies": {
+ "@babel/core": "^7.0.0"
+ }
+ },
+ "node_modules/@babel/helper-simple-access": {
+ "version": "7.22.5",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
+ "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
+ "dev": true,
+ "dependencies": {
+ "@babel/types": "^7.22.5"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+ "version": "7.22.5",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.22.5.tgz",
+ "integrity": "sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==",
+ "dev": true,
+ "dependencies": {
+ "@babel/types": "^7.22.5"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/helper-split-export-declaration": {
+ "version": "7.22.6",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
+ "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
+ "dev": true,
+ "dependencies": {
+ "@babel/types": "^7.22.5"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/helper-string-parser": {
"version": "7.23.4",
- "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.23.4.tgz",
- "integrity": "sha512-vf3Xna6UEprW+7t6EtOmFpHNAuxw3xqPZghy+brsnusscJRW5BMUzzHZc5ICjULee81WeUV2jjakG09MDglJXQ==",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
+ "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
+ "dev": true,
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/helper-validator-identifier": {
+ "version": "7.22.20",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
+ "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
+ "dev": true,
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/helper-validator-option": {
+ "version": "7.23.5",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz",
+ "integrity": "sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==",
+ "dev": true,
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/helpers": {
+ "version": "7.23.5",
+ "resolved": "https://registry.npmmirror.com/@babel/helpers/-/helpers-7.23.5.tgz",
+ "integrity": "sha512-oO7us8FzTEsG3U6ag9MfdF1iA/7Z6dz+MtFhifZk8C8o453rGJFFWUP1t+ULM9TUIAzC9uxXEiXjOiVMyd7QPg==",
+ "dev": true,
+ "dependencies": {
+ "@babel/template": "^7.22.15",
+ "@babel/traverse": "^7.23.5",
+ "@babel/types": "^7.23.5"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/highlight": {
+ "version": "7.23.4",
+ "resolved": "https://registry.npmmirror.com/@babel/highlight/-/highlight-7.23.4.tgz",
+ "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
+ "dev": true,
+ "dependencies": {
+ "@babel/helper-validator-identifier": "^7.22.20",
+ "chalk": "^2.4.2",
+ "js-tokens": "^4.0.0"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/parser": {
+ "version": "7.23.5",
+ "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.23.5.tgz",
+ "integrity": "sha512-hOOqoiNXrmGdFbhgCzu6GiURxUgM27Xwd/aPuu8RfHEZPBzL1Z54okAHAQjXfcQNwvrlkAmAp4SlRTZ45vlthQ==",
"bin": {
"parser": "bin/babel-parser.js"
},
@@ -36,6 +372,54 @@
"node": ">=6.0.0"
}
},
+ "node_modules/@babel/plugin-syntax-jsx": {
+ "version": "7.23.3",
+ "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.23.3.tgz",
+ "integrity": "sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==",
+ "dev": true,
+ "dependencies": {
+ "@babel/helper-plugin-utils": "^7.22.5"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ },
+ "peerDependencies": {
+ "@babel/core": "^7.0.0-0"
+ }
+ },
+ "node_modules/@babel/plugin-syntax-typescript": {
+ "version": "7.23.3",
+ "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.23.3.tgz",
+ "integrity": "sha512-9EiNjVJOMwCO+43TqoTrgQ8jMwcAd0sWyXi9RPfIsLTj4R2MADDDQXELhffaUx/uJv2AYcxBgPwH6j4TIA4ytQ==",
+ "dev": true,
+ "dependencies": {
+ "@babel/helper-plugin-utils": "^7.22.5"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ },
+ "peerDependencies": {
+ "@babel/core": "^7.0.0-0"
+ }
+ },
+ "node_modules/@babel/plugin-transform-typescript": {
+ "version": "7.23.5",
+ "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.23.5.tgz",
+ "integrity": "sha512-2fMkXEJkrmwgu2Bsv1Saxgj30IXZdJ+84lQcKKI7sm719oXs0BBw2ZENKdJdR1PjWndgLCEBNXJOri0fk7RYQA==",
+ "dev": true,
+ "dependencies": {
+ "@babel/helper-annotate-as-pure": "^7.22.5",
+ "@babel/helper-create-class-features-plugin": "^7.23.5",
+ "@babel/helper-plugin-utils": "^7.22.5",
+ "@babel/plugin-syntax-typescript": "^7.23.3"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ },
+ "peerDependencies": {
+ "@babel/core": "^7.0.0-0"
+ }
+ },
"node_modules/@babel/runtime": {
"version": "7.23.4",
"resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.23.4.tgz",
@@ -47,6 +431,63 @@
"node": ">=6.9.0"
}
},
+ "node_modules/@babel/template": {
+ "version": "7.22.15",
+ "resolved": "https://registry.npmmirror.com/@babel/template/-/template-7.22.15.tgz",
+ "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==",
+ "dev": true,
+ "dependencies": {
+ "@babel/code-frame": "^7.22.13",
+ "@babel/parser": "^7.22.15",
+ "@babel/types": "^7.22.15"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/traverse": {
+ "version": "7.23.5",
+ "resolved": "https://registry.npmmirror.com/@babel/traverse/-/traverse-7.23.5.tgz",
+ "integrity": "sha512-czx7Xy5a6sapWWRx61m1Ke1Ra4vczu1mCTtJam5zRTBOonfdJ+S/B6HYmGYu3fJtr8GGET3si6IhgWVBhJ/m8w==",
+ "dev": true,
+ "dependencies": {
+ "@babel/code-frame": "^7.23.5",
+ "@babel/generator": "^7.23.5",
+ "@babel/helper-environment-visitor": "^7.22.20",
+ "@babel/helper-function-name": "^7.23.0",
+ "@babel/helper-hoist-variables": "^7.22.5",
+ "@babel/helper-split-export-declaration": "^7.22.6",
+ "@babel/parser": "^7.23.5",
+ "@babel/types": "^7.23.5",
+ "debug": "^4.1.0",
+ "globals": "^11.1.0"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/types": {
+ "version": "7.23.5",
+ "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.23.5.tgz",
+ "integrity": "sha512-ON5kSOJwVO6xXVRTvOI0eOnWe7VdUcIpsovGo9U/Br4Ie4UVFQTboO2cYnDhAGU6Fp+UxSiT+pMft0SMHfuq6w==",
+ "dev": true,
+ "dependencies": {
+ "@babel/helper-string-parser": "^7.23.4",
+ "@babel/helper-validator-identifier": "^7.22.20",
+ "to-fast-properties": "^2.0.0"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@ctrl/tinycolor": {
+ "version": "3.6.1",
+ "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+ "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
+ "engines": {
+ "node": ">=10"
+ }
+ },
"node_modules/@dataview/datav-vue3": {
"version": "0.0.0-test.1672506674342",
"resolved": "https://registry.npmmirror.com/@dataview/datav-vue3/-/datav-vue3-0.0.0-test.1672506674342.tgz",
@@ -60,6 +501,14 @@
"vue": ">=3.2.0"
}
},
+ "node_modules/@element-plus/icons-vue": {
+ "version": "2.3.1",
+ "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
+ "integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
+ "peerDependencies": {
+ "vue": "^3.2.0"
+ }
+ },
"node_modules/@esbuild/android-arm": {
"version": "0.19.7",
"resolved": "https://registry.npmmirror.com/@esbuild/android-arm/-/android-arm-0.19.7.tgz",
@@ -412,6 +861,28 @@
"node": ">=12"
}
},
+ "node_modules/@floating-ui/core": {
+ "version": "1.5.2",
+ "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.5.2.tgz",
+ "integrity": "sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==",
+ "dependencies": {
+ "@floating-ui/utils": "^0.1.3"
+ }
+ },
+ "node_modules/@floating-ui/dom": {
+ "version": "1.5.3",
+ "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.5.3.tgz",
+ "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+ "dependencies": {
+ "@floating-ui/core": "^1.4.2",
+ "@floating-ui/utils": "^0.1.3"
+ }
+ },
+ "node_modules/@floating-ui/utils": {
+ "version": "0.1.6",
+ "resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.1.6.tgz",
+ "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+ },
"node_modules/@jiaminghi/bezier-curve": {
"version": "0.0.9",
"resolved": "https://registry.npmjs.org/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz",
@@ -470,7 +941,6 @@
"resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
"integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
"dev": true,
- "peer": true,
"dependencies": {
"@jridgewell/set-array": "^1.0.1",
"@jridgewell/sourcemap-codec": "^1.4.10",
@@ -485,7 +955,6 @@
"resolved": "https://registry.npmmirror.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
"integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
"dev": true,
- "peer": true,
"engines": {
"node": ">=6.0.0"
}
@@ -495,7 +964,6 @@
"resolved": "https://registry.npmmirror.com/@jridgewell/set-array/-/set-array-1.1.2.tgz",
"integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
"dev": true,
- "peer": true,
"engines": {
"node": ">=6.0.0"
}
@@ -521,12 +989,17 @@
"resolved": "https://registry.npmmirror.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz",
"integrity": "sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==",
"dev": true,
- "peer": true,
"dependencies": {
"@jridgewell/resolve-uri": "^3.1.0",
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
+ "node_modules/@popperjs/core": {
+ "name": "@sxzz/popperjs-es",
+ "version": "2.11.7",
+ "resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+ "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
+ },
"node_modules/@rollup/rollup-android-arm-eabi": {
"version": "4.5.1",
"resolved": "https://registry.npmmirror.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.5.1.tgz",
@@ -719,6 +1192,19 @@
"dev": true,
"peer": true
},
+ "node_modules/@types/lodash": {
+ "version": "4.14.202",
+ "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.202.tgz",
+ "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ=="
+ },
+ "node_modules/@types/lodash-es": {
+ "version": "4.17.12",
+ "resolved": "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.12.tgz",
+ "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
+ "dependencies": {
+ "@types/lodash": "*"
+ }
+ },
"node_modules/@types/node": {
"version": "20.9.4",
"resolved": "https://registry.npmmirror.com/@types/node/-/node-20.9.4.tgz",
@@ -729,6 +1215,11 @@
"undici-types": "~5.26.4"
}
},
+ "node_modules/@types/web-bluetooth": {
+ "version": "0.0.16",
+ "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+ "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
+ },
"node_modules/@vitejs/plugin-vue": {
"version": "4.5.0",
"resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-4.5.0.tgz",
@@ -742,6 +1233,50 @@
"vue": "^3.2.25"
}
},
+ "node_modules/@vitejs/plugin-vue-jsx": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue-jsx/-/plugin-vue-jsx-3.1.0.tgz",
+ "integrity": "sha512-w9M6F3LSEU5kszVb9An2/MmXNxocAnUb3WhRr8bHlimhDrXNt6n6D2nJQR3UXpGlZHh/EsgouOHCsM8V3Ln+WA==",
+ "dev": true,
+ "dependencies": {
+ "@babel/core": "^7.23.3",
+ "@babel/plugin-transform-typescript": "^7.23.3",
+ "@vue/babel-plugin-jsx": "^1.1.5"
+ },
+ "engines": {
+ "node": "^14.18.0 || >=16.0.0"
+ },
+ "peerDependencies": {
+ "vite": "^4.0.0 || ^5.0.0",
+ "vue": "^3.0.0"
+ }
+ },
+ "node_modules/@vue/babel-helper-vue-transform-on": {
+ "version": "1.1.5",
+ "resolved": "https://registry.npmmirror.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.1.5.tgz",
+ "integrity": "sha512-SgUymFpMoAyWeYWLAY+MkCK3QEROsiUnfaw5zxOVD/M64KQs8D/4oK6Q5omVA2hnvEOE0SCkH2TZxs/jnnUj7w==",
+ "dev": true
+ },
+ "node_modules/@vue/babel-plugin-jsx": {
+ "version": "1.1.5",
+ "resolved": "https://registry.npmmirror.com/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.1.5.tgz",
+ "integrity": "sha512-nKs1/Bg9U1n3qSWnsHhCVQtAzI6aQXqua8j/bZrau8ywT1ilXQbK4FwEJGmU8fV7tcpuFvWmmN7TMmV1OBma1g==",
+ "dev": true,
+ "dependencies": {
+ "@babel/helper-module-imports": "^7.22.5",
+ "@babel/plugin-syntax-jsx": "^7.22.5",
+ "@babel/template": "^7.22.5",
+ "@babel/traverse": "^7.22.5",
+ "@babel/types": "^7.22.5",
+ "@vue/babel-helper-vue-transform-on": "^1.1.5",
+ "camelcase": "^6.3.0",
+ "html-tags": "^3.3.1",
+ "svg-tags": "^1.0.0"
+ },
+ "peerDependencies": {
+ "@babel/core": "^7.0.0-0"
+ }
+ },
"node_modules/@vue/compiler-core": {
"version": "3.3.8",
"resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.3.8.tgz",
@@ -849,6 +1384,74 @@
"resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.8.tgz",
"integrity": "sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw=="
},
+ "node_modules/@vueuse/core": {
+ "version": "9.13.0",
+ "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz",
+ "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
+ "dependencies": {
+ "@types/web-bluetooth": "^0.0.16",
+ "@vueuse/metadata": "9.13.0",
+ "@vueuse/shared": "9.13.0",
+ "vue-demi": "*"
+ }
+ },
+ "node_modules/@vueuse/core/node_modules/vue-demi": {
+ "version": "0.14.6",
+ "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz",
+ "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+ "hasInstallScript": true,
+ "bin": {
+ "vue-demi-fix": "bin/vue-demi-fix.js",
+ "vue-demi-switch": "bin/vue-demi-switch.js"
+ },
+ "engines": {
+ "node": ">=12"
+ },
+ "peerDependencies": {
+ "@vue/composition-api": "^1.0.0-rc.1",
+ "vue": "^3.0.0-0 || ^2.6.0"
+ },
+ "peerDependenciesMeta": {
+ "@vue/composition-api": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@vueuse/metadata": {
+ "version": "9.13.0",
+ "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.13.0.tgz",
+ "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ=="
+ },
+ "node_modules/@vueuse/shared": {
+ "version": "9.13.0",
+ "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.13.0.tgz",
+ "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
+ "dependencies": {
+ "vue-demi": "*"
+ }
+ },
+ "node_modules/@vueuse/shared/node_modules/vue-demi": {
+ "version": "0.14.6",
+ "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz",
+ "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+ "hasInstallScript": true,
+ "bin": {
+ "vue-demi-fix": "bin/vue-demi-fix.js",
+ "vue-demi-switch": "bin/vue-demi-switch.js"
+ },
+ "engines": {
+ "node": ">=12"
+ },
+ "peerDependencies": {
+ "@vue/composition-api": "^1.0.0-rc.1",
+ "vue": "^3.0.0-0 || ^2.6.0"
+ },
+ "peerDependenciesMeta": {
+ "@vue/composition-api": {
+ "optional": true
+ }
+ }
+ },
"node_modules/@webassemblyjs/ast": {
"version": "1.11.6",
"resolved": "https://registry.npmmirror.com/@webassemblyjs/ast/-/ast-1.11.6.tgz",
@@ -1075,6 +1678,18 @@
"resolved": "https://registry.npmmirror.com/amfe-flexible/-/amfe-flexible-2.2.1.tgz",
"integrity": "sha512-L2VfvDzoETBjhRptg5u/IUuzHSuxm22JpSRb404p/TBGeRfwWmmNEbB+TFPIP/sS/+pbM18bCFH9QnMojLuPNw=="
},
+ "node_modules/ansi-styles": {
+ "version": "3.2.1",
+ "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-3.2.1.tgz",
+ "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+ "dev": true,
+ "dependencies": {
+ "color-convert": "^1.9.0"
+ },
+ "engines": {
+ "node": ">=4"
+ }
+ },
"node_modules/anymatch": {
"version": "3.1.3",
"resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz",
@@ -1088,6 +1703,11 @@
"node": ">= 8"
}
},
+ "node_modules/async-validator": {
+ "version": "4.2.5",
+ "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
+ "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
+ },
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
@@ -1129,7 +1749,6 @@
"resolved": "https://registry.npmmirror.com/browserslist/-/browserslist-4.22.1.tgz",
"integrity": "sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==",
"dev": true,
- "peer": true,
"dependencies": {
"caniuse-lite": "^1.0.30001541",
"electron-to-chromium": "^1.4.535",
@@ -1150,12 +1769,55 @@
"dev": true,
"peer": true
},
+ "node_modules/camelcase": {
+ "version": "6.3.0",
+ "resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-6.3.0.tgz",
+ "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+ "dev": true,
+ "engines": {
+ "node": ">=10"
+ }
+ },
"node_modules/caniuse-lite": {
"version": "1.0.30001564",
"resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001564.tgz",
"integrity": "sha512-DqAOf+rhof+6GVx1y+xzbFPeOumfQnhYzVnZD6LAXijR77yPtm9mfOcqOnT3mpnJiZVT+kwLAFnRlZcIz+c6bg==",
+ "dev": true
+ },
+ "node_modules/chalk": {
+ "version": "2.4.2",
+ "resolved": "https://registry.npmmirror.com/chalk/-/chalk-2.4.2.tgz",
+ "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
"dev": true,
- "peer": true
+ "dependencies": {
+ "ansi-styles": "^3.2.1",
+ "escape-string-regexp": "^1.0.5",
+ "supports-color": "^5.3.0"
+ },
+ "engines": {
+ "node": ">=4"
+ }
+ },
+ "node_modules/chalk/node_modules/has-flag": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-3.0.0.tgz",
+ "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+ "dev": true,
+ "engines": {
+ "node": ">=4"
+ }
+ },
+ "node_modules/chalk/node_modules/supports-color": {
+ "version": "5.5.0",
+ "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-5.5.0.tgz",
+ "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+ "dev": true,
+ "dependencies": {
+ "has-flag": "^3.0.0"
+ },
+ "engines": {
+ "node": ">=4"
+ }
},
"node_modules/chokidar": {
"version": "3.5.3",
@@ -1193,6 +1855,21 @@
"resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.3.2.tgz",
"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
},
+ "node_modules/color-convert": {
+ "version": "1.9.3",
+ "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-1.9.3.tgz",
+ "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+ "dev": true,
+ "dependencies": {
+ "color-name": "1.1.3"
+ }
+ },
+ "node_modules/color-name": {
+ "version": "1.1.3",
+ "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.3.tgz",
+ "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+ "dev": true
+ },
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -1211,11 +1888,39 @@
"dev": true,
"peer": true
},
+ "node_modules/convert-source-map": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-2.0.0.tgz",
+ "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+ "dev": true
+ },
"node_modules/csstype": {
"version": "3.1.2",
"resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.2.tgz",
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
},
+ "node_modules/dayjs": {
+ "version": "1.11.10",
+ "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz",
+ "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
+ },
+ "node_modules/debug": {
+ "version": "4.3.4",
+ "resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz",
+ "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+ "dev": true,
+ "dependencies": {
+ "ms": "2.1.2"
+ },
+ "engines": {
+ "node": ">=6.0"
+ },
+ "peerDependenciesMeta": {
+ "supports-color": {
+ "optional": true
+ }
+ }
+ },
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -1237,8 +1942,32 @@
"version": "1.4.590",
"resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.590.tgz",
"integrity": "sha512-hohItzsQcG7/FBsviCYMtQwUSWvVF7NVqPOnJCErWsAshsP/CR2LAXdmq276RbESNdhxiAq5/vRo1g2pxGXVww==",
- "dev": true,
- "peer": true
+ "dev": true
+ },
+ "node_modules/element-plus": {
+ "version": "2.4.3",
+ "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.4.3.tgz",
+ "integrity": "sha512-b3q26j+lM4SBqiyzw8HybybGnP2pk4MWgrnzzzYW5qKQUgV6EG1Zg7nMCfgCVccI8tNvZoTiUHb2mFaiB9qT8w==",
+ "dependencies": {
+ "@ctrl/tinycolor": "^3.4.1",
+ "@element-plus/icons-vue": "^2.3.1",
+ "@floating-ui/dom": "^1.0.1",
+ "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
+ "@types/lodash": "^4.14.182",
+ "@types/lodash-es": "^4.17.6",
+ "@vueuse/core": "^9.1.0",
+ "async-validator": "^4.2.5",
+ "dayjs": "^1.11.3",
+ "escape-html": "^1.0.3",
+ "lodash": "^4.17.21",
+ "lodash-es": "^4.17.21",
+ "lodash-unified": "^1.0.2",
+ "memoize-one": "^6.0.0",
+ "normalize-wheel-es": "^1.2.0"
+ },
+ "peerDependencies": {
+ "vue": "^3.2.0"
+ }
},
"node_modules/enhanced-resolve": {
"version": "5.15.0",
@@ -1303,11 +2032,24 @@
"resolved": "https://registry.npmmirror.com/escalade/-/escalade-3.1.1.tgz",
"integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
"dev": true,
- "peer": true,
"engines": {
"node": ">=6"
}
},
+ "node_modules/escape-html": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmmirror.com/escape-html/-/escape-html-1.0.3.tgz",
+ "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+ },
+ "node_modules/escape-string-regexp": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+ "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+ "dev": true,
+ "engines": {
+ "node": ">=0.8.0"
+ }
+ },
"node_modules/eslint-scope": {
"version": "5.1.1",
"resolved": "https://registry.npmmirror.com/eslint-scope/-/eslint-scope-5.1.1.tgz",
@@ -1436,6 +2178,15 @@
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
}
},
+ "node_modules/gensync": {
+ "version": "1.0.0-beta.2",
+ "resolved": "https://registry.npmmirror.com/gensync/-/gensync-1.0.0-beta.2.tgz",
+ "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+ "dev": true,
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
"node_modules/glob-parent": {
"version": "5.1.2",
"resolved": "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz",
@@ -1455,6 +2206,15 @@
"dev": true,
"peer": true
},
+ "node_modules/globals": {
+ "version": "11.12.0",
+ "resolved": "https://registry.npmmirror.com/globals/-/globals-11.12.0.tgz",
+ "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+ "dev": true,
+ "engines": {
+ "node": ">=4"
+ }
+ },
"node_modules/graceful-fs": {
"version": "4.2.11",
"resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -1472,6 +2232,15 @@
"node": ">=8"
}
},
+ "node_modules/html-tags": {
+ "version": "3.3.1",
+ "resolved": "https://registry.npmmirror.com/html-tags/-/html-tags-3.3.1.tgz",
+ "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==",
+ "dev": true,
+ "engines": {
+ "node": ">=8"
+ }
+ },
"node_modules/immutable": {
"version": "4.3.4",
"resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.4.tgz",
@@ -1535,6 +2304,24 @@
"node": ">= 10.13.0"
}
},
+ "node_modules/js-tokens": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
+ "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+ "dev": true
+ },
+ "node_modules/jsesc": {
+ "version": "2.5.2",
+ "resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-2.5.2.tgz",
+ "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+ "dev": true,
+ "bin": {
+ "jsesc": "bin/jsesc"
+ },
+ "engines": {
+ "node": ">=4"
+ }
+ },
"node_modules/json-parse-even-better-errors": {
"version": "2.3.1",
"resolved": "https://registry.npmmirror.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
@@ -1549,6 +2336,18 @@
"dev": true,
"peer": true
},
+ "node_modules/json5": {
+ "version": "2.2.3",
+ "resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.3.tgz",
+ "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+ "dev": true,
+ "bin": {
+ "json5": "lib/cli.js"
+ },
+ "engines": {
+ "node": ">=6"
+ }
+ },
"node_modules/loader-runner": {
"version": "4.3.0",
"resolved": "https://registry.npmmirror.com/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -1559,11 +2358,35 @@
"node": ">=6.11.5"
}
},
+ "node_modules/lodash": {
+ "version": "4.17.21",
+ "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
+ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+ },
"node_modules/lodash-es": {
"version": "4.17.21",
"resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
},
+ "node_modules/lodash-unified": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmmirror.com/lodash-unified/-/lodash-unified-1.0.3.tgz",
+ "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
+ "peerDependencies": {
+ "@types/lodash-es": "*",
+ "lodash": "*",
+ "lodash-es": "*"
+ }
+ },
+ "node_modules/lru-cache": {
+ "version": "5.1.1",
+ "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-5.1.1.tgz",
+ "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+ "dev": true,
+ "dependencies": {
+ "yallist": "^3.0.2"
+ }
+ },
"node_modules/magic-string": {
"version": "0.30.5",
"resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.5.tgz",
@@ -1575,6 +2398,11 @@
"node": ">=12"
}
},
+ "node_modules/memoize-one": {
+ "version": "6.0.0",
+ "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz",
+ "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+ },
"node_modules/merge-stream": {
"version": "2.0.0",
"resolved": "https://registry.npmmirror.com/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -1601,6 +2429,12 @@
"node": ">= 0.6"
}
},
+ "node_modules/ms": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
+ "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+ "dev": true
+ },
"node_modules/nanoid": {
"version": "3.3.7",
"resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.7.tgz",
@@ -1622,8 +2456,7 @@
"version": "2.0.13",
"resolved": "https://registry.npmmirror.com/node-releases/-/node-releases-2.0.13.tgz",
"integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==",
- "dev": true,
- "peer": true
+ "dev": true
},
"node_modules/normalize-path": {
"version": "3.0.0",
@@ -1634,6 +2467,11 @@
"node": ">=0.10.0"
}
},
+ "node_modules/normalize-wheel-es": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
+ "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
+ },
"node_modules/picocolors": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz",
@@ -1648,6 +2486,50 @@
"node": ">=8.6"
}
},
+ "node_modules/pinia": {
+ "version": "2.1.7",
+ "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.1.7.tgz",
+ "integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
+ "dependencies": {
+ "@vue/devtools-api": "^6.5.0",
+ "vue-demi": ">=0.14.5"
+ },
+ "peerDependencies": {
+ "@vue/composition-api": "^1.4.0",
+ "typescript": ">=4.4.4",
+ "vue": "^2.6.14 || ^3.3.0"
+ },
+ "peerDependenciesMeta": {
+ "@vue/composition-api": {
+ "optional": true
+ },
+ "typescript": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/pinia/node_modules/vue-demi": {
+ "version": "0.14.6",
+ "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz",
+ "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+ "hasInstallScript": true,
+ "bin": {
+ "vue-demi-fix": "bin/vue-demi-fix.js",
+ "vue-demi-switch": "bin/vue-demi-switch.js"
+ },
+ "engines": {
+ "node": ">=12"
+ },
+ "peerDependencies": {
+ "@vue/composition-api": "^1.0.0-rc.1",
+ "vue": "^3.0.0-0 || ^2.6.0"
+ },
+ "peerDependenciesMeta": {
+ "@vue/composition-api": {
+ "optional": true
+ }
+ }
+ },
"node_modules/postcss": {
"version": "8.4.31",
"resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.31.tgz",
@@ -1812,6 +2694,15 @@
"node": ">= 10.13.0"
}
},
+ "node_modules/semver": {
+ "version": "6.3.1",
+ "resolved": "https://registry.npmmirror.com/semver/-/semver-6.3.1.tgz",
+ "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+ "dev": true,
+ "bin": {
+ "semver": "bin/semver.js"
+ }
+ },
"node_modules/serialize-javascript": {
"version": "6.0.1",
"resolved": "https://registry.npmmirror.com/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
@@ -1864,6 +2755,12 @@
"node": ">=10"
}
},
+ "node_modules/svg-tags": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmmirror.com/svg-tags/-/svg-tags-1.0.0.tgz",
+ "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
+ "dev": true
+ },
"node_modules/tapable": {
"version": "2.2.1",
"resolved": "https://registry.npmmirror.com/tapable/-/tapable-2.2.1.tgz",
@@ -1924,6 +2821,15 @@
}
}
},
+ "node_modules/to-fast-properties": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmmirror.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+ "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+ "dev": true,
+ "engines": {
+ "node": ">=4"
+ }
+ },
"node_modules/to-regex-range": {
"version": "5.0.1",
"resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -1953,7 +2859,6 @@
"resolved": "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
"integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==",
"dev": true,
- "peer": true,
"dependencies": {
"escalade": "^3.1.1",
"picocolors": "^1.0.0"
@@ -2126,6 +3031,12 @@
"node": ">=10.13.0"
}
},
+ "node_modules/yallist": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmmirror.com/yallist/-/yallist-3.1.1.tgz",
+ "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+ "dev": true
+ },
"node_modules/zrender": {
"version": "5.4.4",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.4.tgz",
@@ -2136,10 +3047,289 @@
}
},
"dependencies": {
- "@babel/parser": {
+ "@ampproject/remapping": {
+ "version": "2.2.1",
+ "resolved": "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.2.1.tgz",
+ "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
+ "dev": true,
+ "requires": {
+ "@jridgewell/gen-mapping": "^0.3.0",
+ "@jridgewell/trace-mapping": "^0.3.9"
+ }
+ },
+ "@babel/code-frame": {
+ "version": "7.23.5",
+ "resolved": "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.23.5.tgz",
+ "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==",
+ "dev": true,
+ "requires": {
+ "@babel/highlight": "^7.23.4",
+ "chalk": "^2.4.2"
+ }
+ },
+ "@babel/compat-data": {
+ "version": "7.23.5",
+ "resolved": "https://registry.npmmirror.com/@babel/compat-data/-/compat-data-7.23.5.tgz",
+ "integrity": "sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==",
+ "dev": true
+ },
+ "@babel/core": {
+ "version": "7.23.5",
+ "resolved": "https://registry.npmmirror.com/@babel/core/-/core-7.23.5.tgz",
+ "integrity": "sha512-Cwc2XjUrG4ilcfOw4wBAK+enbdgwAcAJCfGUItPBKR7Mjw4aEfAFYrLxeRp4jWgtNIKn3n2AlBOfwwafl+42/g==",
+ "dev": true,
+ "requires": {
+ "@ampproject/remapping": "^2.2.0",
+ "@babel/code-frame": "^7.23.5",
+ "@babel/generator": "^7.23.5",
+ "@babel/helper-compilation-targets": "^7.22.15",
+ "@babel/helper-module-transforms": "^7.23.3",
+ "@babel/helpers": "^7.23.5",
+ "@babel/parser": "^7.23.5",
+ "@babel/template": "^7.22.15",
+ "@babel/traverse": "^7.23.5",
+ "@babel/types": "^7.23.5",
+ "convert-source-map": "^2.0.0",
+ "debug": "^4.1.0",
+ "gensync": "^1.0.0-beta.2",
+ "json5": "^2.2.3",
+ "semver": "^6.3.1"
+ }
+ },
+ "@babel/generator": {
+ "version": "7.23.5",
+ "resolved": "https://registry.npmmirror.com/@babel/generator/-/generator-7.23.5.tgz",
+ "integrity": "sha512-BPssCHrBD+0YrxviOa3QzpqwhNIXKEtOa2jQrm4FlmkC2apYgRnQcmPWiGZDlGxiNtltnUFolMe8497Esry+jA==",
+ "dev": true,
+ "requires": {
+ "@babel/types": "^7.23.5",
+ "@jridgewell/gen-mapping": "^0.3.2",
+ "@jridgewell/trace-mapping": "^0.3.17",
+ "jsesc": "^2.5.1"
+ }
+ },
+ "@babel/helper-annotate-as-pure": {
+ "version": "7.22.5",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
+ "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
+ "dev": true,
+ "requires": {
+ "@babel/types": "^7.22.5"
+ }
+ },
+ "@babel/helper-compilation-targets": {
+ "version": "7.22.15",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.15.tgz",
+ "integrity": "sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw==",
+ "dev": true,
+ "requires": {
+ "@babel/compat-data": "^7.22.9",
+ "@babel/helper-validator-option": "^7.22.15",
+ "browserslist": "^4.21.9",
+ "lru-cache": "^5.1.1",
+ "semver": "^6.3.1"
+ }
+ },
+ "@babel/helper-create-class-features-plugin": {
+ "version": "7.23.5",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.23.5.tgz",
+ "integrity": "sha512-QELlRWxSpgdwdJzSJn4WAhKC+hvw/AtHbbrIoncKHkhKKR/luAlKkgBDcri1EzWAo8f8VvYVryEHN4tax/V67A==",
+ "dev": true,
+ "requires": {
+ "@babel/helper-annotate-as-pure": "^7.22.5",
+ "@babel/helper-environment-visitor": "^7.22.20",
+ "@babel/helper-function-name": "^7.23.0",
+ "@babel/helper-member-expression-to-functions": "^7.23.0",
+ "@babel/helper-optimise-call-expression": "^7.22.5",
+ "@babel/helper-replace-supers": "^7.22.20",
+ "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+ "@babel/helper-split-export-declaration": "^7.22.6",
+ "semver": "^6.3.1"
+ }
+ },
+ "@babel/helper-environment-visitor": {
+ "version": "7.22.20",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
+ "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
+ "dev": true
+ },
+ "@babel/helper-function-name": {
+ "version": "7.23.0",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
+ "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
+ "dev": true,
+ "requires": {
+ "@babel/template": "^7.22.15",
+ "@babel/types": "^7.23.0"
+ }
+ },
+ "@babel/helper-hoist-variables": {
+ "version": "7.22.5",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
+ "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
+ "dev": true,
+ "requires": {
+ "@babel/types": "^7.22.5"
+ }
+ },
+ "@babel/helper-member-expression-to-functions": {
+ "version": "7.23.0",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.23.0.tgz",
+ "integrity": "sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==",
+ "dev": true,
+ "requires": {
+ "@babel/types": "^7.23.0"
+ }
+ },
+ "@babel/helper-module-imports": {
+ "version": "7.22.15",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
+ "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
+ "dev": true,
+ "requires": {
+ "@babel/types": "^7.22.15"
+ }
+ },
+ "@babel/helper-module-transforms": {
+ "version": "7.23.3",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz",
+ "integrity": "sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==",
+ "dev": true,
+ "requires": {
+ "@babel/helper-environment-visitor": "^7.22.20",
+ "@babel/helper-module-imports": "^7.22.15",
+ "@babel/helper-simple-access": "^7.22.5",
+ "@babel/helper-split-export-declaration": "^7.22.6",
+ "@babel/helper-validator-identifier": "^7.22.20"
+ }
+ },
+ "@babel/helper-optimise-call-expression": {
+ "version": "7.22.5",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz",
+ "integrity": "sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==",
+ "dev": true,
+ "requires": {
+ "@babel/types": "^7.22.5"
+ }
+ },
+ "@babel/helper-plugin-utils": {
+ "version": "7.22.5",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+ "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+ "dev": true
+ },
+ "@babel/helper-replace-supers": {
+ "version": "7.22.20",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-replace-supers/-/helper-replace-supers-7.22.20.tgz",
+ "integrity": "sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==",
+ "dev": true,
+ "requires": {
+ "@babel/helper-environment-visitor": "^7.22.20",
+ "@babel/helper-member-expression-to-functions": "^7.22.15",
+ "@babel/helper-optimise-call-expression": "^7.22.5"
+ }
+ },
+ "@babel/helper-simple-access": {
+ "version": "7.22.5",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
+ "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
+ "dev": true,
+ "requires": {
+ "@babel/types": "^7.22.5"
+ }
+ },
+ "@babel/helper-skip-transparent-expression-wrappers": {
+ "version": "7.22.5",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.22.5.tgz",
+ "integrity": "sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==",
+ "dev": true,
+ "requires": {
+ "@babel/types": "^7.22.5"
+ }
+ },
+ "@babel/helper-split-export-declaration": {
+ "version": "7.22.6",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
+ "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
+ "dev": true,
+ "requires": {
+ "@babel/types": "^7.22.5"
+ }
+ },
+ "@babel/helper-string-parser": {
"version": "7.23.4",
- "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.23.4.tgz",
- "integrity": "sha512-vf3Xna6UEprW+7t6EtOmFpHNAuxw3xqPZghy+brsnusscJRW5BMUzzHZc5ICjULee81WeUV2jjakG09MDglJXQ=="
+ "resolved": "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
+ "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
+ "dev": true
+ },
+ "@babel/helper-validator-identifier": {
+ "version": "7.22.20",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
+ "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
+ "dev": true
+ },
+ "@babel/helper-validator-option": {
+ "version": "7.23.5",
+ "resolved": "https://registry.npmmirror.com/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz",
+ "integrity": "sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==",
+ "dev": true
+ },
+ "@babel/helpers": {
+ "version": "7.23.5",
+ "resolved": "https://registry.npmmirror.com/@babel/helpers/-/helpers-7.23.5.tgz",
+ "integrity": "sha512-oO7us8FzTEsG3U6ag9MfdF1iA/7Z6dz+MtFhifZk8C8o453rGJFFWUP1t+ULM9TUIAzC9uxXEiXjOiVMyd7QPg==",
+ "dev": true,
+ "requires": {
+ "@babel/template": "^7.22.15",
+ "@babel/traverse": "^7.23.5",
+ "@babel/types": "^7.23.5"
+ }
+ },
+ "@babel/highlight": {
+ "version": "7.23.4",
+ "resolved": "https://registry.npmmirror.com/@babel/highlight/-/highlight-7.23.4.tgz",
+ "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
+ "dev": true,
+ "requires": {
+ "@babel/helper-validator-identifier": "^7.22.20",
+ "chalk": "^2.4.2",
+ "js-tokens": "^4.0.0"
+ }
+ },
+ "@babel/parser": {
+ "version": "7.23.5",
+ "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.23.5.tgz",
+ "integrity": "sha512-hOOqoiNXrmGdFbhgCzu6GiURxUgM27Xwd/aPuu8RfHEZPBzL1Z54okAHAQjXfcQNwvrlkAmAp4SlRTZ45vlthQ=="
+ },
+ "@babel/plugin-syntax-jsx": {
+ "version": "7.23.3",
+ "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.23.3.tgz",
+ "integrity": "sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==",
+ "dev": true,
+ "requires": {
+ "@babel/helper-plugin-utils": "^7.22.5"
+ }
+ },
+ "@babel/plugin-syntax-typescript": {
+ "version": "7.23.3",
+ "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.23.3.tgz",
+ "integrity": "sha512-9EiNjVJOMwCO+43TqoTrgQ8jMwcAd0sWyXi9RPfIsLTj4R2MADDDQXELhffaUx/uJv2AYcxBgPwH6j4TIA4ytQ==",
+ "dev": true,
+ "requires": {
+ "@babel/helper-plugin-utils": "^7.22.5"
+ }
+ },
+ "@babel/plugin-transform-typescript": {
+ "version": "7.23.5",
+ "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.23.5.tgz",
+ "integrity": "sha512-2fMkXEJkrmwgu2Bsv1Saxgj30IXZdJ+84lQcKKI7sm719oXs0BBw2ZENKdJdR1PjWndgLCEBNXJOri0fk7RYQA==",
+ "dev": true,
+ "requires": {
+ "@babel/helper-annotate-as-pure": "^7.22.5",
+ "@babel/helper-create-class-features-plugin": "^7.23.5",
+ "@babel/helper-plugin-utils": "^7.22.5",
+ "@babel/plugin-syntax-typescript": "^7.23.3"
+ }
},
"@babel/runtime": {
"version": "7.23.4",
@@ -2149,6 +3339,51 @@
"regenerator-runtime": "^0.14.0"
}
},
+ "@babel/template": {
+ "version": "7.22.15",
+ "resolved": "https://registry.npmmirror.com/@babel/template/-/template-7.22.15.tgz",
+ "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==",
+ "dev": true,
+ "requires": {
+ "@babel/code-frame": "^7.22.13",
+ "@babel/parser": "^7.22.15",
+ "@babel/types": "^7.22.15"
+ }
+ },
+ "@babel/traverse": {
+ "version": "7.23.5",
+ "resolved": "https://registry.npmmirror.com/@babel/traverse/-/traverse-7.23.5.tgz",
+ "integrity": "sha512-czx7Xy5a6sapWWRx61m1Ke1Ra4vczu1mCTtJam5zRTBOonfdJ+S/B6HYmGYu3fJtr8GGET3si6IhgWVBhJ/m8w==",
+ "dev": true,
+ "requires": {
+ "@babel/code-frame": "^7.23.5",
+ "@babel/generator": "^7.23.5",
+ "@babel/helper-environment-visitor": "^7.22.20",
+ "@babel/helper-function-name": "^7.23.0",
+ "@babel/helper-hoist-variables": "^7.22.5",
+ "@babel/helper-split-export-declaration": "^7.22.6",
+ "@babel/parser": "^7.23.5",
+ "@babel/types": "^7.23.5",
+ "debug": "^4.1.0",
+ "globals": "^11.1.0"
+ }
+ },
+ "@babel/types": {
+ "version": "7.23.5",
+ "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.23.5.tgz",
+ "integrity": "sha512-ON5kSOJwVO6xXVRTvOI0eOnWe7VdUcIpsovGo9U/Br4Ie4UVFQTboO2cYnDhAGU6Fp+UxSiT+pMft0SMHfuq6w==",
+ "dev": true,
+ "requires": {
+ "@babel/helper-string-parser": "^7.23.4",
+ "@babel/helper-validator-identifier": "^7.22.20",
+ "to-fast-properties": "^2.0.0"
+ }
+ },
+ "@ctrl/tinycolor": {
+ "version": "3.6.1",
+ "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+ "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA=="
+ },
"@dataview/datav-vue3": {
"version": "0.0.0-test.1672506674342",
"resolved": "https://registry.npmmirror.com/@dataview/datav-vue3/-/datav-vue3-0.0.0-test.1672506674342.tgz",
@@ -2159,6 +3394,12 @@
"lodash-es": "^4.17.21"
}
},
+ "@element-plus/icons-vue": {
+ "version": "2.3.1",
+ "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
+ "integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
+ "requires": {}
+ },
"@esbuild/android-arm": {
"version": "0.19.7",
"resolved": "https://registry.npmmirror.com/@esbuild/android-arm/-/android-arm-0.19.7.tgz",
@@ -2313,6 +3554,28 @@
"dev": true,
"optional": true
},
+ "@floating-ui/core": {
+ "version": "1.5.2",
+ "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.5.2.tgz",
+ "integrity": "sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==",
+ "requires": {
+ "@floating-ui/utils": "^0.1.3"
+ }
+ },
+ "@floating-ui/dom": {
+ "version": "1.5.3",
+ "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.5.3.tgz",
+ "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+ "requires": {
+ "@floating-ui/core": "^1.4.2",
+ "@floating-ui/utils": "^0.1.3"
+ }
+ },
+ "@floating-ui/utils": {
+ "version": "0.1.6",
+ "resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.1.6.tgz",
+ "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+ },
"@jiaminghi/bezier-curve": {
"version": "0.0.9",
"resolved": "https://registry.npmjs.org/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz",
@@ -2371,7 +3634,6 @@
"resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
"integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
"dev": true,
- "peer": true,
"requires": {
"@jridgewell/set-array": "^1.0.1",
"@jridgewell/sourcemap-codec": "^1.4.10",
@@ -2382,15 +3644,13 @@
"version": "3.1.1",
"resolved": "https://registry.npmmirror.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
"integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
- "dev": true,
- "peer": true
+ "dev": true
},
"@jridgewell/set-array": {
"version": "1.1.2",
"resolved": "https://registry.npmmirror.com/@jridgewell/set-array/-/set-array-1.1.2.tgz",
"integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
- "dev": true,
- "peer": true
+ "dev": true
},
"@jridgewell/source-map": {
"version": "0.3.5",
@@ -2413,12 +3673,16 @@
"resolved": "https://registry.npmmirror.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz",
"integrity": "sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==",
"dev": true,
- "peer": true,
"requires": {
"@jridgewell/resolve-uri": "^3.1.0",
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
+ "@popperjs/core": {
+ "version": "npm:@sxzz/popperjs-es@2.11.7",
+ "resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+ "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
+ },
"@rollup/rollup-android-arm-eabi": {
"version": "4.5.1",
"resolved": "https://registry.npmmirror.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.5.1.tgz",
@@ -2539,6 +3803,19 @@
"dev": true,
"peer": true
},
+ "@types/lodash": {
+ "version": "4.14.202",
+ "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.202.tgz",
+ "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ=="
+ },
+ "@types/lodash-es": {
+ "version": "4.17.12",
+ "resolved": "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.12.tgz",
+ "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
+ "requires": {
+ "@types/lodash": "*"
+ }
+ },
"@types/node": {
"version": "20.9.4",
"resolved": "https://registry.npmmirror.com/@types/node/-/node-20.9.4.tgz",
@@ -2549,6 +3826,11 @@
"undici-types": "~5.26.4"
}
},
+ "@types/web-bluetooth": {
+ "version": "0.0.16",
+ "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+ "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
+ },
"@vitejs/plugin-vue": {
"version": "4.5.0",
"resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-4.5.0.tgz",
@@ -2556,6 +3838,40 @@
"dev": true,
"requires": {}
},
+ "@vitejs/plugin-vue-jsx": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue-jsx/-/plugin-vue-jsx-3.1.0.tgz",
+ "integrity": "sha512-w9M6F3LSEU5kszVb9An2/MmXNxocAnUb3WhRr8bHlimhDrXNt6n6D2nJQR3UXpGlZHh/EsgouOHCsM8V3Ln+WA==",
+ "dev": true,
+ "requires": {
+ "@babel/core": "^7.23.3",
+ "@babel/plugin-transform-typescript": "^7.23.3",
+ "@vue/babel-plugin-jsx": "^1.1.5"
+ }
+ },
+ "@vue/babel-helper-vue-transform-on": {
+ "version": "1.1.5",
+ "resolved": "https://registry.npmmirror.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.1.5.tgz",
+ "integrity": "sha512-SgUymFpMoAyWeYWLAY+MkCK3QEROsiUnfaw5zxOVD/M64KQs8D/4oK6Q5omVA2hnvEOE0SCkH2TZxs/jnnUj7w==",
+ "dev": true
+ },
+ "@vue/babel-plugin-jsx": {
+ "version": "1.1.5",
+ "resolved": "https://registry.npmmirror.com/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.1.5.tgz",
+ "integrity": "sha512-nKs1/Bg9U1n3qSWnsHhCVQtAzI6aQXqua8j/bZrau8ywT1ilXQbK4FwEJGmU8fV7tcpuFvWmmN7TMmV1OBma1g==",
+ "dev": true,
+ "requires": {
+ "@babel/helper-module-imports": "^7.22.5",
+ "@babel/plugin-syntax-jsx": "^7.22.5",
+ "@babel/template": "^7.22.5",
+ "@babel/traverse": "^7.22.5",
+ "@babel/types": "^7.22.5",
+ "@vue/babel-helper-vue-transform-on": "^1.1.5",
+ "camelcase": "^6.3.0",
+ "html-tags": "^3.3.1",
+ "svg-tags": "^1.0.0"
+ }
+ },
"@vue/compiler-core": {
"version": "3.3.8",
"resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.3.8.tgz",
@@ -2660,6 +3976,46 @@
"resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.8.tgz",
"integrity": "sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw=="
},
+ "@vueuse/core": {
+ "version": "9.13.0",
+ "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz",
+ "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
+ "requires": {
+ "@types/web-bluetooth": "^0.0.16",
+ "@vueuse/metadata": "9.13.0",
+ "@vueuse/shared": "9.13.0",
+ "vue-demi": "*"
+ },
+ "dependencies": {
+ "vue-demi": {
+ "version": "0.14.6",
+ "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz",
+ "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+ "requires": {}
+ }
+ }
+ },
+ "@vueuse/metadata": {
+ "version": "9.13.0",
+ "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.13.0.tgz",
+ "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ=="
+ },
+ "@vueuse/shared": {
+ "version": "9.13.0",
+ "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.13.0.tgz",
+ "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
+ "requires": {
+ "vue-demi": "*"
+ },
+ "dependencies": {
+ "vue-demi": {
+ "version": "0.14.6",
+ "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz",
+ "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+ "requires": {}
+ }
+ }
+ },
"@webassemblyjs/ast": {
"version": "1.11.6",
"resolved": "https://registry.npmmirror.com/@webassemblyjs/ast/-/ast-1.11.6.tgz",
@@ -2876,6 +4232,15 @@
"resolved": "https://registry.npmmirror.com/amfe-flexible/-/amfe-flexible-2.2.1.tgz",
"integrity": "sha512-L2VfvDzoETBjhRptg5u/IUuzHSuxm22JpSRb404p/TBGeRfwWmmNEbB+TFPIP/sS/+pbM18bCFH9QnMojLuPNw=="
},
+ "ansi-styles": {
+ "version": "3.2.1",
+ "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-3.2.1.tgz",
+ "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+ "dev": true,
+ "requires": {
+ "color-convert": "^1.9.0"
+ }
+ },
"anymatch": {
"version": "3.1.3",
"resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz",
@@ -2886,6 +4251,11 @@
"picomatch": "^2.0.4"
}
},
+ "async-validator": {
+ "version": "4.2.5",
+ "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
+ "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
+ },
"asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
@@ -2921,7 +4291,6 @@
"resolved": "https://registry.npmmirror.com/browserslist/-/browserslist-4.22.1.tgz",
"integrity": "sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==",
"dev": true,
- "peer": true,
"requires": {
"caniuse-lite": "^1.0.30001541",
"electron-to-chromium": "^1.4.535",
@@ -2936,12 +4305,45 @@
"dev": true,
"peer": true
},
+ "camelcase": {
+ "version": "6.3.0",
+ "resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-6.3.0.tgz",
+ "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+ "dev": true
+ },
"caniuse-lite": {
"version": "1.0.30001564",
"resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001564.tgz",
"integrity": "sha512-DqAOf+rhof+6GVx1y+xzbFPeOumfQnhYzVnZD6LAXijR77yPtm9mfOcqOnT3mpnJiZVT+kwLAFnRlZcIz+c6bg==",
+ "dev": true
+ },
+ "chalk": {
+ "version": "2.4.2",
+ "resolved": "https://registry.npmmirror.com/chalk/-/chalk-2.4.2.tgz",
+ "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
"dev": true,
- "peer": true
+ "requires": {
+ "ansi-styles": "^3.2.1",
+ "escape-string-regexp": "^1.0.5",
+ "supports-color": "^5.3.0"
+ },
+ "dependencies": {
+ "has-flag": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-3.0.0.tgz",
+ "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+ "dev": true
+ },
+ "supports-color": {
+ "version": "5.5.0",
+ "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-5.5.0.tgz",
+ "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+ "dev": true,
+ "requires": {
+ "has-flag": "^3.0.0"
+ }
+ }
+ }
},
"chokidar": {
"version": "3.5.3",
@@ -2971,6 +4373,21 @@
"resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.3.2.tgz",
"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
},
+ "color-convert": {
+ "version": "1.9.3",
+ "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-1.9.3.tgz",
+ "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+ "dev": true,
+ "requires": {
+ "color-name": "1.1.3"
+ }
+ },
+ "color-name": {
+ "version": "1.1.3",
+ "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.3.tgz",
+ "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+ "dev": true
+ },
"combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -2986,11 +4403,31 @@
"dev": true,
"peer": true
},
+ "convert-source-map": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-2.0.0.tgz",
+ "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+ "dev": true
+ },
"csstype": {
"version": "3.1.2",
"resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.2.tgz",
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
},
+ "dayjs": {
+ "version": "1.11.10",
+ "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz",
+ "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
+ },
+ "debug": {
+ "version": "4.3.4",
+ "resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz",
+ "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+ "dev": true,
+ "requires": {
+ "ms": "2.1.2"
+ }
+ },
"delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -3009,8 +4446,29 @@
"version": "1.4.590",
"resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.590.tgz",
"integrity": "sha512-hohItzsQcG7/FBsviCYMtQwUSWvVF7NVqPOnJCErWsAshsP/CR2LAXdmq276RbESNdhxiAq5/vRo1g2pxGXVww==",
- "dev": true,
- "peer": true
+ "dev": true
+ },
+ "element-plus": {
+ "version": "2.4.3",
+ "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.4.3.tgz",
+ "integrity": "sha512-b3q26j+lM4SBqiyzw8HybybGnP2pk4MWgrnzzzYW5qKQUgV6EG1Zg7nMCfgCVccI8tNvZoTiUHb2mFaiB9qT8w==",
+ "requires": {
+ "@ctrl/tinycolor": "^3.4.1",
+ "@element-plus/icons-vue": "^2.3.1",
+ "@floating-ui/dom": "^1.0.1",
+ "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
+ "@types/lodash": "^4.14.182",
+ "@types/lodash-es": "^4.17.6",
+ "@vueuse/core": "^9.1.0",
+ "async-validator": "^4.2.5",
+ "dayjs": "^1.11.3",
+ "escape-html": "^1.0.3",
+ "lodash": "^4.17.21",
+ "lodash-es": "^4.17.21",
+ "lodash-unified": "^1.0.2",
+ "memoize-one": "^6.0.0",
+ "normalize-wheel-es": "^1.2.0"
+ }
},
"enhanced-resolve": {
"version": "5.15.0",
@@ -3064,8 +4522,18 @@
"version": "3.1.1",
"resolved": "https://registry.npmmirror.com/escalade/-/escalade-3.1.1.tgz",
"integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
- "dev": true,
- "peer": true
+ "dev": true
+ },
+ "escape-html": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmmirror.com/escape-html/-/escape-html-1.0.3.tgz",
+ "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+ },
+ "escape-string-regexp": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+ "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+ "dev": true
},
"eslint-scope": {
"version": "5.1.1",
@@ -3161,6 +4629,12 @@
"dev": true,
"optional": true
},
+ "gensync": {
+ "version": "1.0.0-beta.2",
+ "resolved": "https://registry.npmmirror.com/gensync/-/gensync-1.0.0-beta.2.tgz",
+ "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+ "dev": true
+ },
"glob-parent": {
"version": "5.1.2",
"resolved": "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz",
@@ -3177,6 +4651,12 @@
"dev": true,
"peer": true
},
+ "globals": {
+ "version": "11.12.0",
+ "resolved": "https://registry.npmmirror.com/globals/-/globals-11.12.0.tgz",
+ "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+ "dev": true
+ },
"graceful-fs": {
"version": "4.2.11",
"resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -3191,6 +4671,12 @@
"dev": true,
"peer": true
},
+ "html-tags": {
+ "version": "3.3.1",
+ "resolved": "https://registry.npmmirror.com/html-tags/-/html-tags-3.3.1.tgz",
+ "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==",
+ "dev": true
+ },
"immutable": {
"version": "4.3.4",
"resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.4.tgz",
@@ -3239,6 +4725,18 @@
"supports-color": "^8.0.0"
}
},
+ "js-tokens": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
+ "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+ "dev": true
+ },
+ "jsesc": {
+ "version": "2.5.2",
+ "resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-2.5.2.tgz",
+ "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+ "dev": true
+ },
"json-parse-even-better-errors": {
"version": "2.3.1",
"resolved": "https://registry.npmmirror.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
@@ -3253,6 +4751,12 @@
"dev": true,
"peer": true
},
+ "json5": {
+ "version": "2.2.3",
+ "resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.3.tgz",
+ "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+ "dev": true
+ },
"loader-runner": {
"version": "4.3.0",
"resolved": "https://registry.npmmirror.com/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -3260,11 +4764,31 @@
"dev": true,
"peer": true
},
+ "lodash": {
+ "version": "4.17.21",
+ "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
+ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+ },
"lodash-es": {
"version": "4.17.21",
"resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
},
+ "lodash-unified": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmmirror.com/lodash-unified/-/lodash-unified-1.0.3.tgz",
+ "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
+ "requires": {}
+ },
+ "lru-cache": {
+ "version": "5.1.1",
+ "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-5.1.1.tgz",
+ "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+ "dev": true,
+ "requires": {
+ "yallist": "^3.0.2"
+ }
+ },
"magic-string": {
"version": "0.30.5",
"resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.5.tgz",
@@ -3273,6 +4797,11 @@
"@jridgewell/sourcemap-codec": "^1.4.15"
}
},
+ "memoize-one": {
+ "version": "6.0.0",
+ "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz",
+ "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+ },
"merge-stream": {
"version": "2.0.0",
"resolved": "https://registry.npmmirror.com/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -3293,6 +4822,12 @@
"mime-db": "1.52.0"
}
},
+ "ms": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
+ "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+ "dev": true
+ },
"nanoid": {
"version": "3.3.7",
"resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.7.tgz",
@@ -3308,8 +4843,7 @@
"version": "2.0.13",
"resolved": "https://registry.npmmirror.com/node-releases/-/node-releases-2.0.13.tgz",
"integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==",
- "dev": true,
- "peer": true
+ "dev": true
},
"normalize-path": {
"version": "3.0.0",
@@ -3317,6 +4851,11 @@
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
"dev": true
},
+ "normalize-wheel-es": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
+ "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
+ },
"picocolors": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz",
@@ -3328,6 +4867,23 @@
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
"dev": true
},
+ "pinia": {
+ "version": "2.1.7",
+ "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.1.7.tgz",
+ "integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
+ "requires": {
+ "@vue/devtools-api": "^6.5.0",
+ "vue-demi": ">=0.14.5"
+ },
+ "dependencies": {
+ "vue-demi": {
+ "version": "0.14.6",
+ "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz",
+ "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+ "requires": {}
+ }
+ }
+ },
"postcss": {
"version": "8.4.31",
"resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.31.tgz",
@@ -3441,6 +4997,12 @@
"ajv-keywords": "^3.5.2"
}
},
+ "semver": {
+ "version": "6.3.1",
+ "resolved": "https://registry.npmmirror.com/semver/-/semver-6.3.1.tgz",
+ "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+ "dev": true
+ },
"serialize-javascript": {
"version": "6.0.1",
"resolved": "https://registry.npmmirror.com/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
@@ -3484,6 +5046,12 @@
"has-flag": "^4.0.0"
}
},
+ "svg-tags": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmmirror.com/svg-tags/-/svg-tags-1.0.0.tgz",
+ "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
+ "dev": true
+ },
"tapable": {
"version": "2.2.1",
"resolved": "https://registry.npmmirror.com/tapable/-/tapable-2.2.1.tgz",
@@ -3518,6 +5086,12 @@
"terser": "^5.16.8"
}
},
+ "to-fast-properties": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmmirror.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+ "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+ "dev": true
+ },
"to-regex-range": {
"version": "5.0.1",
"resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -3544,7 +5118,6 @@
"resolved": "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
"integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==",
"dev": true,
- "peer": true,
"requires": {
"escalade": "^3.1.1",
"picocolors": "^1.0.0"
@@ -3643,6 +5216,12 @@
"dev": true,
"peer": true
},
+ "yallist": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmmirror.com/yallist/-/yallist-3.1.1.tgz",
+ "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+ "dev": true
+ },
"zrender": {
"version": "5.4.4",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.4.tgz",
diff --git a/package.json b/package.json
index 4f506d6..0a1f430 100644
--- a/package.json
+++ b/package.json
@@ -14,12 +14,15 @@
"amfe-flexible": "^2.2.1",
"axios": "^1.6.2",
"echarts": "^5.4.3",
+ "element-plus": "^2.4.3",
+ "pinia": "^2.1.7",
"postcss-pxtorem": "^5.1.1",
"vue": "^3.3.8",
"vue-router": "^4.2.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.5.0",
+ "@vitejs/plugin-vue-jsx": "^3.1.0",
"postcss-pxtorem": "^6.0.0",
"sass": "^1.69.5",
"sass-loader": "^13.3.2",
diff --git a/src/App.vue b/src/App.vue
index a962a49..4025011 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,10 @@
"recorder.getBlob()"
method. Usage of "getBlob" is recommended, though.
- * @property {Blob} blob - Recorded Blob can be accessed using this property.
- * @memberof RecordRTC
- * @instance
- * @readonly
- * @example
- * recorder.stopRecording(function() {
- * var blob = this.blob;
- *
- * // below one is recommended
- * var blob = this.getBlob();
- * });
- */
- blob: null,
-
- /**
- * This works only with {recorderType:StereoAudioRecorder}. Use this property on "stopRecording" to verify the encoder's sample-rates.
- * @property {number} bufferSize - Buffer-size used to encode the WAV container
- * @memberof RecordRTC
- * @instance
- * @readonly
- * @example
- * recorder.stopRecording(function() {
- * alert('Recorder used this buffer-size: ' + this.bufferSize);
- * });
- */
- bufferSize: 0,
-
- /**
- * This works only with {recorderType:StereoAudioRecorder}. Use this property on "stopRecording" to verify the encoder's sample-rates.
- * @property {number} sampleRate - Sample-rates used to encode the WAV container
- * @memberof RecordRTC
- * @instance
- * @readonly
- * @example
- * recorder.stopRecording(function() {
- * alert('Recorder used these sample-rates: ' + this.sampleRate);
- * });
- */
- sampleRate: 0,
-
- /**
- * {recorderType:StereoAudioRecorder} returns ArrayBuffer object.
- * @property {ArrayBuffer} buffer - Audio ArrayBuffer, supported only in Chrome.
- * @memberof RecordRTC
- * @instance
- * @readonly
- * @example
- * recorder.stopRecording(function() {
- * var arrayBuffer = this.buffer;
- * alert(arrayBuffer.byteLength);
- * });
- */
- buffer: null,
-
- /**
- * This method resets the recorder. So that you can reuse single recorder instance many times.
- * @method
- * @memberof RecordRTC
- * @instance
- * @example
- * recorder.reset();
- * recorder.startRecording();
- */
- reset: function () {
- if (self.state === 'recording' && !config.disableLogs) {
- console.warn('Stop an active recorder.');
- }
-
- if (mediaRecorder && typeof mediaRecorder.clearRecordedData === 'function') {
- mediaRecorder.clearRecordedData();
- }
- mediaRecorder = null;
- setState('inactive');
- self.blob = null;
- },
-
- /**
- * This method is called whenever recorder's state changes. Use this as an "event".
- * @property {String} state - A recorder's state can be: recording, paused, stopped or inactive.
- * @method
- * @memberof RecordRTC
- * @instance
- * @example
- * recorder.onStateChanged = function(state) {
- * console.log('Recorder state: ', state);
- * };
- */
- onStateChanged: function (state) {
- if (!config.disableLogs) {
- console.log('Recorder state changed:', state);
- }
- },
-
- /**
- * A recorder can have inactive, recording, paused or stopped states.
- * @property {String} state - A recorder's state can be: recording, paused, stopped or inactive.
- * @memberof RecordRTC
- * @static
- * @readonly
- * @example
- * // this looper function will keep you updated about the recorder's states.
- * (function looper() {
- * document.querySelector('h1').innerHTML = 'Recorder\'s state is: ' + recorder.state;
- * if(recorder.state === 'stopped') return; // ignore+stop
- * setTimeout(looper, 1000); // update after every 3-seconds
- * })();
- * recorder.startRecording();
- */
- state: 'inactive',
-
- /**
- * Get recorder's readonly state.
- * @method
- * @memberof RecordRTC
- * @example
- * var state = recorder.getState();
- * @returns {String} Returns recording state.
- */
- getState: function () {
- return self.state;
- },
-
- /**
- * Destroy RecordRTC instance. Clear all recorders and objects.
- * @method
- * @memberof RecordRTC
- * @example
- * recorder.destroy();
- */
- destroy: function () {
- var disableLogsCache = config.disableLogs;
-
- config = {
- disableLogs: true
- };
- self.reset();
- setState('destroyed');
- returnObject = self = null;
-
- if (Storage.AudioContextConstructor) {
- Storage.AudioContextConstructor.close();
- Storage.AudioContextConstructor = null;
- }
-
- config.disableLogs = disableLogsCache;
-
- if (!config.disableLogs) {
- console.log('RecordRTC is destroyed.');
- }
- },
-
- /**
- * RecordRTC version number
- * @property {String} version - Release version number.
- * @memberof RecordRTC
- * @static
- * @readonly
- * @example
- * alert(recorder.version);
- */
- version: '5.6.2'
- };
-
- if (!this) {
- self = returnObject;
- return returnObject;
- }
-
- // if someone wants to use RecordRTC with the "new" keyword.
- for (var prop in returnObject) {
- this[prop] = returnObject[prop];
- }
-
- self = this;
-
- return returnObject;
- }
-
- RecordRTC.version = '5.6.2';
-
- {
- module.exports = RecordRTC;
- }
-
- RecordRTC.getFromDisk = function (type, callback) {
- if (!callback) {
- throw 'callback is mandatory.';
- }
-
- console.log('Getting recorded ' + (type === 'all' ? 'blobs' : type + ' blob ') + ' from disk!');
- DiskStorage.Fetch(function (dataURL, _type) {
- if (type !== 'all' && _type === type + 'Blob' && callback) {
- callback(dataURL);
- }
-
- if (type === 'all' && callback) {
- callback(dataURL, _type.replace('Blob', ''));
- }
- });
- };
-
- /**
- * This method can be used to store recorded blobs into IndexedDB storage.
- * @param {object} options - {audio: Blob, video: Blob, gif: Blob}
- * @method
- * @memberof RecordRTC
- * @example
- * RecordRTC.writeToDisk({
- * audio: audioBlob,
- * video: videoBlob,
- * gif : gifBlob
- * });
- */
- RecordRTC.writeToDisk = function (options) {
- console.log('Writing recorded blob(s) to disk!');
- options = options || {};
- if (options.audio && options.video && options.gif) {
- options.audio.getDataURL(function (audioDataURL) {
- options.video.getDataURL(function (videoDataURL) {
- options.gif.getDataURL(function (gifDataURL) {
- DiskStorage.Store({
- audioBlob: audioDataURL,
- videoBlob: videoDataURL,
- gifBlob: gifDataURL
- });
- });
- });
- });
- } else if (options.audio && options.video) {
- options.audio.getDataURL(function (audioDataURL) {
- options.video.getDataURL(function (videoDataURL) {
- DiskStorage.Store({
- audioBlob: audioDataURL,
- videoBlob: videoDataURL
- });
- });
- });
- } else if (options.audio && options.gif) {
- options.audio.getDataURL(function (audioDataURL) {
- options.gif.getDataURL(function (gifDataURL) {
- DiskStorage.Store({
- audioBlob: audioDataURL,
- gifBlob: gifDataURL
- });
- });
- });
- } else if (options.video && options.gif) {
- options.video.getDataURL(function (videoDataURL) {
- options.gif.getDataURL(function (gifDataURL) {
- DiskStorage.Store({
- videoBlob: videoDataURL,
- gifBlob: gifDataURL
- });
- });
- });
- } else if (options.audio) {
- options.audio.getDataURL(function (audioDataURL) {
- DiskStorage.Store({
- audioBlob: audioDataURL
- });
- });
- } else if (options.video) {
- options.video.getDataURL(function (videoDataURL) {
- DiskStorage.Store({
- videoBlob: videoDataURL
- });
- });
- } else if (options.gif) {
- options.gif.getDataURL(function (gifDataURL) {
- DiskStorage.Store({
- gifBlob: gifDataURL
- });
- });
- }
- };
-
- // __________________________
- // RecordRTC-Configuration.js
-
- /**
- * {@link RecordRTCConfiguration} is an inner/private helper for {@link RecordRTC}.
- * @summary It configures the 2nd parameter passed over {@link RecordRTC} and returns a valid "config" object.
- * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT}
- * @author {@link https://MuazKhan.com|Muaz Khan}
- * @typedef RecordRTCConfiguration
- * @class
- * @example
- * var options = RecordRTCConfiguration(mediaStream, options);
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- * @param {MediaStream} mediaStream - MediaStream object fetched using getUserMedia API or generated using captureStreamUntilEnded or WebAudio API.
- * @param {object} config - {type:"video", disableLogs: true, numberOfAudioChannels: 1, bufferSize: 0, sampleRate: 0, video: HTMLVideoElement, getNativeBlob:true, etc.}
- */
-
- function RecordRTCConfiguration(mediaStream, config) {
- if (!config.recorderType && !config.type) {
- if (!!config.audio && !!config.video) {
- config.type = 'video';
- } else if (!!config.audio && !config.video) {
- config.type = 'audio';
- }
- }
-
- if (config.recorderType && !config.type) {
- if (config.recorderType === WhammyRecorder || config.recorderType === CanvasRecorder || (typeof WebAssemblyRecorder !== 'undefined' && config.recorderType === WebAssemblyRecorder)) {
- config.type = 'video';
- } else if (config.recorderType === GifRecorder) {
- config.type = 'gif';
- } else if (config.recorderType === StereoAudioRecorder) {
- config.type = 'audio';
- } else if (config.recorderType === MediaStreamRecorder) {
- if (getTracks(mediaStream, 'audio').length && getTracks(mediaStream, 'video').length) {
- config.type = 'video';
- } else if (!getTracks(mediaStream, 'audio').length && getTracks(mediaStream, 'video').length) {
- config.type = 'video';
- } else if (getTracks(mediaStream, 'audio').length && !getTracks(mediaStream, 'video').length) {
- config.type = 'audio';
- } else;
- }
- }
-
- if (typeof MediaStreamRecorder !== 'undefined' && typeof MediaRecorder !== 'undefined' && 'requestData' in MediaRecorder.prototype) {
- if (!config.mimeType) {
- config.mimeType = 'video/webm';
- }
-
- if (!config.type) {
- config.type = config.mimeType.split('/')[0];
- }
-
- if (!config.bitsPerSecond);
- }
-
- // consider default type=audio
- if (!config.type) {
- if (config.mimeType) {
- config.type = config.mimeType.split('/')[0];
- }
- if (!config.type) {
- config.type = 'audio';
- }
- }
-
- return config;
- }
-
- // __________________
- // GetRecorderType.js
-
- /**
- * {@link GetRecorderType} is an inner/private helper for {@link RecordRTC}.
- * @summary It returns best recorder-type available for your browser.
- * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT}
- * @author {@link https://MuazKhan.com|Muaz Khan}
- * @typedef GetRecorderType
- * @class
- * @example
- * var RecorderType = GetRecorderType(options);
- * var recorder = new RecorderType(options);
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- * @param {MediaStream} mediaStream - MediaStream object fetched using getUserMedia API or generated using captureStreamUntilEnded or WebAudio API.
- * @param {object} config - {type:"video", disableLogs: true, numberOfAudioChannels: 1, bufferSize: 0, sampleRate: 0, video: HTMLVideoElement, etc.}
- */
-
- function GetRecorderType(mediaStream, config) {
- var recorder;
-
- // StereoAudioRecorder can work with all three: Edge, Firefox and Chrome
- // todo: detect if it is Edge, then auto use: StereoAudioRecorder
- if (isChrome || isEdge || isOpera) {
- // Media Stream Recording API has not been implemented in chrome yet;
- // That's why using WebAudio API to record stereo audio in WAV format
- recorder = StereoAudioRecorder;
- }
-
- if (typeof MediaRecorder !== 'undefined' && 'requestData' in MediaRecorder.prototype && !isChrome) {
- recorder = MediaStreamRecorder;
- }
-
- // video recorder (in WebM format)
- if (config.type === 'video' && (isChrome || isOpera)) {
- recorder = WhammyRecorder;
-
- if (typeof WebAssemblyRecorder !== 'undefined' && typeof ReadableStream !== 'undefined') {
- recorder = WebAssemblyRecorder;
- }
- }
-
- // video recorder (in Gif format)
- if (config.type === 'gif') {
- recorder = GifRecorder;
- }
-
- // html2canvas recording!
- if (config.type === 'canvas') {
- recorder = CanvasRecorder;
- }
-
- if (isMediaRecorderCompatible() && recorder !== CanvasRecorder && recorder !== GifRecorder && typeof MediaRecorder !== 'undefined' && 'requestData' in MediaRecorder.prototype) {
- if (getTracks(mediaStream, 'video').length || getTracks(mediaStream, 'audio').length) {
- // audio-only recording
- if (config.type === 'audio') {
- if (typeof MediaRecorder.isTypeSupported === 'function' && MediaRecorder.isTypeSupported('audio/webm')) {
- recorder = MediaStreamRecorder;
- }
- // else recorder = StereoAudioRecorder;
- } else {
- // video or screen tracks
- if (typeof MediaRecorder.isTypeSupported === 'function' && MediaRecorder.isTypeSupported('video/webm')) {
- recorder = MediaStreamRecorder;
- }
- }
- }
- }
-
- if (mediaStream instanceof Array && mediaStream.length) {
- recorder = MultiStreamRecorder;
- }
-
- if (config.recorderType) {
- recorder = config.recorderType;
- }
-
- if (!config.disableLogs && !!recorder && !!recorder.name) {
- console.log('Using recorderType:', recorder.name || recorder.constructor.name);
- }
-
- if (!recorder && isSafari) {
- recorder = MediaStreamRecorder;
- }
-
- return recorder;
- }
-
- // _____________
- // MRecordRTC.js
-
- /**
- * MRecordRTC runs on top of {@link RecordRTC} to bring multiple recordings in a single place, by providing simple API.
- * @summary MRecordRTC stands for "Multiple-RecordRTC".
- * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT}
- * @author {@link https://MuazKhan.com|Muaz Khan}
- * @typedef MRecordRTC
- * @class
- * @example
- * var recorder = new MRecordRTC();
- * recorder.addStream(MediaStream);
- * recorder.mediaType = {
- * audio: true, // or StereoAudioRecorder or MediaStreamRecorder
- * video: true, // or WhammyRecorder or MediaStreamRecorder or WebAssemblyRecorder or CanvasRecorder
- * gif: true // or GifRecorder
- * };
- * // mimeType is optional and should be set only in advance cases.
- * recorder.mimeType = {
- * audio: 'audio/wav',
- * video: 'video/webm',
- * gif: 'image/gif'
- * };
- * recorder.startRecording();
- * @see For further information:
- * @see {@link https://github.com/muaz-khan/RecordRTC/tree/master/MRecordRTC|MRecordRTC Source Code}
- * @param {MediaStream} mediaStream - MediaStream object fetched using getUserMedia API or generated using captureStreamUntilEnded or WebAudio API.
- * @requires {@link RecordRTC}
- */
-
- function MRecordRTC(mediaStream) {
-
- /**
- * This method attaches MediaStream object to {@link MRecordRTC}.
- * @param {MediaStream} mediaStream - A MediaStream object, either fetched using getUserMedia API, or generated using captureStreamUntilEnded or WebAudio API.
- * @method
- * @memberof MRecordRTC
- * @example
- * recorder.addStream(MediaStream);
- */
- this.addStream = function (_mediaStream) {
- if (_mediaStream) {
- mediaStream = _mediaStream;
- }
- };
-
- /**
- * This property can be used to set the recording type e.g. audio, or video, or gif, or canvas.
- * @property {object} mediaType - {audio: true, video: true, gif: true}
- * @memberof MRecordRTC
- * @example
- * var recorder = new MRecordRTC();
- * recorder.mediaType = {
- * audio: true, // TRUE or StereoAudioRecorder or MediaStreamRecorder
- * video: true, // TRUE or WhammyRecorder or MediaStreamRecorder or WebAssemblyRecorder or CanvasRecorder
- * gif : true // TRUE or GifRecorder
- * };
- */
- this.mediaType = {
- audio: true,
- video: true
- };
-
- /**
- * This method starts recording.
- * @method
- * @memberof MRecordRTC
- * @example
- * recorder.startRecording();
- */
- this.startRecording = function () {
- var mediaType = this.mediaType;
- var recorderType;
- var mimeType = this.mimeType || {
- audio: null,
- video: null,
- gif: null
- };
-
- if (typeof mediaType.audio !== 'function' && isMediaRecorderCompatible() && !getTracks(mediaStream, 'audio').length) {
- mediaType.audio = false;
- }
-
- if (typeof mediaType.video !== 'function' && isMediaRecorderCompatible() && !getTracks(mediaStream, 'video').length) {
- mediaType.video = false;
- }
-
- if (typeof mediaType.gif !== 'function' && isMediaRecorderCompatible() && !getTracks(mediaStream, 'video').length) {
- mediaType.gif = false;
- }
-
- if (!mediaType.audio && !mediaType.video && !mediaType.gif) {
- throw 'MediaStream must have either audio or video tracks.';
- }
-
- if (!!mediaType.audio) {
- recorderType = null;
- if (typeof mediaType.audio === 'function') {
- recorderType = mediaType.audio;
- }
-
- this.audioRecorder = new RecordRTC(mediaStream, {
- type: 'audio',
- bufferSize: this.bufferSize,
- sampleRate: this.sampleRate,
- numberOfAudioChannels: this.numberOfAudioChannels || 2,
- disableLogs: this.disableLogs,
- recorderType: recorderType,
- mimeType: mimeType.audio,
- timeSlice: this.timeSlice,
- onTimeStamp: this.onTimeStamp
- });
-
- if (!mediaType.video) {
- this.audioRecorder.startRecording();
- }
- }
-
- if (!!mediaType.video) {
- recorderType = null;
- if (typeof mediaType.video === 'function') {
- recorderType = mediaType.video;
- }
-
- var newStream = mediaStream;
-
- if (isMediaRecorderCompatible() && !!mediaType.audio && typeof mediaType.audio === 'function') {
- var videoTrack = getTracks(mediaStream, 'video')[0];
-
- if (isFirefox) {
- newStream = new MediaStream();
- newStream.addTrack(videoTrack);
-
- if (recorderType && recorderType === WhammyRecorder) {
- // Firefox does NOT supports webp-encoding yet
- // But Firefox do supports WebAssemblyRecorder
- recorderType = MediaStreamRecorder;
- }
- } else {
- newStream = new MediaStream();
- newStream.addTrack(videoTrack);
- }
- }
-
- this.videoRecorder = new RecordRTC(newStream, {
- type: 'video',
- video: this.video,
- canvas: this.canvas,
- frameInterval: this.frameInterval || 10,
- disableLogs: this.disableLogs,
- recorderType: recorderType,
- mimeType: mimeType.video,
- timeSlice: this.timeSlice,
- onTimeStamp: this.onTimeStamp,
- workerPath: this.workerPath,
- webAssemblyPath: this.webAssemblyPath,
- frameRate: this.frameRate, // used by WebAssemblyRecorder; values: usually 30; accepts any.
- bitrate: this.bitrate // used by WebAssemblyRecorder; values: 0 to 1000+
- });
-
- if (!mediaType.audio) {
- this.videoRecorder.startRecording();
- }
- }
-
- if (!!mediaType.audio && !!mediaType.video) {
- var self = this;
-
- var isSingleRecorder = isMediaRecorderCompatible() === true;
-
- if (mediaType.audio instanceof StereoAudioRecorder && !!mediaType.video) {
- isSingleRecorder = false;
- } else if (mediaType.audio !== true && mediaType.video !== true && mediaType.audio !== mediaType.video) {
- isSingleRecorder = false;
- }
-
- if (isSingleRecorder === true) {
- self.audioRecorder = null;
- self.videoRecorder.startRecording();
- } else {
- self.videoRecorder.initRecorder(function () {
- self.audioRecorder.initRecorder(function () {
- // Both recorders are ready to record things accurately
- self.videoRecorder.startRecording();
- self.audioRecorder.startRecording();
- });
- });
- }
- }
-
- if (!!mediaType.gif) {
- recorderType = null;
- if (typeof mediaType.gif === 'function') {
- recorderType = mediaType.gif;
- }
- this.gifRecorder = new RecordRTC(mediaStream, {
- type: 'gif',
- frameRate: this.frameRate || 200,
- quality: this.quality || 10,
- disableLogs: this.disableLogs,
- recorderType: recorderType,
- mimeType: mimeType.gif
- });
- this.gifRecorder.startRecording();
- }
- };
-
- /**
- * This method stops recording.
- * @param {function} callback - Callback function is invoked when all encoders finished their jobs.
- * @method
- * @memberof MRecordRTC
- * @example
- * recorder.stopRecording(function(recording){
- * var audioBlob = recording.audio;
- * var videoBlob = recording.video;
- * var gifBlob = recording.gif;
- * });
- */
- this.stopRecording = function (callback) {
- callback = callback || function () { };
-
- if (this.audioRecorder) {
- this.audioRecorder.stopRecording(function (blobURL) {
- callback(blobURL, 'audio');
- });
- }
-
- if (this.videoRecorder) {
- this.videoRecorder.stopRecording(function (blobURL) {
- callback(blobURL, 'video');
- });
- }
-
- if (this.gifRecorder) {
- this.gifRecorder.stopRecording(function (blobURL) {
- callback(blobURL, 'gif');
- });
- }
- };
-
- /**
- * This method pauses recording.
- * @method
- * @memberof MRecordRTC
- * @example
- * recorder.pauseRecording();
- */
- this.pauseRecording = function () {
- if (this.audioRecorder) {
- this.audioRecorder.pauseRecording();
- }
-
- if (this.videoRecorder) {
- this.videoRecorder.pauseRecording();
- }
-
- if (this.gifRecorder) {
- this.gifRecorder.pauseRecording();
- }
- };
-
- /**
- * This method resumes recording.
- * @method
- * @memberof MRecordRTC
- * @example
- * recorder.resumeRecording();
- */
- this.resumeRecording = function () {
- if (this.audioRecorder) {
- this.audioRecorder.resumeRecording();
- }
-
- if (this.videoRecorder) {
- this.videoRecorder.resumeRecording();
- }
-
- if (this.gifRecorder) {
- this.gifRecorder.resumeRecording();
- }
- };
-
- /**
- * This method can be used to manually get all recorded blobs.
- * @param {function} callback - All recorded blobs are passed back to the "callback" function.
- * @method
- * @memberof MRecordRTC
- * @example
- * recorder.getBlob(function(recording){
- * var audioBlob = recording.audio;
- * var videoBlob = recording.video;
- * var gifBlob = recording.gif;
- * });
- * // or
- * var audioBlob = recorder.getBlob().audio;
- * var videoBlob = recorder.getBlob().video;
- */
- this.getBlob = function (callback) {
- var output = {};
-
- if (this.audioRecorder) {
- output.audio = this.audioRecorder.getBlob();
- }
-
- if (this.videoRecorder) {
- output.video = this.videoRecorder.getBlob();
- }
-
- if (this.gifRecorder) {
- output.gif = this.gifRecorder.getBlob();
- }
-
- if (callback) {
- callback(output);
- }
-
- return output;
- };
-
- /**
- * Destroy all recorder instances.
- * @method
- * @memberof MRecordRTC
- * @example
- * recorder.destroy();
- */
- this.destroy = function () {
- if (this.audioRecorder) {
- this.audioRecorder.destroy();
- this.audioRecorder = null;
- }
-
- if (this.videoRecorder) {
- this.videoRecorder.destroy();
- this.videoRecorder = null;
- }
-
- if (this.gifRecorder) {
- this.gifRecorder.destroy();
- this.gifRecorder = null;
- }
- };
-
- /**
- * This method can be used to manually get all recorded blobs' DataURLs.
- * @param {function} callback - All recorded blobs' DataURLs are passed back to the "callback" function.
- * @method
- * @memberof MRecordRTC
- * @example
- * recorder.getDataURL(function(recording){
- * var audioDataURL = recording.audio;
- * var videoDataURL = recording.video;
- * var gifDataURL = recording.gif;
- * });
- */
- this.getDataURL = function (callback) {
- this.getBlob(function (blob) {
- if (blob.audio && blob.video) {
- getDataURL(blob.audio, function (_audioDataURL) {
- getDataURL(blob.video, function (_videoDataURL) {
- callback({
- audio: _audioDataURL,
- video: _videoDataURL
- });
- });
- });
- } else if (blob.audio) {
- getDataURL(blob.audio, function (_audioDataURL) {
- callback({
- audio: _audioDataURL
- });
- });
- } else if (blob.video) {
- getDataURL(blob.video, function (_videoDataURL) {
- callback({
- video: _videoDataURL
- });
- });
- }
- });
-
- function getDataURL(blob, callback00) {
- if (typeof Worker !== 'undefined') {
- var webWorker = processInWebWorker(function readFile(_blob) {
- postMessage(new FileReaderSync().readAsDataURL(_blob));
- });
-
- webWorker.onmessage = function (event) {
- callback00(event.data);
- };
-
- webWorker.postMessage(blob);
- } else {
- var reader = new FileReader();
- reader.readAsDataURL(blob);
- reader.onload = function (event) {
- callback00(event.target.result);
- };
- }
- }
-
- function processInWebWorker(_function) {
- var blob = URL.createObjectURL(new Blob([_function.toString(),
- 'this.onmessage = function (eee) {' + _function.name + '(eee.data);}'
- ], {
- type: 'application/javascript'
- }));
-
- var worker = new Worker(blob);
- var url;
- if (typeof URL !== 'undefined') {
- url = URL;
- } else if (typeof webkitURL !== 'undefined') {
- url = webkitURL;
- } else {
- throw 'Neither URL nor webkitURL detected.';
- }
- url.revokeObjectURL(blob);
- return worker;
- }
- };
-
- /**
- * This method can be used to ask {@link MRecordRTC} to write all recorded blobs into IndexedDB storage.
- * @method
- * @memberof MRecordRTC
- * @example
- * recorder.writeToDisk();
- */
- this.writeToDisk = function () {
- RecordRTC.writeToDisk({
- audio: this.audioRecorder,
- video: this.videoRecorder,
- gif: this.gifRecorder
- });
- };
-
- /**
- * This method can be used to invoke a save-as dialog for all recorded blobs.
- * @param {object} args - {audio: 'audio-name', video: 'video-name', gif: 'gif-name'}
- * @method
- * @memberof MRecordRTC
- * @example
- * recorder.save({
- * audio: 'audio-file-name',
- * video: 'video-file-name',
- * gif : 'gif-file-name'
- * });
- */
- this.save = function (args) {
- args = args || {
- audio: true,
- video: true,
- gif: true
- };
-
- if (!!args.audio && this.audioRecorder) {
- this.audioRecorder.save(typeof args.audio === 'string' ? args.audio : '');
- }
-
- if (!!args.video && this.videoRecorder) {
- this.videoRecorder.save(typeof args.video === 'string' ? args.video : '');
- }
- if (!!args.gif && this.gifRecorder) {
- this.gifRecorder.save(typeof args.gif === 'string' ? args.gif : '');
- }
- };
- }
-
- /**
- * This method can be used to get all recorded blobs from IndexedDB storage.
- * @param {string} type - 'all' or 'audio' or 'video' or 'gif'
- * @param {function} callback - Callback function to get all stored blobs.
- * @method
- * @memberof MRecordRTC
- * @example
- * MRecordRTC.getFromDisk('all', function(dataURL, type){
- * if(type === 'audio') { }
- * if(type === 'video') { }
- * if(type === 'gif') { }
- * });
- */
- MRecordRTC.getFromDisk = RecordRTC.getFromDisk;
-
- /**
- * This method can be used to store recorded blobs into IndexedDB storage.
- * @param {object} options - {audio: Blob, video: Blob, gif: Blob}
- * @method
- * @memberof MRecordRTC
- * @example
- * MRecordRTC.writeToDisk({
- * audio: audioBlob,
- * video: videoBlob,
- * gif : gifBlob
- * });
- */
- MRecordRTC.writeToDisk = RecordRTC.writeToDisk;
-
- if (typeof RecordRTC !== 'undefined') {
- RecordRTC.MRecordRTC = MRecordRTC;
- }
-
- var browserFakeUserAgent = 'Fake/5.0 (FakeOS) AppleWebKit/123 (KHTML, like Gecko) Fake/12.3.4567.89 Fake/123.45';
-
- (function (that) {
- if (!that) {
- return;
- }
-
- if (typeof window !== 'undefined') {
- return;
- }
-
- if (typeof commonjsGlobal === 'undefined') {
- return;
- }
-
- commonjsGlobal.navigator = {
- userAgent: browserFakeUserAgent,
- getUserMedia: function () { }
- };
-
- if (!commonjsGlobal.console) {
- commonjsGlobal.console = {};
- }
-
- if (typeof commonjsGlobal.console.log === 'undefined' || typeof commonjsGlobal.console.error === 'undefined') {
- commonjsGlobal.console.error = commonjsGlobal.console.log = commonjsGlobal.console.log || function () {
- console.log(arguments);
- };
- }
-
- if (typeof document === 'undefined') {
- /*global document:true */
- that.document = {
- documentElement: {
- appendChild: function () {
- return '';
- }
- }
- };
-
- document.createElement = document.captureStream = document.mozCaptureStream = function () {
- var obj = {
- getContext: function () {
- return obj;
- },
- play: function () { },
- pause: function () { },
- drawImage: function () { },
- toDataURL: function () {
- return '';
- },
- style: {}
- };
- return obj;
- };
-
- that.HTMLVideoElement = function () { };
- }
-
- if (typeof location === 'undefined') {
- /*global location:true */
- that.location = {
- protocol: 'file:',
- href: '',
- hash: ''
- };
- }
-
- if (typeof screen === 'undefined') {
- /*global screen:true */
- that.screen = {
- width: 0,
- height: 0
- };
- }
-
- if (typeof URL === 'undefined') {
- /*global screen:true */
- that.URL = {
- createObjectURL: function () {
- return '';
- },
- revokeObjectURL: function () {
- return '';
- }
- };
- }
-
- /*global window:true */
- that.window = commonjsGlobal;
- })(typeof commonjsGlobal !== 'undefined' ? commonjsGlobal : null);
-
- // _____________________________
- // Cross-Browser-Declarations.js
-
- // animation-frame used in WebM recording
-
- /*jshint -W079 */
- var requestAnimationFrame = window.requestAnimationFrame;
- if (typeof requestAnimationFrame === 'undefined') {
- if (typeof webkitRequestAnimationFrame !== 'undefined') {
- /*global requestAnimationFrame:true */
- requestAnimationFrame = webkitRequestAnimationFrame;
- } else if (typeof mozRequestAnimationFrame !== 'undefined') {
- /*global requestAnimationFrame:true */
- requestAnimationFrame = mozRequestAnimationFrame;
- } else if (typeof msRequestAnimationFrame !== 'undefined') {
- /*global requestAnimationFrame:true */
- requestAnimationFrame = msRequestAnimationFrame;
- } else if (typeof requestAnimationFrame === 'undefined') {
- // via: https://gist.github.com/paulirish/1579671
- var lastTime = 0;
-
- /*global requestAnimationFrame:true */
- requestAnimationFrame = function (callback, element) {
- var currTime = new Date().getTime();
- var timeToCall = Math.max(0, 16 - (currTime - lastTime));
- var id = setTimeout(function () {
- callback(currTime + timeToCall);
- }, timeToCall);
- lastTime = currTime + timeToCall;
- return id;
- };
- }
- }
-
- /*jshint -W079 */
- var cancelAnimationFrame = window.cancelAnimationFrame;
- if (typeof cancelAnimationFrame === 'undefined') {
- if (typeof webkitCancelAnimationFrame !== 'undefined') {
- /*global cancelAnimationFrame:true */
- cancelAnimationFrame = webkitCancelAnimationFrame;
- } else if (typeof mozCancelAnimationFrame !== 'undefined') {
- /*global cancelAnimationFrame:true */
- cancelAnimationFrame = mozCancelAnimationFrame;
- } else if (typeof msCancelAnimationFrame !== 'undefined') {
- /*global cancelAnimationFrame:true */
- cancelAnimationFrame = msCancelAnimationFrame;
- } else if (typeof cancelAnimationFrame === 'undefined') {
- /*global cancelAnimationFrame:true */
- cancelAnimationFrame = function (id) {
- clearTimeout(id);
- };
- }
- }
-
- // WebAudio API representer
- var AudioContext = window.AudioContext;
-
- if (typeof AudioContext === 'undefined') {
- if (typeof webkitAudioContext !== 'undefined') {
- /*global AudioContext:true */
- AudioContext = webkitAudioContext;
- }
-
- if (typeof mozAudioContext !== 'undefined') {
- /*global AudioContext:true */
- AudioContext = mozAudioContext;
- }
- }
-
- /*jshint -W079 */
- var URL = window.URL;
-
- if (typeof URL === 'undefined' && typeof webkitURL !== 'undefined') {
- /*global URL:true */
- URL = webkitURL;
- }
-
- if (typeof navigator !== 'undefined' && typeof navigator.getUserMedia === 'undefined') { // maybe window.navigator?
- if (typeof navigator.webkitGetUserMedia !== 'undefined') {
- navigator.getUserMedia = navigator.webkitGetUserMedia;
- }
-
- if (typeof navigator.mozGetUserMedia !== 'undefined') {
- navigator.getUserMedia = navigator.mozGetUserMedia;
- }
- }
-
- var isEdge = navigator.userAgent.indexOf('Edge') !== -1 && (!!navigator.msSaveBlob || !!navigator.msSaveOrOpenBlob);
- var isOpera = !!window.opera || navigator.userAgent.indexOf('OPR/') !== -1;
- var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1 && ('netscape' in window) && / rv:/.test(navigator.userAgent);
- var isChrome = (!isOpera && !isEdge && !!navigator.webkitGetUserMedia) || isElectron() || navigator.userAgent.toLowerCase().indexOf('chrome/') !== -1;
-
- var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-
- if (isSafari && !isChrome && navigator.userAgent.indexOf('CriOS') !== -1) {
- isSafari = false;
- isChrome = true;
- }
-
- var MediaStream = window.MediaStream;
-
- if (typeof MediaStream === 'undefined' && typeof webkitMediaStream !== 'undefined') {
- MediaStream = webkitMediaStream;
- }
-
- /*global MediaStream:true */
- if (typeof MediaStream !== 'undefined') {
- // override "stop" method for all browsers
- if (typeof MediaStream.prototype.stop === 'undefined') {
- MediaStream.prototype.stop = function () {
- this.getTracks().forEach(function (track) {
- track.stop();
- });
- };
- }
- }
-
- // below function via: http://goo.gl/B3ae8c
- /**
- * Return human-readable file size.
- * @param {number} bytes - Pass bytes and get formatted string.
- * @returns {string} - formatted string
- * @example
- * bytesToSize(1024*1024*5) === '5 GB'
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- */
- function bytesToSize(bytes) {
- var k = 1000;
- var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
- if (bytes === 0) {
- return '0 Bytes';
- }
- var i = parseInt(Math.floor(Math.log(bytes) / Math.log(k)), 10);
- return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
- }
-
- /**
- * @param {Blob} file - File or Blob object. This parameter is required.
- * @param {string} fileName - Optional file name e.g. "Recorded-Video.webm"
- * @example
- * invokeSaveAsDialog(blob or file, [optional] fileName);
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- */
- function invokeSaveAsDialog(file, fileName) {
- if (!file) {
- throw 'Blob object is required.';
- }
-
- if (!file.type) {
- try {
- file.type = 'video/webm';
- } catch (e) { }
- }
-
- var fileExtension = (file.type || 'video/webm').split('/')[1];
- if (fileExtension.indexOf(';') !== -1) {
- // extended mimetype, e.g. 'video/webm;codecs=vp8,opus'
- fileExtension = fileExtension.split(';')[0];
- }
- if (fileName && fileName.indexOf('.') !== -1) {
- var splitted = fileName.split('.');
- fileName = splitted[0];
- fileExtension = splitted[1];
- }
-
- var fileFullName = (fileName || (Math.round(Math.random() * 9999999999) + 888888888)) + '.' + fileExtension;
-
- if (typeof navigator.msSaveOrOpenBlob !== 'undefined') {
- return navigator.msSaveOrOpenBlob(file, fileFullName);
- } else if (typeof navigator.msSaveBlob !== 'undefined') {
- return navigator.msSaveBlob(file, fileFullName);
- }
-
- var hyperlink = document.createElement('a');
- hyperlink.href = URL.createObjectURL(file);
- hyperlink.download = fileFullName;
-
- hyperlink.style = 'display:none;opacity:0;color:transparent;';
- (document.body || document.documentElement).appendChild(hyperlink);
-
- if (typeof hyperlink.click === 'function') {
- hyperlink.click();
- } else {
- hyperlink.target = '_blank';
- hyperlink.dispatchEvent(new MouseEvent('click', {
- view: window,
- bubbles: true,
- cancelable: true
- }));
- }
-
- URL.revokeObjectURL(hyperlink.href);
- }
-
- /**
- * from: https://github.com/cheton/is-electron/blob/master/index.js
- **/
- function isElectron() {
- // Renderer process
- if (typeof window !== 'undefined' && typeof window.process === 'object' && window.process.type === 'renderer') {
- return true;
- }
-
- // Main process
- if (typeof process !== 'undefined' && typeof process.versions === 'object' && !!process.versions.electron) {
- return true;
- }
-
- // Detect the user agent when the `nodeIntegration` option is set to true
- if (typeof navigator === 'object' && typeof navigator.userAgent === 'string' && navigator.userAgent.indexOf('Electron') >= 0) {
- return true;
- }
-
- return false;
- }
-
- function getTracks(stream, kind) {
- if (!stream || !stream.getTracks) {
- return [];
- }
-
- return stream.getTracks().filter(function (t) {
- return t.kind === (kind || 'audio');
- });
- }
-
- function setSrcObject(stream, element) {
- if ('srcObject' in element) {
- element.srcObject = stream;
- } else if ('mozSrcObject' in element) {
- element.mozSrcObject = stream;
- } else {
- element.srcObject = stream;
- }
- }
-
- /**
- * @param {Blob} file - File or Blob object.
- * @param {function} callback - Callback function.
- * @example
- * getSeekableBlob(blob or file, callback);
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- */
- function getSeekableBlob(inputBlob, callback) {
- // EBML.js copyrights goes to: https://github.com/legokichi/ts-ebml
- if (typeof EBML === 'undefined') {
- throw new Error('Please link: https://www.webrtc-experiment.com/EBML.js');
- }
-
- var reader = new EBML.Reader();
- var decoder = new EBML.Decoder();
- var tools = EBML.tools;
-
- var fileReader = new FileReader();
- fileReader.onload = function (e) {
- var ebmlElms = decoder.decode(this.result);
- ebmlElms.forEach(function (element) {
- reader.read(element);
- });
- reader.stop();
- var refinedMetadataBuf = tools.makeMetadataSeekable(reader.metadatas, reader.duration, reader.cues);
- var body = this.result.slice(reader.metadataSize);
- var newBlob = new Blob([refinedMetadataBuf, body], {
- type: 'video/webm'
- });
-
- callback(newBlob);
- };
- fileReader.readAsArrayBuffer(inputBlob);
- }
-
- if (typeof RecordRTC !== 'undefined') {
- RecordRTC.invokeSaveAsDialog = invokeSaveAsDialog;
- RecordRTC.getTracks = getTracks;
- RecordRTC.getSeekableBlob = getSeekableBlob;
- RecordRTC.bytesToSize = bytesToSize;
- RecordRTC.isElectron = isElectron;
- }
-
- // __________ (used to handle stuff like http://goo.gl/xmE5eg) issue #129
- // Storage.js
-
- /**
- * Storage is a standalone object used by {@link RecordRTC} to store reusable objects e.g. "new AudioContext".
- * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT}
- * @author {@link https://MuazKhan.com|Muaz Khan}
- * @example
- * Storage.AudioContext === webkitAudioContext
- * @property {webkitAudioContext} AudioContext - Keeps a reference to AudioContext object.
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- */
-
- var Storage = {};
-
- if (typeof AudioContext !== 'undefined') {
- Storage.AudioContext = AudioContext;
- } else if (typeof webkitAudioContext !== 'undefined') {
- Storage.AudioContext = webkitAudioContext;
- }
-
- if (typeof RecordRTC !== 'undefined') {
- RecordRTC.Storage = Storage;
- }
-
- function isMediaRecorderCompatible() {
- if (isFirefox || isSafari || isEdge) {
- return true;
- }
- var nAgt = navigator.userAgent;
- var fullVersion = '' + parseFloat(navigator.appVersion);
- var majorVersion = parseInt(navigator.appVersion, 10);
- var verOffset, ix;
-
- if (isChrome || isOpera) {
- verOffset = nAgt.indexOf('Chrome');
- fullVersion = nAgt.substring(verOffset + 7);
- }
-
- // trim the fullVersion string at semicolon/space if present
- if ((ix = fullVersion.indexOf(';')) !== -1) {
- fullVersion = fullVersion.substring(0, ix);
- }
-
- if ((ix = fullVersion.indexOf(' ')) !== -1) {
- fullVersion = fullVersion.substring(0, ix);
- }
-
- majorVersion = parseInt('' + fullVersion, 10);
-
- if (isNaN(majorVersion)) {
- fullVersion = '' + parseFloat(navigator.appVersion);
- majorVersion = parseInt(navigator.appVersion, 10);
- }
-
- return majorVersion >= 49;
- }
-
- // ______________________
- // MediaStreamRecorder.js
-
- /**
- * MediaStreamRecorder is an abstraction layer for {@link https://w3c.github.io/mediacapture-record/MediaRecorder.html|MediaRecorder API}. It is used by {@link RecordRTC} to record MediaStream(s) in both Chrome and Firefox.
- * @summary Runs top over {@link https://w3c.github.io/mediacapture-record/MediaRecorder.html|MediaRecorder API}.
- * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT}
- * @author {@link https://github.com/muaz-khan|Muaz Khan}
- * @typedef MediaStreamRecorder
- * @class
- * @example
- * var config = {
- * mimeType: 'video/webm', // vp8, vp9, h264, mkv, opus/vorbis
- * audioBitsPerSecond : 256 * 8 * 1024,
- * videoBitsPerSecond : 256 * 8 * 1024,
- * bitsPerSecond: 256 * 8 * 1024, // if this is provided, skip above two
- * checkForInactiveTracks: true,
- * timeSlice: 1000, // concatenate intervals based blobs
- * ondataavailable: function() {} // get intervals based blobs
- * }
- * var recorder = new MediaStreamRecorder(mediaStream, config);
- * recorder.record();
- * recorder.stop(function(blob) {
- * video.src = URL.createObjectURL(blob);
- *
- * // or
- * var blob = recorder.blob;
- * });
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- * @param {MediaStream} mediaStream - MediaStream object fetched using getUserMedia API or generated using captureStreamUntilEnded or WebAudio API.
- * @param {object} config - {disableLogs:true, initCallback: function, mimeType: "video/webm", timeSlice: 1000}
- * @throws Will throw an error if first argument "MediaStream" is missing. Also throws error if "MediaRecorder API" are not supported by the browser.
- */
-
- function MediaStreamRecorder(mediaStream, config) {
- var self = this;
-
- if (typeof mediaStream === 'undefined') {
- throw 'First argument "MediaStream" is required.';
- }
-
- if (typeof MediaRecorder === 'undefined') {
- throw 'Your browser does not support the Media Recorder API. Please try other modules e.g. WhammyRecorder or StereoAudioRecorder.';
- }
-
- config = config || {
- // bitsPerSecond: 256 * 8 * 1024,
- mimeType: 'video/webm'
- };
-
- if (config.type === 'audio') {
- if (getTracks(mediaStream, 'video').length && getTracks(mediaStream, 'audio').length) {
- var stream;
- if (!!navigator.mozGetUserMedia) {
- stream = new MediaStream();
- stream.addTrack(getTracks(mediaStream, 'audio')[0]);
- } else {
- // webkitMediaStream
- stream = new MediaStream(getTracks(mediaStream, 'audio'));
- }
- mediaStream = stream;
- }
-
- if (!config.mimeType || config.mimeType.toString().toLowerCase().indexOf('audio') === -1) {
- config.mimeType = isChrome ? 'audio/webm' : 'audio/ogg';
- }
-
- if (config.mimeType && config.mimeType.toString().toLowerCase() !== 'audio/ogg' && !!navigator.mozGetUserMedia) {
- // forcing better codecs on Firefox (via #166)
- config.mimeType = 'audio/ogg';
- }
- }
-
- var arrayOfBlobs = [];
-
- /**
- * This method returns array of blobs. Use only with "timeSlice". Its useful to preview recording anytime, without using the "stop" method.
- * @method
- * @memberof MediaStreamRecorder
- * @example
- * var arrayOfBlobs = recorder.getArrayOfBlobs();
- * @returns {Array} Returns array of recorded blobs.
- */
- this.getArrayOfBlobs = function () {
- return arrayOfBlobs;
- };
-
- /**
- * This method records MediaStream.
- * @method
- * @memberof MediaStreamRecorder
- * @example
- * recorder.record();
- */
- this.record = function () {
- // set defaults
- self.blob = null;
- self.clearRecordedData();
- self.timestamps = [];
- allStates = [];
- arrayOfBlobs = [];
-
- var recorderHints = config;
-
- if (!config.disableLogs) {
- console.log('Passing following config over MediaRecorder API.', recorderHints);
- }
-
- if (mediaRecorder) {
- // mandatory to make sure Firefox doesn't fails to record streams 3-4 times without reloading the page.
- mediaRecorder = null;
- }
-
- if (isChrome && !isMediaRecorderCompatible()) {
- // to support video-only recording on stable
- recorderHints = 'video/vp8';
- }
-
- if (typeof MediaRecorder.isTypeSupported === 'function' && recorderHints.mimeType) {
- if (!MediaRecorder.isTypeSupported(recorderHints.mimeType)) {
- if (!config.disableLogs) {
- console.warn('MediaRecorder API seems unable to record mimeType:', recorderHints.mimeType);
- }
-
- recorderHints.mimeType = config.type === 'audio' ? 'audio/webm' : 'video/webm';
- }
- }
-
- // using MediaRecorder API here
- try {
- mediaRecorder = new MediaRecorder(mediaStream, recorderHints);
-
- // reset
- config.mimeType = recorderHints.mimeType;
- } catch (e) {
- // chrome-based fallback
- mediaRecorder = new MediaRecorder(mediaStream);
- }
-
- // old hack?
- if (recorderHints.mimeType && !MediaRecorder.isTypeSupported && 'canRecordMimeType' in mediaRecorder && mediaRecorder.canRecordMimeType(recorderHints.mimeType) === false) {
- if (!config.disableLogs) {
- console.warn('MediaRecorder API seems unable to record mimeType:', recorderHints.mimeType);
- }
- }
-
- // Dispatching OnDataAvailable Handler
- mediaRecorder.ondataavailable = function (e) {
- if (e.data) {
- allStates.push('ondataavailable: ' + bytesToSize(e.data.size));
- }
-
- if (typeof config.timeSlice === 'number') {
- if (e.data && e.data.size) {
- arrayOfBlobs.push(e.data);
- updateTimeStamp();
-
- if (typeof config.ondataavailable === 'function') {
- // intervals based blobs
- var blob = config.getNativeBlob ? e.data : new Blob([e.data], {
- type: getMimeType(recorderHints)
- });
- config.ondataavailable(blob);
- }
- }
- return;
- }
-
- if (!e.data || !e.data.size || e.data.size < 100 || self.blob) {
- // make sure that stopRecording always getting fired
- // even if there is invalid data
- if (self.recordingCallback) {
- self.recordingCallback(new Blob([], {
- type: getMimeType(recorderHints)
- }));
- self.recordingCallback = null;
- }
- return;
- }
-
- self.blob = config.getNativeBlob ? e.data : new Blob([e.data], {
- type: getMimeType(recorderHints)
- });
-
- if (self.recordingCallback) {
- self.recordingCallback(self.blob);
- self.recordingCallback = null;
- }
- };
-
- mediaRecorder.onstart = function () {
- allStates.push('started');
- };
-
- mediaRecorder.onpause = function () {
- allStates.push('paused');
- };
-
- mediaRecorder.onresume = function () {
- allStates.push('resumed');
- };
-
- mediaRecorder.onstop = function () {
- allStates.push('stopped');
- };
-
- mediaRecorder.onerror = function (error) {
- if (!error) {
- return;
- }
-
- if (!error.name) {
- error.name = 'UnknownError';
- }
-
- allStates.push('error: ' + error);
-
- if (!config.disableLogs) {
- // via: https://w3c.github.io/mediacapture-record/MediaRecorder.html#exception-summary
- if (error.name.toString().toLowerCase().indexOf('invalidstate') !== -1) {
- console.error('The MediaRecorder is not in a state in which the proposed operation is allowed to be executed.', error);
- } else if (error.name.toString().toLowerCase().indexOf('notsupported') !== -1) {
- console.error('MIME type (', recorderHints.mimeType, ') is not supported.', error);
- } else if (error.name.toString().toLowerCase().indexOf('security') !== -1) {
- console.error('MediaRecorder security error', error);
- }
-
- // older code below
- else if (error.name === 'OutOfMemory') {
- console.error('The UA has exhaused the available memory. User agents SHOULD provide as much additional information as possible in the message attribute.', error);
- } else if (error.name === 'IllegalStreamModification') {
- console.error('A modification to the stream has occurred that makes it impossible to continue recording. An example would be the addition of a Track while recording is occurring. User agents SHOULD provide as much additional information as possible in the message attribute.', error);
- } else if (error.name === 'OtherRecordingError') {
- console.error('Used for an fatal error other than those listed above. User agents SHOULD provide as much additional information as possible in the message attribute.', error);
- } else if (error.name === 'GenericError') {
- console.error('The UA cannot provide the codec or recording option that has been requested.', error);
- } else {
- console.error('MediaRecorder Error', error);
- }
- }
-
- (function (looper) {
- if (!self.manuallyStopped && mediaRecorder && mediaRecorder.state === 'inactive') {
- delete config.timeslice;
-
- // 10 minutes, enough?
- mediaRecorder.start(10 * 60 * 1000);
- return;
- }
-
- setTimeout(looper, 1000);
- })();
-
- if (mediaRecorder.state !== 'inactive' && mediaRecorder.state !== 'stopped') {
- mediaRecorder.stop();
- }
- };
-
- if (typeof config.timeSlice === 'number') {
- updateTimeStamp();
- mediaRecorder.start(config.timeSlice);
- } else {
- // default is 60 minutes; enough?
- // use config => {timeSlice: 1000} otherwise
-
- mediaRecorder.start(3.6e+6);
- }
-
- if (config.initCallback) {
- config.initCallback(); // old code
- }
- };
-
- /**
- * @property {Array} timestamps - Array of time stamps
- * @memberof MediaStreamRecorder
- * @example
- * console.log(recorder.timestamps);
- */
- this.timestamps = [];
-
- function updateTimeStamp() {
- self.timestamps.push(new Date().getTime());
-
- if (typeof config.onTimeStamp === 'function') {
- config.onTimeStamp(self.timestamps[self.timestamps.length - 1], self.timestamps);
- }
- }
-
- function getMimeType(secondObject) {
- if (mediaRecorder && mediaRecorder.mimeType) {
- return mediaRecorder.mimeType;
- }
-
- return secondObject.mimeType || 'video/webm';
- }
-
- /**
- * This method stops recording MediaStream.
- * @param {function} callback - Callback function, that is used to pass recorded blob back to the callee.
- * @method
- * @memberof MediaStreamRecorder
- * @example
- * recorder.stop(function(blob) {
- * video.src = URL.createObjectURL(blob);
- * });
- */
- this.stop = function (callback) {
- callback = callback || function () { };
-
- self.manuallyStopped = true; // used inside the mediaRecorder.onerror
-
- if (!mediaRecorder) {
- return;
- }
-
- this.recordingCallback = callback;
-
- if (mediaRecorder.state === 'recording') {
- mediaRecorder.stop();
- }
-
- if (typeof config.timeSlice === 'number') {
- setTimeout(function () {
- self.blob = new Blob(arrayOfBlobs, {
- type: getMimeType(config)
- });
-
- self.recordingCallback(self.blob);
- }, 100);
- }
- };
-
- /**
- * This method pauses the recording process.
- * @method
- * @memberof MediaStreamRecorder
- * @example
- * recorder.pause();
- */
- this.pause = function () {
- if (!mediaRecorder) {
- return;
- }
-
- if (mediaRecorder.state === 'recording') {
- mediaRecorder.pause();
- }
- };
-
- /**
- * This method resumes the recording process.
- * @method
- * @memberof MediaStreamRecorder
- * @example
- * recorder.resume();
- */
- this.resume = function () {
- if (!mediaRecorder) {
- return;
- }
-
- if (mediaRecorder.state === 'paused') {
- mediaRecorder.resume();
- }
- };
-
- /**
- * This method resets currently recorded data.
- * @method
- * @memberof MediaStreamRecorder
- * @example
- * recorder.clearRecordedData();
- */
- this.clearRecordedData = function () {
- if (mediaRecorder && mediaRecorder.state === 'recording') {
- self.stop(clearRecordedDataCB);
- }
-
- clearRecordedDataCB();
- };
-
- function clearRecordedDataCB() {
- arrayOfBlobs = [];
- mediaRecorder = null;
- self.timestamps = [];
- }
-
- // Reference to "MediaRecorder" object
- var mediaRecorder;
-
- /**
- * Access to native MediaRecorder API
- * @method
- * @memberof MediaStreamRecorder
- * @instance
- * @example
- * var internal = recorder.getInternalRecorder();
- * internal.ondataavailable = function() {}; // override
- * internal.stream, internal.onpause, internal.onstop, etc.
- * @returns {Object} Returns internal recording object.
- */
- this.getInternalRecorder = function () {
- return mediaRecorder;
- };
-
- function isMediaStreamActive() {
- if ('active' in mediaStream) {
- if (!mediaStream.active) {
- return false;
- }
- } else if ('ended' in mediaStream) { // old hack
- if (mediaStream.ended) {
- return false;
- }
- }
- return true;
- }
-
- /**
- * @property {Blob} blob - Recorded data as "Blob" object.
- * @memberof MediaStreamRecorder
- * @example
- * recorder.stop(function() {
- * var blob = recorder.blob;
- * });
- */
- this.blob = null;
-
-
- /**
- * Get MediaRecorder readonly state.
- * @method
- * @memberof MediaStreamRecorder
- * @example
- * var state = recorder.getState();
- * @returns {String} Returns recording state.
- */
- this.getState = function () {
- if (!mediaRecorder) {
- return 'inactive';
- }
-
- return mediaRecorder.state || 'inactive';
- };
-
- // list of all recording states
- var allStates = [];
-
- /**
- * Get MediaRecorder all recording states.
- * @method
- * @memberof MediaStreamRecorder
- * @example
- * var state = recorder.getAllStates();
- * @returns {Array} Returns all recording states
- */
- this.getAllStates = function () {
- return allStates;
- };
-
- // if any Track within the MediaStream is muted or not enabled at any time,
- // the browser will only record black frames
- // or silence since that is the content produced by the Track
- // so we need to stopRecording as soon as any single track ends.
- if (typeof config.checkForInactiveTracks === 'undefined') {
- config.checkForInactiveTracks = false; // disable to minimize CPU usage
- }
-
- var self = this;
-
- // this method checks if media stream is stopped
- // or if any track is ended.
- (function looper() {
- if (!mediaRecorder || config.checkForInactiveTracks === false) {
- return;
- }
-
- if (isMediaStreamActive() === false) {
- if (!config.disableLogs) {
- console.log('MediaStream seems stopped.');
- }
- self.stop();
- return;
- }
-
- setTimeout(looper, 1000); // check every second
- })();
-
- // for debugging
- this.name = 'MediaStreamRecorder';
- this.toString = function () {
- return this.name;
- };
- }
-
- if (typeof RecordRTC !== 'undefined') {
- RecordRTC.MediaStreamRecorder = MediaStreamRecorder;
- }
-
- // source code from: http://typedarray.org/wp-content/projects/WebAudioRecorder/script.js
- // https://github.com/mattdiamond/Recorderjs#license-mit
- // ______________________
- // StereoAudioRecorder.js
-
- /**
- * StereoAudioRecorder is a standalone class used by {@link RecordRTC} to bring "stereo" audio-recording in chrome.
- * @summary JavaScript standalone object for stereo audio recording.
- * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT}
- * @author {@link https://MuazKhan.com|Muaz Khan}
- * @typedef StereoAudioRecorder
- * @class
- * @example
- * var recorder = new StereoAudioRecorder(MediaStream, {
- * sampleRate: 44100,
- * bufferSize: 4096
- * });
- * recorder.record();
- * recorder.stop(function(blob) {
- * video.src = URL.createObjectURL(blob);
- * });
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- * @param {MediaStream} mediaStream - MediaStream object fetched using getUserMedia API or generated using captureStreamUntilEnded or WebAudio API.
- * @param {object} config - {sampleRate: 44100, bufferSize: 4096, numberOfAudioChannels: 1, etc.}
- */
-
- function StereoAudioRecorder(mediaStream, config) {
- if (!getTracks(mediaStream, 'audio').length) {
- throw 'Your stream has no audio tracks.';
- }
-
- config = config || {};
-
- var self = this;
-
- // variables
- var leftchannel = [];
- var rightchannel = [];
- var recording = false;
- var recordingLength = 0;
- var jsAudioNode;
-
- var numberOfAudioChannels = 2;
-
- /**
- * Set sample rates such as 8K or 16K. Reference: http://stackoverflow.com/a/28977136/552182
- * @property {number} desiredSampRate - Desired Bits per sample * 1000
- * @memberof StereoAudioRecorder
- * @instance
- * @example
- * var recorder = StereoAudioRecorder(mediaStream, {
- * desiredSampRate: 16 * 1000 // bits-per-sample * 1000
- * });
- */
- var desiredSampRate = config.desiredSampRate;
-
- // backward compatibility
- if (config.leftChannel === true) {
- numberOfAudioChannels = 1;
- }
-
- if (config.numberOfAudioChannels === 1) {
- numberOfAudioChannels = 1;
- }
-
- if (!numberOfAudioChannels || numberOfAudioChannels < 1) {
- numberOfAudioChannels = 2;
- }
-
- if (!config.disableLogs) {
- console.log('StereoAudioRecorder is set to record number of channels: ' + numberOfAudioChannels);
- }
-
- // if any Track within the MediaStream is muted or not enabled at any time,
- // the browser will only record black frames
- // or silence since that is the content produced by the Track
- // so we need to stopRecording as soon as any single track ends.
- if (typeof config.checkForInactiveTracks === 'undefined') {
- config.checkForInactiveTracks = true;
- }
-
- function isMediaStreamActive() {
- if (config.checkForInactiveTracks === false) {
- // always return "true"
- return true;
- }
-
- if ('active' in mediaStream) {
- if (!mediaStream.active) {
- return false;
- }
- } else if ('ended' in mediaStream) { // old hack
- if (mediaStream.ended) {
- return false;
- }
- }
- return true;
- }
-
- /**
- * This method records MediaStream.
- * @method
- * @memberof StereoAudioRecorder
- * @example
- * recorder.record();
- */
- this.record = function () {
- if (isMediaStreamActive() === false) {
- throw 'Please make sure MediaStream is active.';
- }
-
- resetVariables();
-
- isAudioProcessStarted = isPaused = false;
- recording = true;
-
- if (typeof config.timeSlice !== 'undefined') {
- looper();
- }
- };
-
- function mergeLeftRightBuffers(config, callback) {
- function mergeAudioBuffers(config, cb) {
- var numberOfAudioChannels = config.numberOfAudioChannels;
-
- // todo: "slice(0)" --- is it causes loop? Should be removed?
- var leftBuffers = config.leftBuffers.slice(0);
- var rightBuffers = config.rightBuffers.slice(0);
- var sampleRate = config.sampleRate;
- var internalInterleavedLength = config.internalInterleavedLength;
- var desiredSampRate = config.desiredSampRate;
-
- if (numberOfAudioChannels === 2) {
- leftBuffers = mergeBuffers(leftBuffers, internalInterleavedLength);
- rightBuffers = mergeBuffers(rightBuffers, internalInterleavedLength);
-
- if (desiredSampRate) {
- leftBuffers = interpolateArray(leftBuffers, desiredSampRate, sampleRate);
- rightBuffers = interpolateArray(rightBuffers, desiredSampRate, sampleRate);
- }
- }
-
- if (numberOfAudioChannels === 1) {
- leftBuffers = mergeBuffers(leftBuffers, internalInterleavedLength);
-
- if (desiredSampRate) {
- leftBuffers = interpolateArray(leftBuffers, desiredSampRate, sampleRate);
- }
- }
-
- // set sample rate as desired sample rate
- if (desiredSampRate) {
- sampleRate = desiredSampRate;
- }
-
- // for changing the sampling rate, reference:
- // http://stackoverflow.com/a/28977136/552182
- function interpolateArray(data, newSampleRate, oldSampleRate) {
- var fitCount = Math.round(data.length * (newSampleRate / oldSampleRate));
- var newData = [];
- var springFactor = Number((data.length - 1) / (fitCount - 1));
- newData[0] = data[0];
- for (var i = 1; i < fitCount - 1; i++) {
- var tmp = i * springFactor;
- var before = Number(Math.floor(tmp)).toFixed();
- var after = Number(Math.ceil(tmp)).toFixed();
- var atPoint = tmp - before;
- newData[i] = linearInterpolate(data[before], data[after], atPoint);
- }
- newData[fitCount - 1] = data[data.length - 1];
- return newData;
- }
-
- function linearInterpolate(before, after, atPoint) {
- return before + (after - before) * atPoint;
- }
-
- function mergeBuffers(channelBuffer, rLength) {
- var result = new Float64Array(rLength);
- var offset = 0;
- var lng = channelBuffer.length;
-
- for (var i = 0; i < lng; i++) {
- var buffer = channelBuffer[i];
- result.set(buffer, offset);
- offset += buffer.length;
- }
-
- return result;
- }
-
- function interleave(leftChannel, rightChannel) {
- var length = leftChannel.length + rightChannel.length;
-
- var result = new Float64Array(length);
-
- var inputIndex = 0;
-
- for (var index = 0; index < length;) {
- result[index++] = leftChannel[inputIndex];
- result[index++] = rightChannel[inputIndex];
- inputIndex++;
- }
- return result;
- }
-
- function writeUTFBytes(view, offset, string) {
- var lng = string.length;
- for (var i = 0; i < lng; i++) {
- view.setUint8(offset + i, string.charCodeAt(i));
- }
- }
-
- // interleave both channels together
- var interleaved;
-
- if (numberOfAudioChannels === 2) {
- interleaved = interleave(leftBuffers, rightBuffers);
- }
-
- if (numberOfAudioChannels === 1) {
- interleaved = leftBuffers;
- }
-
- var interleavedLength = interleaved.length;
-
- // create wav file
- var resultingBufferLength = 44 + interleavedLength * 2;
-
- var buffer = new ArrayBuffer(resultingBufferLength);
-
- var view = new DataView(buffer);
-
- // RIFF chunk descriptor/identifier
- writeUTFBytes(view, 0, 'RIFF');
-
- // RIFF chunk length
- // changed "44" to "36" via #401
- view.setUint32(4, 36 + interleavedLength * 2, true);
-
- // RIFF type
- writeUTFBytes(view, 8, 'WAVE');
-
- // format chunk identifier
- // FMT sub-chunk
- writeUTFBytes(view, 12, 'fmt ');
-
- // format chunk length
- view.setUint32(16, 16, true);
-
- // sample format (raw)
- view.setUint16(20, 1, true);
-
- // stereo (2 channels)
- view.setUint16(22, numberOfAudioChannels, true);
-
- // sample rate
- view.setUint32(24, sampleRate, true);
-
- // byte rate (sample rate * block align)
- view.setUint32(28, sampleRate * numberOfAudioChannels * 2, true);
-
- // block align (channel count * bytes per sample)
- view.setUint16(32, numberOfAudioChannels * 2, true);
-
- // bits per sample
- view.setUint16(34, 16, true);
-
- // data sub-chunk
- // data chunk identifier
- writeUTFBytes(view, 36, 'data');
-
- // data chunk length
- view.setUint32(40, interleavedLength * 2, true);
-
- // write the PCM samples
- var lng = interleavedLength;
- var index = 44;
- var volume = 1;
- for (var i = 0; i < lng; i++) {
- view.setInt16(index, interleaved[i] * (0x7FFF * volume), true);
- index += 2;
- }
-
- if (cb) {
- return cb({
- buffer: buffer,
- view: view
- });
- }
-
- postMessage({
- buffer: buffer,
- view: view
- });
- }
-
- if (config.noWorker) {
- mergeAudioBuffers(config, function (data) {
- callback(data.buffer, data.view);
- });
- return;
- }
-
-
- var webWorker = processInWebWorker(mergeAudioBuffers);
-
- webWorker.onmessage = function (event) {
- callback(event.data.buffer, event.data.view);
-
- // release memory
- URL.revokeObjectURL(webWorker.workerURL);
-
- // kill webworker (or Chrome will kill your page after ~25 calls)
- webWorker.terminate();
- };
-
- webWorker.postMessage(config);
- }
-
- function processInWebWorker(_function) {
- var workerURL = URL.createObjectURL(new Blob([_function.toString(),
- ';this.onmessage = function (eee) {' + _function.name + '(eee.data);}'
- ], {
- type: 'application/javascript'
- }));
-
- var worker = new Worker(workerURL);
- worker.workerURL = workerURL;
- return worker;
- }
-
- /**
- * This method stops recording MediaStream.
- * @param {function} callback - Callback function, that is used to pass recorded blob back to the callee.
- * @method
- * @memberof StereoAudioRecorder
- * @example
- * recorder.stop(function(blob) {
- * video.src = URL.createObjectURL(blob);
- * });
- */
- this.stop = function (callback) {
- callback = callback || function () { };
-
- // stop recording
- recording = false;
-
- mergeLeftRightBuffers({
- desiredSampRate: desiredSampRate,
- sampleRate: sampleRate,
- numberOfAudioChannels: numberOfAudioChannels,
- internalInterleavedLength: recordingLength,
- leftBuffers: leftchannel,
- rightBuffers: numberOfAudioChannels === 1 ? [] : rightchannel,
- noWorker: config.noWorker
- }, function (buffer, view) {
- /**
- * @property {Blob} blob - The recorded blob object.
- * @memberof StereoAudioRecorder
- * @example
- * recorder.stop(function(){
- * var blob = recorder.blob;
- * });
- */
- self.blob = new Blob([view], {
- type: 'audio/wav'
- });
-
- /**
- * @property {ArrayBuffer} buffer - The recorded buffer object.
- * @memberof StereoAudioRecorder
- * @example
- * recorder.stop(function(){
- * var buffer = recorder.buffer;
- * });
- */
- self.buffer = new ArrayBuffer(view.buffer.byteLength);
-
- /**
- * @property {DataView} view - The recorded data-view object.
- * @memberof StereoAudioRecorder
- * @example
- * recorder.stop(function(){
- * var view = recorder.view;
- * });
- */
- self.view = view;
-
- self.sampleRate = desiredSampRate || sampleRate;
- self.bufferSize = bufferSize;
-
- // recorded audio length
- self.length = recordingLength;
-
- isAudioProcessStarted = false;
-
- if (callback) {
- callback(self.blob);
- }
- });
- };
-
- if (typeof RecordRTC.Storage === 'undefined') {
- RecordRTC.Storage = {
- AudioContextConstructor: null,
- AudioContext: window.AudioContext || window.webkitAudioContext
- };
- }
-
- if (!RecordRTC.Storage.AudioContextConstructor || RecordRTC.Storage.AudioContextConstructor.state === 'closed') {
- RecordRTC.Storage.AudioContextConstructor = new RecordRTC.Storage.AudioContext();
- }
-
- var context = RecordRTC.Storage.AudioContextConstructor;
-
- // creates an audio node from the microphone incoming stream
- var audioInput = context.createMediaStreamSource(mediaStream);
-
- var legalBufferValues = [0, 256, 512, 1024, 2048, 4096, 8192, 16384];
-
- /**
- * From the spec: This value controls how frequently the audioprocess event is
- * dispatched and how many sample-frames need to be processed each call.
- * Lower values for buffer size will result in a lower (better) latency.
- * Higher values will be necessary to avoid audio breakup and glitches
- * The size of the buffer (in sample-frames) which needs to
- * be processed each time onprocessaudio is called.
- * Legal values are (256, 512, 1024, 2048, 4096, 8192, 16384).
- * @property {number} bufferSize - Buffer-size for how frequently the audioprocess event is dispatched.
- * @memberof StereoAudioRecorder
- * @example
- * recorder = new StereoAudioRecorder(mediaStream, {
- * bufferSize: 4096
- * });
- */
-
- // "0" means, let chrome decide the most accurate buffer-size for current platform.
- var bufferSize = typeof config.bufferSize === 'undefined' ? 4096 : config.bufferSize;
-
- if (legalBufferValues.indexOf(bufferSize) === -1) {
- if (!config.disableLogs) {
- console.log('Legal values for buffer-size are ' + JSON.stringify(legalBufferValues, null, '\t'));
- }
- }
-
- if (context.createJavaScriptNode) {
- jsAudioNode = context.createJavaScriptNode(bufferSize, numberOfAudioChannels, numberOfAudioChannels);
- } else if (context.createScriptProcessor) {
- jsAudioNode = context.createScriptProcessor(bufferSize, numberOfAudioChannels, numberOfAudioChannels);
- } else {
- throw 'WebAudio API has no support on this browser.';
- }
-
- // connect the stream to the script processor
- audioInput.connect(jsAudioNode);
-
- if (!config.bufferSize) {
- bufferSize = jsAudioNode.bufferSize; // device buffer-size
- }
-
- /**
- * The sample rate (in sample-frames per second) at which the
- * AudioContext handles audio. It is assumed that all AudioNodes
- * in the context run at this rate. In making this assumption,
- * sample-rate converters or "varispeed" processors are not supported
- * in real-time processing.
- * The sampleRate parameter describes the sample-rate of the
- * linear PCM audio data in the buffer in sample-frames per second.
- * An implementation must support sample-rates in at least
- * the range 22050 to 96000.
- * @property {number} sampleRate - Buffer-size for how frequently the audioprocess event is dispatched.
- * @memberof StereoAudioRecorder
- * @example
- * recorder = new StereoAudioRecorder(mediaStream, {
- * sampleRate: 44100
- * });
- */
- var sampleRate = typeof config.sampleRate !== 'undefined' ? config.sampleRate : context.sampleRate || 44100;
-
- if (sampleRate < 22050 || sampleRate > 96000) {
- // Ref: http://stackoverflow.com/a/26303918/552182
- if (!config.disableLogs) {
- console.log('sample-rate must be under range 22050 and 96000.');
- }
- }
-
- if (!config.disableLogs) {
- if (config.desiredSampRate) {
- console.log('Desired sample-rate: ' + config.desiredSampRate);
- }
- }
-
- var isPaused = false;
- /**
- * This method pauses the recording process.
- * @method
- * @memberof StereoAudioRecorder
- * @example
- * recorder.pause();
- */
- this.pause = function () {
- isPaused = true;
- };
-
- /**
- * This method resumes the recording process.
- * @method
- * @memberof StereoAudioRecorder
- * @example
- * recorder.resume();
- */
- this.resume = function () {
- if (isMediaStreamActive() === false) {
- throw 'Please make sure MediaStream is active.';
- }
-
- if (!recording) {
- if (!config.disableLogs) {
- console.log('Seems recording has been restarted.');
- }
- this.record();
- return;
- }
-
- isPaused = false;
- };
-
- /**
- * This method resets currently recorded data.
- * @method
- * @memberof StereoAudioRecorder
- * @example
- * recorder.clearRecordedData();
- */
- this.clearRecordedData = function () {
- config.checkForInactiveTracks = false;
-
- if (recording) {
- this.stop(clearRecordedDataCB);
- }
-
- clearRecordedDataCB();
- };
-
- function resetVariables() {
- leftchannel = [];
- rightchannel = [];
- recordingLength = 0;
- isAudioProcessStarted = false;
- recording = false;
- isPaused = false;
- context = null;
-
- self.leftchannel = leftchannel;
- self.rightchannel = rightchannel;
- self.numberOfAudioChannels = numberOfAudioChannels;
- self.desiredSampRate = desiredSampRate;
- self.sampleRate = sampleRate;
- self.recordingLength = recordingLength;
-
- intervalsBasedBuffers = {
- left: [],
- right: [],
- recordingLength: 0
- };
- }
-
- function clearRecordedDataCB() {
- if (jsAudioNode) {
- jsAudioNode.onaudioprocess = null;
- jsAudioNode.disconnect();
- jsAudioNode = null;
- }
-
- if (audioInput) {
- audioInput.disconnect();
- audioInput = null;
- }
-
- resetVariables();
- }
-
- // for debugging
- this.name = 'StereoAudioRecorder';
- this.toString = function () {
- return this.name;
- };
-
- var isAudioProcessStarted = false;
-
- function onAudioProcessDataAvailable(e) {
- if (isPaused) {
- return;
- }
-
- if (isMediaStreamActive() === false) {
- if (!config.disableLogs) {
- console.log('MediaStream seems stopped.');
- }
- jsAudioNode.disconnect();
- recording = false;
- }
-
- if (!recording) {
- if (audioInput) {
- audioInput.disconnect();
- audioInput = null;
- }
- return;
- }
-
- /**
- * This method is called on "onaudioprocess" event's first invocation.
- * @method {function} onAudioProcessStarted
- * @memberof StereoAudioRecorder
- * @example
- * recorder.onAudioProcessStarted: function() { };
- */
- if (!isAudioProcessStarted) {
- isAudioProcessStarted = true;
- if (config.onAudioProcessStarted) {
- config.onAudioProcessStarted();
- }
-
- if (config.initCallback) {
- config.initCallback();
- }
- }
-
- var left = e.inputBuffer.getChannelData(0);
-
- // we clone the samples
- var chLeft = new Float32Array(left);
- leftchannel.push(chLeft);
-
- if (numberOfAudioChannels === 2) {
- var right = e.inputBuffer.getChannelData(1);
- var chRight = new Float32Array(right);
- rightchannel.push(chRight);
- }
-
- recordingLength += bufferSize;
-
- // export raw PCM
- self.recordingLength = recordingLength;
-
- if (typeof config.timeSlice !== 'undefined') {
- intervalsBasedBuffers.recordingLength += bufferSize;
- intervalsBasedBuffers.left.push(chLeft);
-
- if (numberOfAudioChannels === 2) {
- intervalsBasedBuffers.right.push(chRight);
- }
- }
- }
-
- jsAudioNode.onaudioprocess = onAudioProcessDataAvailable;
-
- // to prevent self audio to be connected with speakers
- if (context.createMediaStreamDestination) {
- jsAudioNode.connect(context.createMediaStreamDestination());
- } else {
- jsAudioNode.connect(context.destination);
- }
-
- // export raw PCM
- this.leftchannel = leftchannel;
- this.rightchannel = rightchannel;
- this.numberOfAudioChannels = numberOfAudioChannels;
- this.desiredSampRate = desiredSampRate;
- this.sampleRate = sampleRate;
- self.recordingLength = recordingLength;
-
- // helper for intervals based blobs
- var intervalsBasedBuffers = {
- left: [],
- right: [],
- recordingLength: 0
- };
-
- // this looper is used to support intervals based blobs (via timeSlice+ondataavailable)
- function looper() {
- if (!recording || typeof config.ondataavailable !== 'function' || typeof config.timeSlice === 'undefined') {
- return;
- }
-
- if (intervalsBasedBuffers.left.length) {
- mergeLeftRightBuffers({
- desiredSampRate: desiredSampRate,
- sampleRate: sampleRate,
- numberOfAudioChannels: numberOfAudioChannels,
- internalInterleavedLength: intervalsBasedBuffers.recordingLength,
- leftBuffers: intervalsBasedBuffers.left,
- rightBuffers: numberOfAudioChannels === 1 ? [] : intervalsBasedBuffers.right
- }, function (buffer, view) {
- var blob = new Blob([view], {
- type: 'audio/wav'
- });
- config.ondataavailable(blob);
-
- setTimeout(looper, config.timeSlice);
- });
-
- intervalsBasedBuffers = {
- left: [],
- right: [],
- recordingLength: 0
- };
- } else {
- setTimeout(looper, config.timeSlice);
- }
- }
- }
-
- if (typeof RecordRTC !== 'undefined') {
- RecordRTC.StereoAudioRecorder = StereoAudioRecorder;
- }
-
- // _________________
- // CanvasRecorder.js
-
- /**
- * CanvasRecorder is a standalone class used by {@link RecordRTC} to bring HTML5-Canvas recording into video WebM. It uses HTML2Canvas library and runs top over {@link Whammy}.
- * @summary HTML2Canvas recording into video WebM.
- * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT}
- * @author {@link https://MuazKhan.com|Muaz Khan}
- * @typedef CanvasRecorder
- * @class
- * @example
- * var recorder = new CanvasRecorder(htmlElement, { disableLogs: true, useWhammyRecorder: true });
- * recorder.record();
- * recorder.stop(function(blob) {
- * video.src = URL.createObjectURL(blob);
- * });
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- * @param {HTMLElement} htmlElement - querySelector/getElementById/getElementsByTagName[0]/etc.
- * @param {object} config - {disableLogs:true, initCallback: function}
- */
-
- function CanvasRecorder(htmlElement, config) {
- if (typeof html2canvas === 'undefined') {
- throw 'Please link: https://www.webrtc-experiment.com/screenshot.js';
- }
-
- config = config || {};
- if (!config.frameInterval) {
- config.frameInterval = 10;
- }
-
- // via DetectRTC.js
- var isCanvasSupportsStreamCapturing = false;
- ['captureStream', 'mozCaptureStream', 'webkitCaptureStream'].forEach(function (item) {
- if (item in document.createElement('canvas')) {
- isCanvasSupportsStreamCapturing = true;
- }
- });
-
- var _isChrome = (!!window.webkitRTCPeerConnection || !!window.webkitGetUserMedia) && !!window.chrome;
-
- var chromeVersion = 50;
- var matchArray = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
- if (_isChrome && matchArray && matchArray[2]) {
- chromeVersion = parseInt(matchArray[2], 10);
- }
-
- if (_isChrome && chromeVersion < 52) {
- isCanvasSupportsStreamCapturing = false;
- }
-
- if (config.useWhammyRecorder) {
- isCanvasSupportsStreamCapturing = false;
- }
-
- var globalCanvas, mediaStreamRecorder;
-
- if (isCanvasSupportsStreamCapturing) {
- if (!config.disableLogs) {
- console.log('Your browser supports both MediRecorder API and canvas.captureStream!');
- }
-
- if (htmlElement instanceof HTMLCanvasElement) {
- globalCanvas = htmlElement;
- } else if (htmlElement instanceof CanvasRenderingContext2D) {
- globalCanvas = htmlElement.canvas;
- } else {
- throw 'Please pass either HTMLCanvasElement or CanvasRenderingContext2D.';
- }
- } else if (!!navigator.mozGetUserMedia) {
- if (!config.disableLogs) {
- console.error('Canvas recording is NOT supported in Firefox.');
- }
- }
-
- var isRecording;
-
- /**
- * This method records Canvas.
- * @method
- * @memberof CanvasRecorder
- * @example
- * recorder.record();
- */
- this.record = function () {
- isRecording = true;
-
- if (isCanvasSupportsStreamCapturing && !config.useWhammyRecorder) {
- // CanvasCaptureMediaStream
- var canvasMediaStream;
- if ('captureStream' in globalCanvas) {
- canvasMediaStream = globalCanvas.captureStream(25); // 25 FPS
- } else if ('mozCaptureStream' in globalCanvas) {
- canvasMediaStream = globalCanvas.mozCaptureStream(25);
- } else if ('webkitCaptureStream' in globalCanvas) {
- canvasMediaStream = globalCanvas.webkitCaptureStream(25);
- }
-
- try {
- var mdStream = new MediaStream();
- mdStream.addTrack(getTracks(canvasMediaStream, 'video')[0]);
- canvasMediaStream = mdStream;
- } catch (e) { }
-
- if (!canvasMediaStream) {
- throw 'captureStream API are NOT available.';
- }
-
- // Note: Jan 18, 2016 status is that,
- // Firefox MediaRecorder API can't record CanvasCaptureMediaStream object.
- mediaStreamRecorder = new MediaStreamRecorder(canvasMediaStream, {
- mimeType: config.mimeType || 'video/webm'
- });
- mediaStreamRecorder.record();
- } else {
- whammy.frames = [];
- lastTime = new Date().getTime();
- drawCanvasFrame();
- }
-
- if (config.initCallback) {
- config.initCallback();
- }
- };
-
- this.getWebPImages = function (callback) {
- if (htmlElement.nodeName.toLowerCase() !== 'canvas') {
- callback();
- return;
- }
-
- var framesLength = whammy.frames.length;
- whammy.frames.forEach(function (frame, idx) {
- var framesRemaining = framesLength - idx;
- if (!config.disableLogs) {
- console.log(framesRemaining + '/' + framesLength + ' frames remaining');
- }
-
- if (config.onEncodingCallback) {
- config.onEncodingCallback(framesRemaining, framesLength);
- }
-
- var webp = frame.image.toDataURL('image/webp', 1);
- whammy.frames[idx].image = webp;
- });
-
- if (!config.disableLogs) {
- console.log('Generating WebM');
- }
-
- callback();
- };
-
- /**
- * This method stops recording Canvas.
- * @param {function} callback - Callback function, that is used to pass recorded blob back to the callee.
- * @method
- * @memberof CanvasRecorder
- * @example
- * recorder.stop(function(blob) {
- * video.src = URL.createObjectURL(blob);
- * });
- */
- this.stop = function (callback) {
- isRecording = false;
-
- var that = this;
-
- if (isCanvasSupportsStreamCapturing && mediaStreamRecorder) {
- mediaStreamRecorder.stop(callback);
- return;
- }
-
- this.getWebPImages(function () {
- /**
- * @property {Blob} blob - Recorded frames in video/webm blob.
- * @memberof CanvasRecorder
- * @example
- * recorder.stop(function() {
- * var blob = recorder.blob;
- * });
- */
- whammy.compile(function (blob) {
- if (!config.disableLogs) {
- console.log('Recording finished!');
- }
-
- that.blob = blob;
-
- if (that.blob.forEach) {
- that.blob = new Blob([], {
- type: 'video/webm'
- });
- }
-
- if (callback) {
- callback(that.blob);
- }
-
- whammy.frames = [];
- });
- });
- };
-
- var isPausedRecording = false;
-
- /**
- * This method pauses the recording process.
- * @method
- * @memberof CanvasRecorder
- * @example
- * recorder.pause();
- */
- this.pause = function () {
- isPausedRecording = true;
-
- if (mediaStreamRecorder instanceof MediaStreamRecorder) {
- mediaStreamRecorder.pause();
- return;
- }
- };
-
- /**
- * This method resumes the recording process.
- * @method
- * @memberof CanvasRecorder
- * @example
- * recorder.resume();
- */
- this.resume = function () {
- isPausedRecording = false;
-
- if (mediaStreamRecorder instanceof MediaStreamRecorder) {
- mediaStreamRecorder.resume();
- return;
- }
-
- if (!isRecording) {
- this.record();
- }
- };
-
- /**
- * This method resets currently recorded data.
- * @method
- * @memberof CanvasRecorder
- * @example
- * recorder.clearRecordedData();
- */
- this.clearRecordedData = function () {
- if (isRecording) {
- this.stop(clearRecordedDataCB);
- }
- clearRecordedDataCB();
- };
-
- function clearRecordedDataCB() {
- whammy.frames = [];
- isRecording = false;
- isPausedRecording = false;
- }
-
- // for debugging
- this.name = 'CanvasRecorder';
- this.toString = function () {
- return this.name;
- };
-
- function cloneCanvas() {
- //create a new canvas
- var newCanvas = document.createElement('canvas');
- var context = newCanvas.getContext('2d');
-
- //set dimensions
- newCanvas.width = htmlElement.width;
- newCanvas.height = htmlElement.height;
-
- //apply the old canvas to the new one
- context.drawImage(htmlElement, 0, 0);
-
- //return the new canvas
- return newCanvas;
- }
-
- function drawCanvasFrame() {
- if (isPausedRecording) {
- lastTime = new Date().getTime();
- return setTimeout(drawCanvasFrame, 500);
- }
-
- if (htmlElement.nodeName.toLowerCase() === 'canvas') {
- var duration = new Date().getTime() - lastTime;
- // via #206, by Jack i.e. @Seymourr
- lastTime = new Date().getTime();
-
- whammy.frames.push({
- image: cloneCanvas(),
- duration: duration
- });
-
- if (isRecording) {
- setTimeout(drawCanvasFrame, config.frameInterval);
- }
- return;
- }
-
- html2canvas(htmlElement, {
- grabMouse: typeof config.showMousePointer === 'undefined' || config.showMousePointer,
- onrendered: function (canvas) {
- var duration = new Date().getTime() - lastTime;
- if (!duration) {
- return setTimeout(drawCanvasFrame, config.frameInterval);
- }
-
- // via #206, by Jack i.e. @Seymourr
- lastTime = new Date().getTime();
-
- whammy.frames.push({
- image: canvas.toDataURL('image/webp', 1),
- duration: duration
- });
-
- if (isRecording) {
- setTimeout(drawCanvasFrame, config.frameInterval);
- }
- }
- });
- }
-
- var lastTime = new Date().getTime();
-
- var whammy = new Whammy.Video(100);
- }
-
- if (typeof RecordRTC !== 'undefined') {
- RecordRTC.CanvasRecorder = CanvasRecorder;
- }
-
- // _________________
- // WhammyRecorder.js
-
- /**
- * WhammyRecorder is a standalone class used by {@link RecordRTC} to bring video recording in Chrome. It runs top over {@link Whammy}.
- * @summary Video recording feature in Chrome.
- * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT}
- * @author {@link https://MuazKhan.com|Muaz Khan}
- * @typedef WhammyRecorder
- * @class
- * @example
- * var recorder = new WhammyRecorder(mediaStream);
- * recorder.record();
- * recorder.stop(function(blob) {
- * video.src = URL.createObjectURL(blob);
- * });
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- * @param {MediaStream} mediaStream - MediaStream object fetched using getUserMedia API or generated using captureStreamUntilEnded or WebAudio API.
- * @param {object} config - {disableLogs: true, initCallback: function, video: HTMLVideoElement, etc.}
- */
-
- function WhammyRecorder(mediaStream, config) {
-
- config = config || {};
-
- if (!config.frameInterval) {
- config.frameInterval = 10;
- }
-
- if (!config.disableLogs) {
- console.log('Using frames-interval:', config.frameInterval);
- }
-
- /**
- * This method records video.
- * @method
- * @memberof WhammyRecorder
- * @example
- * recorder.record();
- */
- this.record = function () {
- if (!config.width) {
- config.width = 320;
- }
-
- if (!config.height) {
- config.height = 240;
- }
-
- if (!config.video) {
- config.video = {
- width: config.width,
- height: config.height
- };
- }
-
- if (!config.canvas) {
- config.canvas = {
- width: config.width,
- height: config.height
- };
- }
-
- canvas.width = config.canvas.width || 320;
- canvas.height = config.canvas.height || 240;
-
- context = canvas.getContext('2d');
-
- // setting defaults
- if (config.video && config.video instanceof HTMLVideoElement) {
- video = config.video.cloneNode();
-
- if (config.initCallback) {
- config.initCallback();
- }
- } else {
- video = document.createElement('video');
-
- setSrcObject(mediaStream, video);
-
- video.onloadedmetadata = function () { // "onloadedmetadata" may NOT work in FF?
- if (config.initCallback) {
- config.initCallback();
- }
- };
-
- video.width = config.video.width;
- video.height = config.video.height;
- }
-
- video.muted = true;
- video.play();
-
- lastTime = new Date().getTime();
- whammy = new Whammy.Video();
-
- if (!config.disableLogs) {
- console.log('canvas resolutions', canvas.width, '*', canvas.height);
- console.log('video width/height', video.width || canvas.width, '*', video.height || canvas.height);
- }
-
- drawFrames(config.frameInterval);
- };
-
- /**
- * Draw and push frames to Whammy
- * @param {integer} frameInterval - set minimum interval (in milliseconds) between each time we push a frame to Whammy
- */
- function drawFrames(frameInterval) {
- frameInterval = typeof frameInterval !== 'undefined' ? frameInterval : 10;
-
- var duration = new Date().getTime() - lastTime;
- if (!duration) {
- return setTimeout(drawFrames, frameInterval, frameInterval);
- }
-
- if (isPausedRecording) {
- lastTime = new Date().getTime();
- return setTimeout(drawFrames, 100);
- }
-
- // via #206, by Jack i.e. @Seymourr
- lastTime = new Date().getTime();
-
- if (video.paused) {
- // via: https://github.com/muaz-khan/WebRTC-Experiment/pull/316
- // Tweak for Android Chrome
- video.play();
- }
-
- context.drawImage(video, 0, 0, canvas.width, canvas.height);
- whammy.frames.push({
- duration: duration,
- image: canvas.toDataURL('image/webp')
- });
-
- if (!isStopDrawing) {
- setTimeout(drawFrames, frameInterval, frameInterval);
- }
- }
-
- function asyncLoop(o) {
- var i = -1,
- length = o.length;
-
- (function loop() {
- i++;
- if (i === length) {
- o.callback();
- return;
- }
-
- // "setTimeout" added by Jim McLeod
- setTimeout(function () {
- o.functionToLoop(loop, i);
- }, 1);
- })();
- }
-
-
- /**
- * remove black frames from the beginning to the specified frame
- * @param {Array} _frames - array of frames to be checked
- * @param {number} _framesToCheck - number of frame until check will be executed (-1 - will drop all frames until frame not matched will be found)
- * @param {number} _pixTolerance - 0 - very strict (only black pixel color) ; 1 - all
- * @param {number} _frameTolerance - 0 - very strict (only black frame color) ; 1 - all
- * @returns {Array} - array of frames
- */
- // pull#293 by @volodalexey
- function dropBlackFrames(_frames, _framesToCheck, _pixTolerance, _frameTolerance, callback) {
- var localCanvas = document.createElement('canvas');
- localCanvas.width = canvas.width;
- localCanvas.height = canvas.height;
- var context2d = localCanvas.getContext('2d');
- var resultFrames = [];
-
- var checkUntilNotBlack = _framesToCheck === -1;
- var endCheckFrame = (_framesToCheck && _framesToCheck > 0 && _framesToCheck <= _frames.length) ?
- _framesToCheck : _frames.length;
- var sampleColor = {
- r: 0,
- g: 0,
- b: 0
- };
- var maxColorDifference = Math.sqrt(
- Math.pow(255, 2) +
- Math.pow(255, 2) +
- Math.pow(255, 2)
- );
- var pixTolerance = _pixTolerance && _pixTolerance >= 0 && _pixTolerance <= 1 ? _pixTolerance : 0;
- var frameTolerance = _frameTolerance && _frameTolerance >= 0 && _frameTolerance <= 1 ? _frameTolerance : 0;
- var doNotCheckNext = false;
-
- asyncLoop({
- length: endCheckFrame,
- functionToLoop: function (loop, f) {
- var matchPixCount, endPixCheck, maxPixCount;
-
- var finishImage = function () {
- if (!doNotCheckNext && maxPixCount - matchPixCount <= maxPixCount * frameTolerance); else {
- // console.log('frame is passed : ' + f);
- if (checkUntilNotBlack) {
- doNotCheckNext = true;
- }
- resultFrames.push(_frames[f]);
- }
- loop();
- };
-
- if (!doNotCheckNext) {
- var image = new Image();
- image.onload = function () {
- context2d.drawImage(image, 0, 0, canvas.width, canvas.height);
- var imageData = context2d.getImageData(0, 0, canvas.width, canvas.height);
- matchPixCount = 0;
- endPixCheck = imageData.data.length;
- maxPixCount = imageData.data.length / 4;
-
- for (var pix = 0; pix < endPixCheck; pix += 4) {
- var currentColor = {
- r: imageData.data[pix],
- g: imageData.data[pix + 1],
- b: imageData.data[pix + 2]
- };
- var colorDifference = Math.sqrt(
- Math.pow(currentColor.r - sampleColor.r, 2) +
- Math.pow(currentColor.g - sampleColor.g, 2) +
- Math.pow(currentColor.b - sampleColor.b, 2)
- );
- // difference in color it is difference in color vectors (r1,g1,b1) <=> (r2,g2,b2)
- if (colorDifference <= maxColorDifference * pixTolerance) {
- matchPixCount++;
- }
- }
- finishImage();
- };
- image.src = _frames[f].image;
- } else {
- finishImage();
- }
- },
- callback: function () {
- resultFrames = resultFrames.concat(_frames.slice(endCheckFrame));
-
- if (resultFrames.length <= 0) {
- // at least one last frame should be available for next manipulation
- // if total duration of all frames will be < 1000 than ffmpeg doesn't work well...
- resultFrames.push(_frames[_frames.length - 1]);
- }
- callback(resultFrames);
- }
- });
- }
-
- var isStopDrawing = false;
-
- /**
- * This method stops recording video.
- * @param {function} callback - Callback function, that is used to pass recorded blob back to the callee.
- * @method
- * @memberof WhammyRecorder
- * @example
- * recorder.stop(function(blob) {
- * video.src = URL.createObjectURL(blob);
- * });
- */
- this.stop = function (callback) {
- callback = callback || function () { };
-
- isStopDrawing = true;
-
- var _this = this;
- // analyse of all frames takes some time!
- setTimeout(function () {
- // e.g. dropBlackFrames(frames, 10, 1, 1) - will cut all 10 frames
- // e.g. dropBlackFrames(frames, 10, 0.5, 0.5) - will analyse 10 frames
- // e.g. dropBlackFrames(frames, 10) === dropBlackFrames(frames, 10, 0, 0) - will analyse 10 frames with strict black color
- dropBlackFrames(whammy.frames, -1, null, null, function (frames) {
- whammy.frames = frames;
-
- // to display advertisement images!
- if (config.advertisement && config.advertisement.length) {
- whammy.frames = config.advertisement.concat(whammy.frames);
- }
-
- /**
- * @property {Blob} blob - Recorded frames in video/webm blob.
- * @memberof WhammyRecorder
- * @example
- * recorder.stop(function() {
- * var blob = recorder.blob;
- * });
- */
- whammy.compile(function (blob) {
- _this.blob = blob;
-
- if (_this.blob.forEach) {
- _this.blob = new Blob([], {
- type: 'video/webm'
- });
- }
-
- if (callback) {
- callback(_this.blob);
- }
- });
- });
- }, 10);
- };
-
- var isPausedRecording = false;
-
- /**
- * This method pauses the recording process.
- * @method
- * @memberof WhammyRecorder
- * @example
- * recorder.pause();
- */
- this.pause = function () {
- isPausedRecording = true;
- };
-
- /**
- * This method resumes the recording process.
- * @method
- * @memberof WhammyRecorder
- * @example
- * recorder.resume();
- */
- this.resume = function () {
- isPausedRecording = false;
-
- if (isStopDrawing) {
- this.record();
- }
- };
-
- /**
- * This method resets currently recorded data.
- * @method
- * @memberof WhammyRecorder
- * @example
- * recorder.clearRecordedData();
- */
- this.clearRecordedData = function () {
- if (!isStopDrawing) {
- this.stop(clearRecordedDataCB);
- }
- clearRecordedDataCB();
- };
-
- function clearRecordedDataCB() {
- whammy.frames = [];
- isStopDrawing = true;
- isPausedRecording = false;
- }
-
- // for debugging
- this.name = 'WhammyRecorder';
- this.toString = function () {
- return this.name;
- };
-
- var canvas = document.createElement('canvas');
- var context = canvas.getContext('2d');
-
- var video;
- var lastTime;
- var whammy;
- }
-
- if (typeof RecordRTC !== 'undefined') {
- RecordRTC.WhammyRecorder = WhammyRecorder;
- }
-
- // https://github.com/antimatter15/whammy/blob/master/LICENSE
- // _________
- // Whammy.js
-
- // todo: Firefox now supports webp for webm containers!
- // their MediaRecorder implementation works well!
- // should we provide an option to record via Whammy.js or MediaRecorder API is a better solution?
-
- /**
- * Whammy is a standalone class used by {@link RecordRTC} to bring video recording in Chrome. It is written by {@link https://github.com/antimatter15|antimatter15}
- * @summary A real time javascript webm encoder based on a canvas hack.
- * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT}
- * @author {@link https://MuazKhan.com|Muaz Khan}
- * @typedef Whammy
- * @class
- * @example
- * var recorder = new Whammy().Video(15);
- * recorder.add(context || canvas || dataURL);
- * var output = recorder.compile();
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- */
-
- var Whammy = (function () {
- // a more abstract-ish API
-
- function WhammyVideo(duration) {
- this.frames = [];
- this.duration = duration || 1;
- this.quality = 0.8;
- }
-
- /**
- * Pass Canvas or Context or image/webp(string) to {@link Whammy} encoder.
- * @method
- * @memberof Whammy
- * @example
- * recorder = new Whammy().Video(0.8, 100);
- * recorder.add(canvas || context || 'image/webp');
- * @param {string} frame - Canvas || Context || image/webp
- * @param {number} duration - Stick a duration (in milliseconds)
- */
- WhammyVideo.prototype.add = function (frame, duration) {
- if ('canvas' in frame) { //CanvasRenderingContext2D
- frame = frame.canvas;
- }
-
- if ('toDataURL' in frame) {
- frame = frame.toDataURL('image/webp', this.quality);
- }
-
- if (!(/^data:image\/webp;base64,/ig).test(frame)) {
- throw 'Input must be formatted properly as a base64 encoded DataURI of type image/webp';
- }
- this.frames.push({
- image: frame,
- duration: duration || this.duration
- });
- };
-
- function processInWebWorker(_function) {
- var blob = URL.createObjectURL(new Blob([_function.toString(),
- 'this.onmessage = function (eee) {' + _function.name + '(eee.data);}'
- ], {
- type: 'application/javascript'
- }));
-
- var worker = new Worker(blob);
- URL.revokeObjectURL(blob);
- return worker;
- }
-
- function whammyInWebWorker(frames) {
- function ArrayToWebM(frames) {
- var info = checkFrames(frames);
- if (!info) {
- return [];
- }
-
- var clusterMaxDuration = 30000;
-
- var EBML = [{
- 'id': 0x1a45dfa3, // EBML
- 'data': [{
- 'data': 1,
- 'id': 0x4286 // EBMLVersion
- }, {
- 'data': 1,
- 'id': 0x42f7 // EBMLReadVersion
- }, {
- 'data': 4,
- 'id': 0x42f2 // EBMLMaxIDLength
- }, {
- 'data': 8,
- 'id': 0x42f3 // EBMLMaxSizeLength
- }, {
- 'data': 'webm',
- 'id': 0x4282 // DocType
- }, {
- 'data': 2,
- 'id': 0x4287 // DocTypeVersion
- }, {
- 'data': 2,
- 'id': 0x4285 // DocTypeReadVersion
- }]
- }, {
- 'id': 0x18538067, // Segment
- 'data': [{
- 'id': 0x1549a966, // Info
- 'data': [{
- 'data': 1e6, //do things in millisecs (num of nanosecs for duration scale)
- 'id': 0x2ad7b1 // TimecodeScale
- }, {
- 'data': 'whammy',
- 'id': 0x4d80 // MuxingApp
- }, {
- 'data': 'whammy',
- 'id': 0x5741 // WritingApp
- }, {
- 'data': doubleToString(info.duration),
- 'id': 0x4489 // Duration
- }]
- }, {
- 'id': 0x1654ae6b, // Tracks
- 'data': [{
- 'id': 0xae, // TrackEntry
- 'data': [{
- 'data': 1,
- 'id': 0xd7 // TrackNumber
- }, {
- 'data': 1,
- 'id': 0x73c5 // TrackUID
- }, {
- 'data': 0,
- 'id': 0x9c // FlagLacing
- }, {
- 'data': 'und',
- 'id': 0x22b59c // Language
- }, {
- 'data': 'V_VP8',
- 'id': 0x86 // CodecID
- }, {
- 'data': 'VP8',
- 'id': 0x258688 // CodecName
- }, {
- 'data': 1,
- 'id': 0x83 // TrackType
- }, {
- 'id': 0xe0, // Video
- 'data': [{
- 'data': info.width,
- 'id': 0xb0 // PixelWidth
- }, {
- 'data': info.height,
- 'id': 0xba // PixelHeight
- }]
- }]
- }]
- }]
- }];
-
- //Generate clusters (max duration)
- var frameNumber = 0;
- var clusterTimecode = 0;
- while (frameNumber < frames.length) {
-
- var clusterFrames = [];
- var clusterDuration = 0;
- do {
- clusterFrames.push(frames[frameNumber]);
- clusterDuration += frames[frameNumber].duration;
- frameNumber++;
- } while (frameNumber < frames.length && clusterDuration < clusterMaxDuration);
-
- var clusterCounter = 0;
- var cluster = {
- 'id': 0x1f43b675, // Cluster
- 'data': getClusterData(clusterTimecode, clusterCounter, clusterFrames)
- }; //Add cluster to segment
- EBML[1].data.push(cluster);
- clusterTimecode += clusterDuration;
- }
-
- return generateEBML(EBML);
- }
-
- function getClusterData(clusterTimecode, clusterCounter, clusterFrames) {
- return [{
- 'data': clusterTimecode,
- 'id': 0xe7 // Timecode
- }].concat(clusterFrames.map(function (webp) {
- var block = makeSimpleBlock({
- discardable: 0,
- frame: webp.data.slice(4),
- invisible: 0,
- keyframe: 1,
- lacing: 0,
- trackNum: 1,
- timecode: Math.round(clusterCounter)
- });
- clusterCounter += webp.duration;
- return {
- data: block,
- id: 0xa3
- };
- }));
- }
-
- // sums the lengths of all the frames and gets the duration
-
- function checkFrames(frames) {
- if (!frames[0]) {
- postMessage({
- error: 'Something went wrong. Maybe WebP format is not supported in the current browser.'
- });
- return;
- }
-
- var width = frames[0].width,
- height = frames[0].height,
- duration = frames[0].duration;
-
- for (var i = 1; i < frames.length; i++) {
- duration += frames[i].duration;
- }
- return {
- duration: duration,
- width: width,
- height: height
- };
- }
-
- function numToBuffer(num) {
- var parts = [];
- while (num > 0) {
- parts.push(num & 0xff);
- num = num >> 8;
- }
- return new Uint8Array(parts.reverse());
- }
-
- function strToBuffer(str) {
- return new Uint8Array(str.split('').map(function (e) {
- return e.charCodeAt(0);
- }));
- }
-
- function bitsToBuffer(bits) {
- var data = [];
- var pad = (bits.length % 8) ? (new Array(1 + 8 - (bits.length % 8))).join('0') : '';
- bits = pad + bits;
- for (var i = 0; i < bits.length; i += 8) {
- data.push(parseInt(bits.substr(i, 8), 2));
- }
- return new Uint8Array(data);
- }
-
- function generateEBML(json) {
- var ebml = [];
- for (var i = 0; i < json.length; i++) {
- var data = json[i].data;
-
- if (typeof data === 'object') {
- data = generateEBML(data);
- }
-
- if (typeof data === 'number') {
- data = bitsToBuffer(data.toString(2));
- }
-
- if (typeof data === 'string') {
- data = strToBuffer(data);
- }
-
- var len = data.size || data.byteLength || data.length;
- var zeroes = Math.ceil(Math.ceil(Math.log(len) / Math.log(2)) / 8);
- var sizeToString = len.toString(2);
- var padded = (new Array((zeroes * 7 + 7 + 1) - sizeToString.length)).join('0') + sizeToString;
- var size = (new Array(zeroes)).join('0') + '1' + padded;
-
- ebml.push(numToBuffer(json[i].id));
- ebml.push(bitsToBuffer(size));
- ebml.push(data);
- }
-
- return new Blob(ebml, {
- type: 'video/webm'
- });
- }
-
- function makeSimpleBlock(data) {
- var flags = 0;
-
- if (data.keyframe) {
- flags |= 128;
- }
-
- if (data.invisible) {
- flags |= 8;
- }
-
- if (data.lacing) {
- flags |= (data.lacing << 1);
- }
-
- if (data.discardable) {
- flags |= 1;
- }
-
- if (data.trackNum > 127) {
- throw 'TrackNumber > 127 not supported';
- }
-
- var out = [data.trackNum | 0x80, data.timecode >> 8, data.timecode & 0xff, flags].map(function (e) {
- return String.fromCharCode(e);
- }).join('') + data.frame;
-
- return out;
- }
-
- function parseWebP(riff) {
- var VP8 = riff.RIFF[0].WEBP[0];
-
- var frameStart = VP8.indexOf('\x9d\x01\x2a'); // A VP8 keyframe starts with the 0x9d012a header
- for (var i = 0, c = []; i < 4; i++) {
- c[i] = VP8.charCodeAt(frameStart + 3 + i);
- }
-
- var width, height, tmp;
-
- //the code below is literally copied verbatim from the bitstream spec
- tmp = (c[1] << 8) | c[0];
- width = tmp & 0x3FFF;
- tmp = (c[3] << 8) | c[2];
- height = tmp & 0x3FFF;
- return {
- width: width,
- height: height,
- data: VP8,
- riff: riff
- };
- }
-
- function getStrLength(string, offset) {
- return parseInt(string.substr(offset + 4, 4).split('').map(function (i) {
- var unpadded = i.charCodeAt(0).toString(2);
- return (new Array(8 - unpadded.length + 1)).join('0') + unpadded;
- }).join(''), 2);
- }
-
- function parseRIFF(string) {
- var offset = 0;
- var chunks = {};
-
- while (offset < string.length) {
- var id = string.substr(offset, 4);
- var len = getStrLength(string, offset);
- var data = string.substr(offset + 4 + 4, len);
- offset += 4 + 4 + len;
- chunks[id] = chunks[id] || [];
-
- if (id === 'RIFF' || id === 'LIST') {
- chunks[id].push(parseRIFF(data));
- } else {
- chunks[id].push(data);
- }
- }
- return chunks;
- }
-
- function doubleToString(num) {
- return [].slice.call(
- new Uint8Array((new Float64Array([num])).buffer), 0).map(function (e) {
- return String.fromCharCode(e);
- }).reverse().join('');
- }
-
- var webm = new ArrayToWebM(frames.map(function (frame) {
- var webp = parseWebP(parseRIFF(atob(frame.image.slice(23))));
- webp.duration = frame.duration;
- return webp;
- }));
-
- postMessage(webm);
- }
-
- /**
- * Encodes frames in WebM container. It uses WebWorkinvoke to invoke 'ArrayToWebM' method.
- * @param {function} callback - Callback function, that is used to pass recorded blob back to the callee.
- * @method
- * @memberof Whammy
- * @example
- * recorder = new Whammy().Video(0.8, 100);
- * recorder.compile(function(blob) {
- * // blob.size - blob.type
- * });
- */
- WhammyVideo.prototype.compile = function (callback) {
- var webWorker = processInWebWorker(whammyInWebWorker);
-
- webWorker.onmessage = function (event) {
- if (event.data.error) {
- console.error(event.data.error);
- return;
- }
- callback(event.data);
- };
-
- webWorker.postMessage(this.frames);
- };
-
- return {
- /**
- * A more abstract-ish API.
- * @method
- * @memberof Whammy
- * @example
- * recorder = new Whammy().Video(0.8, 100);
- * @param {?number} speed - 0.8
- * @param {?number} quality - 100
- */
- Video: WhammyVideo
- };
- })();
-
- if (typeof RecordRTC !== 'undefined') {
- RecordRTC.Whammy = Whammy;
- }
-
- // ______________ (indexed-db)
- // DiskStorage.js
-
- /**
- * DiskStorage is a standalone object used by {@link RecordRTC} to store recorded blobs in IndexedDB storage.
- * @summary Writing blobs into IndexedDB.
- * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT}
- * @author {@link https://MuazKhan.com|Muaz Khan}
- * @example
- * DiskStorage.Store({
- * audioBlob: yourAudioBlob,
- * videoBlob: yourVideoBlob,
- * gifBlob : yourGifBlob
- * });
- * DiskStorage.Fetch(function(dataURL, type) {
- * if(type === 'audioBlob') { }
- * if(type === 'videoBlob') { }
- * if(type === 'gifBlob') { }
- * });
- * // DiskStorage.dataStoreName = 'recordRTC';
- * // DiskStorage.onError = function(error) { };
- * @property {function} init - This method must be called once to initialize IndexedDB ObjectStore. Though, it is auto-used internally.
- * @property {function} Fetch - This method fetches stored blobs from IndexedDB.
- * @property {function} Store - This method stores blobs in IndexedDB.
- * @property {function} onError - This function is invoked for any known/unknown error.
- * @property {string} dataStoreName - Name of the ObjectStore created in IndexedDB storage.
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- */
-
-
- var DiskStorage = {
- /**
- * This method must be called once to initialize IndexedDB ObjectStore. Though, it is auto-used internally.
- * @method
- * @memberof DiskStorage
- * @internal
- * @example
- * DiskStorage.init();
- */
- init: function () {
- var self = this;
-
- if (typeof indexedDB === 'undefined' || typeof indexedDB.open === 'undefined') {
- console.error('IndexedDB API are not available in this browser.');
- return;
- }
-
- var dbVersion = 1;
- var dbName = this.dbName || location.href.replace(/\/|:|#|%|\.|\[|\]/g, ''),
- db;
- var request = indexedDB.open(dbName, dbVersion);
-
- function createObjectStore(dataBase) {
- dataBase.createObjectStore(self.dataStoreName);
- }
-
- function putInDB() {
- var transaction = db.transaction([self.dataStoreName], 'readwrite');
-
- if (self.videoBlob) {
- transaction.objectStore(self.dataStoreName).put(self.videoBlob, 'videoBlob');
- }
-
- if (self.gifBlob) {
- transaction.objectStore(self.dataStoreName).put(self.gifBlob, 'gifBlob');
- }
-
- if (self.audioBlob) {
- transaction.objectStore(self.dataStoreName).put(self.audioBlob, 'audioBlob');
- }
-
- function getFromStore(portionName) {
- transaction.objectStore(self.dataStoreName).get(portionName).onsuccess = function (event) {
- if (self.callback) {
- self.callback(event.target.result, portionName);
- }
- };
- }
-
- getFromStore('audioBlob');
- getFromStore('videoBlob');
- getFromStore('gifBlob');
- }
-
- request.onerror = self.onError;
-
- request.onsuccess = function () {
- db = request.result;
- db.onerror = self.onError;
-
- if (db.setVersion) {
- if (db.version !== dbVersion) {
- var setVersion = db.setVersion(dbVersion);
- setVersion.onsuccess = function () {
- createObjectStore(db);
- putInDB();
- };
- } else {
- putInDB();
- }
- } else {
- putInDB();
- }
- };
- request.onupgradeneeded = function (event) {
- createObjectStore(event.target.result);
- };
- },
- /**
- * This method fetches stored blobs from IndexedDB.
- * @method
- * @memberof DiskStorage
- * @internal
- * @example
- * DiskStorage.Fetch(function(dataURL, type) {
- * if(type === 'audioBlob') { }
- * if(type === 'videoBlob') { }
- * if(type === 'gifBlob') { }
- * });
- */
- Fetch: function (callback) {
- this.callback = callback;
- this.init();
-
- return this;
- },
- /**
- * This method stores blobs in IndexedDB.
- * @method
- * @memberof DiskStorage
- * @internal
- * @example
- * DiskStorage.Store({
- * audioBlob: yourAudioBlob,
- * videoBlob: yourVideoBlob,
- * gifBlob : yourGifBlob
- * });
- */
- Store: function (config) {
- this.audioBlob = config.audioBlob;
- this.videoBlob = config.videoBlob;
- this.gifBlob = config.gifBlob;
-
- this.init();
-
- return this;
- },
- /**
- * This function is invoked for any known/unknown error.
- * @method
- * @memberof DiskStorage
- * @internal
- * @example
- * DiskStorage.onError = function(error){
- * alerot( JSON.stringify(error) );
- * };
- */
- onError: function (error) {
- console.error(JSON.stringify(error, null, '\t'));
- },
-
- /**
- * @property {string} dataStoreName - Name of the ObjectStore created in IndexedDB storage.
- * @memberof DiskStorage
- * @internal
- * @example
- * DiskStorage.dataStoreName = 'recordRTC';
- */
- dataStoreName: 'recordRTC',
- dbName: null
- };
-
- if (typeof RecordRTC !== 'undefined') {
- RecordRTC.DiskStorage = DiskStorage;
- }
-
- // ______________
- // GifRecorder.js
-
- /**
- * GifRecorder is standalone calss used by {@link RecordRTC} to record video or canvas into animated gif.
- * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT}
- * @author {@link https://MuazKhan.com|Muaz Khan}
- * @typedef GifRecorder
- * @class
- * @example
- * var recorder = new GifRecorder(mediaStream || canvas || context, { onGifPreview: function, onGifRecordingStarted: function, width: 1280, height: 720, frameRate: 200, quality: 10 });
- * recorder.record();
- * recorder.stop(function(blob) {
- * img.src = URL.createObjectURL(blob);
- * });
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- * @param {MediaStream} mediaStream - MediaStream object or HTMLCanvasElement or CanvasRenderingContext2D.
- * @param {object} config - {disableLogs:true, initCallback: function, width: 320, height: 240, frameRate: 200, quality: 10}
- */
-
- function GifRecorder(mediaStream, config) {
- if (typeof GIFEncoder === 'undefined') {
- var script = document.createElement('script');
- script.src = 'https://www.webrtc-experiment.com/gif-recorder.js';
- (document.body || document.documentElement).appendChild(script);
- }
-
- config = config || {};
-
- var isHTMLObject = mediaStream instanceof CanvasRenderingContext2D || mediaStream instanceof HTMLCanvasElement;
-
- /**
- * This method records MediaStream.
- * @method
- * @memberof GifRecorder
- * @example
- * recorder.record();
- */
- this.record = function () {
- if (typeof GIFEncoder === 'undefined') {
- setTimeout(self.record, 1000);
- return;
- }
-
- if (!isLoadedMetaData) {
- setTimeout(self.record, 1000);
- return;
- }
-
- if (!isHTMLObject) {
- if (!config.width) {
- config.width = video.offsetWidth || 320;
- }
-
- if (!config.height) {
- config.height = video.offsetHeight || 240;
- }
-
- if (!config.video) {
- config.video = {
- width: config.width,
- height: config.height
- };
- }
-
- if (!config.canvas) {
- config.canvas = {
- width: config.width,
- height: config.height
- };
- }
-
- canvas.width = config.canvas.width || 320;
- canvas.height = config.canvas.height || 240;
-
- video.width = config.video.width || 320;
- video.height = config.video.height || 240;
- }
-
- // external library to record as GIF images
- gifEncoder = new GIFEncoder();
-
- // void setRepeat(int iter)
- // Sets the number of times the set of GIF frames should be played.
- // Default is 1; 0 means play indefinitely.
- gifEncoder.setRepeat(0);
-
- // void setFrameRate(Number fps)
- // Sets frame rate in frames per second.
- // Equivalent to setDelay(1000/fps).
- // Using "setDelay" instead of "setFrameRate"
- gifEncoder.setDelay(config.frameRate || 200);
-
- // void setQuality(int quality)
- // Sets quality of color quantization (conversion of images to the
- // maximum 256 colors allowed by the GIF specification).
- // Lower values (minimum = 1) produce better colors,
- // but slow processing significantly. 10 is the default,
- // and produces good color mapping at reasonable speeds.
- // Values greater than 20 do not yield significant improvements in speed.
- gifEncoder.setQuality(config.quality || 10);
-
- // Boolean start()
- // This writes the GIF Header and returns false if it fails.
- gifEncoder.start();
-
- if (typeof config.onGifRecordingStarted === 'function') {
- config.onGifRecordingStarted();
- }
-
- function drawVideoFrame(time) {
- if (self.clearedRecordedData === true) {
- return;
- }
-
- if (isPausedRecording) {
- return setTimeout(function () {
- drawVideoFrame(time);
- }, 100);
- }
-
- lastAnimationFrame = requestAnimationFrame(drawVideoFrame);
-
- if (typeof lastFrameTime === undefined) {
- lastFrameTime = time;
- }
-
- // ~10 fps
- if (time - lastFrameTime < 90) {
- return;
- }
-
- if (!isHTMLObject && video.paused) {
- // via: https://github.com/muaz-khan/WebRTC-Experiment/pull/316
- // Tweak for Android Chrome
- video.play();
- }
-
- if (!isHTMLObject) {
- context.drawImage(video, 0, 0, canvas.width, canvas.height);
- }
-
- if (config.onGifPreview) {
- config.onGifPreview(canvas.toDataURL('image/png'));
- }
-
- gifEncoder.addFrame(context);
- lastFrameTime = time;
- }
-
- lastAnimationFrame = requestAnimationFrame(drawVideoFrame);
-
- if (config.initCallback) {
- config.initCallback();
- }
- };
-
- /**
- * This method stops recording MediaStream.
- * @param {function} callback - Callback function, that is used to pass recorded blob back to the callee.
- * @method
- * @memberof GifRecorder
- * @example
- * recorder.stop(function(blob) {
- * img.src = URL.createObjectURL(blob);
- * });
- */
- this.stop = function (callback) {
- callback = callback || function () { };
-
- if (lastAnimationFrame) {
- cancelAnimationFrame(lastAnimationFrame);
- }
-
- /**
- * @property {Blob} blob - The recorded blob object.
- * @memberof GifRecorder
- * @example
- * recorder.stop(function(){
- * var blob = recorder.blob;
- * });
- */
- this.blob = new Blob([new Uint8Array(gifEncoder.stream().bin)], {
- type: 'image/gif'
- });
-
- callback(this.blob);
-
- // bug: find a way to clear old recorded blobs
- gifEncoder.stream().bin = [];
- };
-
- var isPausedRecording = false;
-
- /**
- * This method pauses the recording process.
- * @method
- * @memberof GifRecorder
- * @example
- * recorder.pause();
- */
- this.pause = function () {
- isPausedRecording = true;
- };
-
- /**
- * This method resumes the recording process.
- * @method
- * @memberof GifRecorder
- * @example
- * recorder.resume();
- */
- this.resume = function () {
- isPausedRecording = false;
- };
-
- /**
- * This method resets currently recorded data.
- * @method
- * @memberof GifRecorder
- * @example
- * recorder.clearRecordedData();
- */
- this.clearRecordedData = function () {
- self.clearedRecordedData = true;
- clearRecordedDataCB();
- };
-
- function clearRecordedDataCB() {
- if (gifEncoder) {
- gifEncoder.stream().bin = [];
- }
- }
-
- // for debugging
- this.name = 'GifRecorder';
- this.toString = function () {
- return this.name;
- };
-
- var canvas = document.createElement('canvas');
- var context = canvas.getContext('2d');
-
- if (isHTMLObject) {
- if (mediaStream instanceof CanvasRenderingContext2D) {
- context = mediaStream;
- canvas = context.canvas;
- } else if (mediaStream instanceof HTMLCanvasElement) {
- context = mediaStream.getContext('2d');
- canvas = mediaStream;
- }
- }
-
- var isLoadedMetaData = true;
-
- if (!isHTMLObject) {
- var video = document.createElement('video');
- video.muted = true;
- video.autoplay = true;
- video.playsInline = true;
-
- isLoadedMetaData = false;
- video.onloadedmetadata = function () {
- isLoadedMetaData = true;
- };
-
- setSrcObject(mediaStream, video);
-
- video.play();
- }
-
- var lastAnimationFrame = null;
- var lastFrameTime;
-
- var gifEncoder;
-
- var self = this;
- }
-
- if (typeof RecordRTC !== 'undefined') {
- RecordRTC.GifRecorder = GifRecorder;
- }
-
- // Last time updated: 2019-06-21 4:09:42 AM UTC
-
- // ________________________
- // MultiStreamsMixer v1.2.2
-
- // Open-Sourced: https://github.com/muaz-khan/MultiStreamsMixer
-
- // --------------------------------------------------
- // Muaz Khan - www.MuazKhan.com
- // MIT License - www.WebRTC-Experiment.com/licence
- // --------------------------------------------------
-
- function MultiStreamsMixer(arrayOfMediaStreams, elementClass) {
-
- var browserFakeUserAgent = 'Fake/5.0 (FakeOS) AppleWebKit/123 (KHTML, like Gecko) Fake/12.3.4567.89 Fake/123.45';
-
- (function (that) {
- if (typeof RecordRTC !== 'undefined') {
- return;
- }
-
- if (!that) {
- return;
- }
-
- if (typeof window !== 'undefined') {
- return;
- }
-
- if (typeof commonjsGlobal === 'undefined') {
- return;
- }
-
- commonjsGlobal.navigator = {
- userAgent: browserFakeUserAgent,
- getUserMedia: function () { }
- };
-
- if (!commonjsGlobal.console) {
- commonjsGlobal.console = {};
- }
-
- if (typeof commonjsGlobal.console.log === 'undefined' || typeof commonjsGlobal.console.error === 'undefined') {
- commonjsGlobal.console.error = commonjsGlobal.console.log = commonjsGlobal.console.log || function () {
- console.log(arguments);
- };
- }
-
- if (typeof document === 'undefined') {
- /*global document:true */
- that.document = {
- documentElement: {
- appendChild: function () {
- return '';
- }
- }
- };
-
- document.createElement = document.captureStream = document.mozCaptureStream = function () {
- var obj = {
- getContext: function () {
- return obj;
- },
- play: function () { },
- pause: function () { },
- drawImage: function () { },
- toDataURL: function () {
- return '';
- },
- style: {}
- };
- return obj;
- };
-
- that.HTMLVideoElement = function () { };
- }
-
- if (typeof location === 'undefined') {
- /*global location:true */
- that.location = {
- protocol: 'file:',
- href: '',
- hash: ''
- };
- }
-
- if (typeof screen === 'undefined') {
- /*global screen:true */
- that.screen = {
- width: 0,
- height: 0
- };
- }
-
- if (typeof URL === 'undefined') {
- /*global screen:true */
- that.URL = {
- createObjectURL: function () {
- return '';
- },
- revokeObjectURL: function () {
- return '';
- }
- };
- }
-
- /*global window:true */
- that.window = commonjsGlobal;
- })(typeof commonjsGlobal !== 'undefined' ? commonjsGlobal : null);
-
- // requires: chrome://flags/#enable-experimental-web-platform-features
-
- elementClass = elementClass || 'multi-streams-mixer';
-
- var videos = [];
- var isStopDrawingFrames = false;
-
- var canvas = document.createElement('canvas');
- var context = canvas.getContext('2d');
- canvas.style.opacity = 0;
- canvas.style.position = 'absolute';
- canvas.style.zIndex = -1;
- canvas.style.top = '-1000em';
- canvas.style.left = '-1000em';
- canvas.className = elementClass;
- (document.body || document.documentElement).appendChild(canvas);
-
- this.disableLogs = false;
- this.frameInterval = 10;
-
- this.width = 360;
- this.height = 240;
-
- // use gain node to prevent echo
- this.useGainNode = true;
-
- var self = this;
-
- // _____________________________
- // Cross-Browser-Declarations.js
-
- // WebAudio API representer
- var AudioContext = window.AudioContext;
-
- if (typeof AudioContext === 'undefined') {
- if (typeof webkitAudioContext !== 'undefined') {
- /*global AudioContext:true */
- AudioContext = webkitAudioContext;
- }
-
- if (typeof mozAudioContext !== 'undefined') {
- /*global AudioContext:true */
- AudioContext = mozAudioContext;
- }
- }
-
- /*jshint -W079 */
- var URL = window.URL;
-
- if (typeof URL === 'undefined' && typeof webkitURL !== 'undefined') {
- /*global URL:true */
- URL = webkitURL;
- }
-
- if (typeof navigator !== 'undefined' && typeof navigator.getUserMedia === 'undefined') { // maybe window.navigator?
- if (typeof navigator.webkitGetUserMedia !== 'undefined') {
- navigator.getUserMedia = navigator.webkitGetUserMedia;
- }
-
- if (typeof navigator.mozGetUserMedia !== 'undefined') {
- navigator.getUserMedia = navigator.mozGetUserMedia;
- }
- }
-
- var MediaStream = window.MediaStream;
-
- if (typeof MediaStream === 'undefined' && typeof webkitMediaStream !== 'undefined') {
- MediaStream = webkitMediaStream;
- }
-
- /*global MediaStream:true */
- if (typeof MediaStream !== 'undefined') {
- // override "stop" method for all browsers
- if (typeof MediaStream.prototype.stop === 'undefined') {
- MediaStream.prototype.stop = function () {
- this.getTracks().forEach(function (track) {
- track.stop();
- });
- };
- }
- }
-
- var Storage = {};
-
- if (typeof AudioContext !== 'undefined') {
- Storage.AudioContext = AudioContext;
- } else if (typeof webkitAudioContext !== 'undefined') {
- Storage.AudioContext = webkitAudioContext;
- }
-
- function setSrcObject(stream, element) {
- if ('srcObject' in element) {
- element.srcObject = stream;
- } else if ('mozSrcObject' in element) {
- element.mozSrcObject = stream;
- } else {
- element.srcObject = stream;
- }
- }
-
- this.startDrawingFrames = function () {
- drawVideosToCanvas();
- };
-
- function drawVideosToCanvas() {
- if (isStopDrawingFrames) {
- return;
- }
-
- var videosLength = videos.length;
-
- var fullcanvas = false;
- var remaining = [];
- videos.forEach(function (video) {
- if (!video.stream) {
- video.stream = {};
- }
-
- if (video.stream.fullcanvas) {
- fullcanvas = video;
- } else {
- // todo: video.stream.active or video.stream.live to fix blank frames issues?
- remaining.push(video);
- }
- });
-
- if (fullcanvas) {
- canvas.width = fullcanvas.stream.width;
- canvas.height = fullcanvas.stream.height;
- } else if (remaining.length) {
- canvas.width = videosLength > 1 ? remaining[0].width * 2 : remaining[0].width;
-
- var height = 1;
- if (videosLength === 3 || videosLength === 4) {
- height = 2;
- }
- if (videosLength === 5 || videosLength === 6) {
- height = 3;
- }
- if (videosLength === 7 || videosLength === 8) {
- height = 4;
- }
- if (videosLength === 9 || videosLength === 10) {
- height = 5;
- }
- canvas.height = remaining[0].height * height;
- } else {
- canvas.width = self.width || 360;
- canvas.height = self.height || 240;
- }
-
- if (fullcanvas && fullcanvas instanceof HTMLVideoElement) {
- drawImage(fullcanvas);
- }
-
- remaining.forEach(function (video, idx) {
- drawImage(video, idx);
- });
-
- setTimeout(drawVideosToCanvas, self.frameInterval);
- }
-
- function drawImage(video, idx) {
- if (isStopDrawingFrames) {
- return;
- }
-
- var x = 0;
- var y = 0;
- var width = video.width;
- var height = video.height;
-
- if (idx === 1) {
- x = video.width;
- }
-
- if (idx === 2) {
- y = video.height;
- }
-
- if (idx === 3) {
- x = video.width;
- y = video.height;
- }
-
- if (idx === 4) {
- y = video.height * 2;
- }
-
- if (idx === 5) {
- x = video.width;
- y = video.height * 2;
- }
-
- if (idx === 6) {
- y = video.height * 3;
- }
-
- if (idx === 7) {
- x = video.width;
- y = video.height * 3;
- }
-
- if (typeof video.stream.left !== 'undefined') {
- x = video.stream.left;
- }
-
- if (typeof video.stream.top !== 'undefined') {
- y = video.stream.top;
- }
-
- if (typeof video.stream.width !== 'undefined') {
- width = video.stream.width;
- }
-
- if (typeof video.stream.height !== 'undefined') {
- height = video.stream.height;
- }
-
- context.drawImage(video, x, y, width, height);
-
- if (typeof video.stream.onRender === 'function') {
- video.stream.onRender(context, x, y, width, height, idx);
- }
- }
-
- function getMixedStream() {
- isStopDrawingFrames = false;
- var mixedVideoStream = getMixedVideoStream();
-
- var mixedAudioStream = getMixedAudioStream();
- if (mixedAudioStream) {
- mixedAudioStream.getTracks().filter(function (t) {
- return t.kind === 'audio';
- }).forEach(function (track) {
- mixedVideoStream.addTrack(track);
- });
- }
- arrayOfMediaStreams.forEach(function (stream) {
- if (stream.fullcanvas);
- });
-
- // mixedVideoStream.prototype.appendStreams = appendStreams;
- // mixedVideoStream.prototype.resetVideoStreams = resetVideoStreams;
- // mixedVideoStream.prototype.clearRecordedData = clearRecordedData;
-
- return mixedVideoStream;
- }
-
- function getMixedVideoStream() {
- resetVideoStreams();
-
- var capturedStream;
-
- if ('captureStream' in canvas) {
- capturedStream = canvas.captureStream();
- } else if ('mozCaptureStream' in canvas) {
- capturedStream = canvas.mozCaptureStream();
- } else if (!self.disableLogs) {
- console.error('Upgrade to latest Chrome or otherwise enable this flag: chrome://flags/#enable-experimental-web-platform-features');
- }
-
- var videoStream = new MediaStream();
-
- capturedStream.getTracks().filter(function (t) {
- return t.kind === 'video';
- }).forEach(function (track) {
- videoStream.addTrack(track);
- });
-
- canvas.stream = videoStream;
-
- return videoStream;
- }
-
- function getMixedAudioStream() {
- // via: @pehrsons
- if (!Storage.AudioContextConstructor) {
- Storage.AudioContextConstructor = new Storage.AudioContext();
- }
-
- self.audioContext = Storage.AudioContextConstructor;
-
- self.audioSources = [];
-
- if (self.useGainNode === true) {
- self.gainNode = self.audioContext.createGain();
- self.gainNode.connect(self.audioContext.destination);
- self.gainNode.gain.value = 0; // don't hear self
- }
-
- var audioTracksLength = 0;
- arrayOfMediaStreams.forEach(function (stream) {
- if (!stream.getTracks().filter(function (t) {
- return t.kind === 'audio';
- }).length) {
- return;
- }
-
- audioTracksLength++;
-
- var audioSource = self.audioContext.createMediaStreamSource(stream);
-
- if (self.useGainNode === true) {
- audioSource.connect(self.gainNode);
- }
-
- self.audioSources.push(audioSource);
- });
-
- if (!audioTracksLength) {
- // because "self.audioContext" is not initialized
- // that's why we've to ignore rest of the code
- return;
- }
-
- self.audioDestination = self.audioContext.createMediaStreamDestination();
- self.audioSources.forEach(function (audioSource) {
- audioSource.connect(self.audioDestination);
- });
- return self.audioDestination.stream;
- }
-
- function getVideo(stream) {
- var video = document.createElement('video');
-
- setSrcObject(stream, video);
-
- video.className = elementClass;
-
- video.muted = true;
- video.volume = 0;
-
- video.width = stream.width || self.width || 360;
- video.height = stream.height || self.height || 240;
-
- video.play();
-
- return video;
- }
-
- this.appendStreams = function (streams) {
- if (!streams) {
- throw 'First parameter is required.';
- }
-
- if (!(streams instanceof Array)) {
- streams = [streams];
- }
-
- streams.forEach(function (stream) {
- var newStream = new MediaStream();
-
- if (stream.getTracks().filter(function (t) {
- return t.kind === 'video';
- }).length) {
- var video = getVideo(stream);
- video.stream = stream;
- videos.push(video);
-
- newStream.addTrack(stream.getTracks().filter(function (t) {
- return t.kind === 'video';
- })[0]);
- }
-
- if (stream.getTracks().filter(function (t) {
- return t.kind === 'audio';
- }).length) {
- var audioSource = self.audioContext.createMediaStreamSource(stream);
- self.audioDestination = self.audioContext.createMediaStreamDestination();
- audioSource.connect(self.audioDestination);
-
- newStream.addTrack(self.audioDestination.stream.getTracks().filter(function (t) {
- return t.kind === 'audio';
- })[0]);
- }
-
- arrayOfMediaStreams.push(newStream);
- });
- };
-
- this.releaseStreams = function () {
- videos = [];
- isStopDrawingFrames = true;
-
- if (self.gainNode) {
- self.gainNode.disconnect();
- self.gainNode = null;
- }
-
- if (self.audioSources.length) {
- self.audioSources.forEach(function (source) {
- source.disconnect();
- });
- self.audioSources = [];
- }
-
- if (self.audioDestination) {
- self.audioDestination.disconnect();
- self.audioDestination = null;
- }
-
- if (self.audioContext) {
- self.audioContext.close();
- }
-
- self.audioContext = null;
-
- context.clearRect(0, 0, canvas.width, canvas.height);
-
- if (canvas.stream) {
- canvas.stream.stop();
- canvas.stream = null;
- }
- };
-
- this.resetVideoStreams = function (streams) {
- if (streams && !(streams instanceof Array)) {
- streams = [streams];
- }
-
- resetVideoStreams(streams);
- };
-
- function resetVideoStreams(streams) {
- videos = [];
- streams = streams || arrayOfMediaStreams;
-
- // via: @adrian-ber
- streams.forEach(function (stream) {
- if (!stream.getTracks().filter(function (t) {
- return t.kind === 'video';
- }).length) {
- return;
- }
-
- var video = getVideo(stream);
- video.stream = stream;
- videos.push(video);
- });
- }
-
- // for debugging
- this.name = 'MultiStreamsMixer';
- this.toString = function () {
- return this.name;
- };
-
- this.getMixedStream = getMixedStream;
-
- }
-
- if (typeof RecordRTC === 'undefined') {
- {
- module.exports = MultiStreamsMixer;
- }
- }
-
- // ______________________
- // MultiStreamRecorder.js
-
- /*
- * Video conference recording, using captureStream API along with WebAudio and Canvas2D API.
- */
-
- /**
- * MultiStreamRecorder can record multiple videos in single container.
- * @summary Multi-videos recorder.
- * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT}
- * @author {@link https://MuazKhan.com|Muaz Khan}
- * @typedef MultiStreamRecorder
- * @class
- * @example
- * var options = {
- * mimeType: 'video/webm'
- * }
- * var recorder = new MultiStreamRecorder(ArrayOfMediaStreams, options);
- * recorder.record();
- * recorder.stop(function(blob) {
- * video.src = URL.createObjectURL(blob);
- *
- * // or
- * var blob = recorder.blob;
- * });
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- * @param {MediaStreams} mediaStreams - Array of MediaStreams.
- * @param {object} config - {disableLogs:true, frameInterval: 1, mimeType: "video/webm"}
- */
-
- function MultiStreamRecorder(arrayOfMediaStreams, options) {
- arrayOfMediaStreams = arrayOfMediaStreams || [];
- var self = this;
-
- var mixer;
- var mediaRecorder;
-
- options = options || {
- elementClass: 'multi-streams-mixer',
- mimeType: 'video/webm',
- video: {
- width: 360,
- height: 240
- }
- };
-
- if (!options.frameInterval) {
- options.frameInterval = 10;
- }
-
- if (!options.video) {
- options.video = {};
- }
-
- if (!options.video.width) {
- options.video.width = 360;
- }
-
- if (!options.video.height) {
- options.video.height = 240;
- }
-
- /**
- * This method records all MediaStreams.
- * @method
- * @memberof MultiStreamRecorder
- * @example
- * recorder.record();
- */
- this.record = function () {
- // github/muaz-khan/MultiStreamsMixer
- mixer = new MultiStreamsMixer(arrayOfMediaStreams, options.elementClass || 'multi-streams-mixer');
-
- if (getAllVideoTracks().length) {
- mixer.frameInterval = options.frameInterval || 10;
- mixer.width = options.video.width || 360;
- mixer.height = options.video.height || 240;
- mixer.startDrawingFrames();
- }
-
- if (options.previewStream && typeof options.previewStream === 'function') {
- options.previewStream(mixer.getMixedStream());
- }
-
- // record using MediaRecorder API
- mediaRecorder = new MediaStreamRecorder(mixer.getMixedStream(), options);
- mediaRecorder.record();
- };
-
- function getAllVideoTracks() {
- var tracks = [];
- arrayOfMediaStreams.forEach(function (stream) {
- getTracks(stream, 'video').forEach(function (track) {
- tracks.push(track);
- });
- });
- return tracks;
- }
-
- /**
- * This method stops recording MediaStream.
- * @param {function} callback - Callback function, that is used to pass recorded blob back to the callee.
- * @method
- * @memberof MultiStreamRecorder
- * @example
- * recorder.stop(function(blob) {
- * video.src = URL.createObjectURL(blob);
- * });
- */
- this.stop = function (callback) {
- if (!mediaRecorder) {
- return;
- }
-
- mediaRecorder.stop(function (blob) {
- self.blob = blob;
-
- callback(blob);
-
- self.clearRecordedData();
- });
- };
-
- /**
- * This method pauses the recording process.
- * @method
- * @memberof MultiStreamRecorder
- * @example
- * recorder.pause();
- */
- this.pause = function () {
- if (mediaRecorder) {
- mediaRecorder.pause();
- }
- };
-
- /**
- * This method resumes the recording process.
- * @method
- * @memberof MultiStreamRecorder
- * @example
- * recorder.resume();
- */
- this.resume = function () {
- if (mediaRecorder) {
- mediaRecorder.resume();
- }
- };
-
- /**
- * This method resets currently recorded data.
- * @method
- * @memberof MultiStreamRecorder
- * @example
- * recorder.clearRecordedData();
- */
- this.clearRecordedData = function () {
- if (mediaRecorder) {
- mediaRecorder.clearRecordedData();
- mediaRecorder = null;
- }
-
- if (mixer) {
- mixer.releaseStreams();
- mixer = null;
- }
- };
-
- /**
- * Add extra media-streams to existing recordings.
- * @method
- * @memberof MultiStreamRecorder
- * @param {MediaStreams} mediaStreams - Array of MediaStreams
- * @example
- * recorder.addStreams([newAudioStream, newVideoStream]);
- */
- this.addStreams = function (streams) {
- if (!streams) {
- throw 'First parameter is required.';
- }
-
- if (!(streams instanceof Array)) {
- streams = [streams];
- }
-
- arrayOfMediaStreams.concat(streams);
-
- if (!mediaRecorder || !mixer) {
- return;
- }
-
- mixer.appendStreams(streams);
-
- if (options.previewStream && typeof options.previewStream === 'function') {
- options.previewStream(mixer.getMixedStream());
- }
- };
-
- /**
- * Reset videos during live recording. Replace old videos e.g. replace cameras with full-screen.
- * @method
- * @memberof MultiStreamRecorder
- * @param {MediaStreams} mediaStreams - Array of MediaStreams
- * @example
- * recorder.resetVideoStreams([newVideo1, newVideo2]);
- */
- this.resetVideoStreams = function (streams) {
- if (!mixer) {
- return;
- }
-
- if (streams && !(streams instanceof Array)) {
- streams = [streams];
- }
-
- mixer.resetVideoStreams(streams);
- };
-
- /**
- * Returns MultiStreamsMixer
- * @method
- * @memberof MultiStreamRecorder
- * @example
- * let mixer = recorder.getMixer();
- * mixer.appendStreams([newStream]);
- */
- this.getMixer = function () {
- return mixer;
- };
-
- // for debugging
- this.name = 'MultiStreamRecorder';
- this.toString = function () {
- return this.name;
- };
- }
-
- if (typeof RecordRTC !== 'undefined') {
- RecordRTC.MultiStreamRecorder = MultiStreamRecorder;
- }
-
- // _____________________
- // RecordRTC.promises.js
-
- /**
- * RecordRTCPromisesHandler adds promises support in {@link RecordRTC}. Try a {@link https://github.com/muaz-khan/RecordRTC/blob/master/simple-demos/RecordRTCPromisesHandler.html|demo here}
- * @summary Promises for {@link RecordRTC}
- * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT}
- * @author {@link https://MuazKhan.com|Muaz Khan}
- * @typedef RecordRTCPromisesHandler
- * @class
- * @example
- * var recorder = new RecordRTCPromisesHandler(mediaStream, options);
- * recorder.startRecording()
- * .then(successCB)
- * .catch(errorCB);
- * // Note: You can access all RecordRTC API using "recorder.recordRTC" e.g.
- * recorder.recordRTC.onStateChanged = function(state) {};
- * recorder.recordRTC.setRecordingDuration(5000);
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- * @param {MediaStream} mediaStream - Single media-stream object, array of media-streams, html-canvas-element, etc.
- * @param {object} config - {type:"video", recorderType: MediaStreamRecorder, disableLogs: true, numberOfAudioChannels: 1, bufferSize: 0, sampleRate: 0, video: HTMLVideoElement, etc.}
- * @throws Will throw an error if "new" keyword is not used to initiate "RecordRTCPromisesHandler". Also throws error if first argument "MediaStream" is missing.
- * @requires {@link RecordRTC}
- */
-
- function RecordRTCPromisesHandler(mediaStream, options) {
- if (!this) {
- throw 'Use "new RecordRTCPromisesHandler()"';
- }
-
- if (typeof mediaStream === 'undefined') {
- throw 'First argument "MediaStream" is required.';
- }
-
- var self = this;
-
- /**
- * @property {Blob} blob - Access/reach the native {@link RecordRTC} object.
- * @memberof RecordRTCPromisesHandler
- * @example
- * let internal = recorder.recordRTC.getInternalRecorder();
- * alert(internal instanceof MediaStreamRecorder);
- * recorder.recordRTC.onStateChanged = function(state) {};
- */
- self.recordRTC = new RecordRTC(mediaStream, options);
-
- /**
- * This method records MediaStream.
- * @method
- * @memberof RecordRTCPromisesHandler
- * @example
- * recorder.startRecording()
- * .then(successCB)
- * .catch(errorCB);
- */
- this.startRecording = function () {
- return new Promise(function (resolve, reject) {
- try {
- self.recordRTC.startRecording();
- resolve();
- } catch (e) {
- reject(e);
- }
- });
- };
-
- /**
- * This method stops the recording.
- * @method
- * @memberof RecordRTCPromisesHandler
- * @example
- * recorder.stopRecording().then(function() {
- * var blob = recorder.getBlob();
- * }).catch(errorCB);
- */
- this.stopRecording = function () {
- return new Promise(function (resolve, reject) {
- try {
- self.recordRTC.stopRecording(function (url) {
- self.blob = self.recordRTC.getBlob();
-
- if (!self.blob || !self.blob.size) {
- reject('Empty blob.', self.blob);
- return;
- }
-
- resolve(url);
- });
- } catch (e) {
- reject(e);
- }
- });
- };
-
- /**
- * This method pauses the recording. You can resume recording using "resumeRecording" method.
- * @method
- * @memberof RecordRTCPromisesHandler
- * @example
- * recorder.pauseRecording()
- * .then(successCB)
- * .catch(errorCB);
- */
- this.pauseRecording = function () {
- return new Promise(function (resolve, reject) {
- try {
- self.recordRTC.pauseRecording();
- resolve();
- } catch (e) {
- reject(e);
- }
- });
- };
-
- /**
- * This method resumes the recording.
- * @method
- * @memberof RecordRTCPromisesHandler
- * @example
- * recorder.resumeRecording()
- * .then(successCB)
- * .catch(errorCB);
- */
- this.resumeRecording = function () {
- return new Promise(function (resolve, reject) {
- try {
- self.recordRTC.resumeRecording();
- resolve();
- } catch (e) {
- reject(e);
- }
- });
- };
-
- /**
- * This method returns data-url for the recorded blob.
- * @method
- * @memberof RecordRTCPromisesHandler
- * @example
- * recorder.stopRecording().then(function() {
- * recorder.getDataURL().then(function(dataURL) {
- * window.open(dataURL);
- * }).catch(errorCB);;
- * }).catch(errorCB);
- */
- this.getDataURL = function (callback) {
- return new Promise(function (resolve, reject) {
- try {
- self.recordRTC.getDataURL(function (dataURL) {
- resolve(dataURL);
- });
- } catch (e) {
- reject(e);
- }
- });
- };
-
- /**
- * This method returns the recorded blob.
- * @method
- * @memberof RecordRTCPromisesHandler
- * @example
- * recorder.stopRecording().then(function() {
- * recorder.getBlob().then(function(blob) {})
- * }).catch(errorCB);
- */
- this.getBlob = function () {
- return new Promise(function (resolve, reject) {
- try {
- resolve(self.recordRTC.getBlob());
- } catch (e) {
- reject(e);
- }
- });
- };
-
- /**
- * This method returns the internal recording object.
- * @method
- * @memberof RecordRTCPromisesHandler
- * @example
- * let internalRecorder = await recorder.getInternalRecorder();
- * if(internalRecorder instanceof MultiStreamRecorder) {
- * internalRecorder.addStreams([newAudioStream]);
- * internalRecorder.resetVideoStreams([screenStream]);
- * }
- * @returns {Object}
- */
- this.getInternalRecorder = function () {
- return new Promise(function (resolve, reject) {
- try {
- resolve(self.recordRTC.getInternalRecorder());
- } catch (e) {
- reject(e);
- }
- });
- };
-
- /**
- * This method resets the recorder. So that you can reuse single recorder instance many times.
- * @method
- * @memberof RecordRTCPromisesHandler
- * @example
- * await recorder.reset();
- * recorder.startRecording(); // record again
- */
- this.reset = function () {
- return new Promise(function (resolve, reject) {
- try {
- resolve(self.recordRTC.reset());
- } catch (e) {
- reject(e);
- }
- });
- };
-
- /**
- * Destroy RecordRTC instance. Clear all recorders and objects.
- * @method
- * @memberof RecordRTCPromisesHandler
- * @example
- * recorder.destroy().then(successCB).catch(errorCB);
- */
- this.destroy = function () {
- return new Promise(function (resolve, reject) {
- try {
- resolve(self.recordRTC.destroy());
- } catch (e) {
- reject(e);
- }
- });
- };
-
- /**
- * Get recorder's readonly state.
- * @method
- * @memberof RecordRTCPromisesHandler
- * @example
- * let state = await recorder.getState();
- * // or
- * recorder.getState().then(state => { console.log(state); })
- * @returns {String} Returns recording state.
- */
- this.getState = function () {
- return new Promise(function (resolve, reject) {
- try {
- resolve(self.recordRTC.getState());
- } catch (e) {
- reject(e);
- }
- });
- };
-
- /**
- * @property {Blob} blob - Recorded data as "Blob" object.
- * @memberof RecordRTCPromisesHandler
- * @example
- * await recorder.stopRecording();
- * let blob = recorder.getBlob(); // or "recorder.recordRTC.blob"
- * invokeSaveAsDialog(blob);
- */
- this.blob = null;
-
- /**
- * RecordRTC version number
- * @property {String} version - Release version number.
- * @memberof RecordRTCPromisesHandler
- * @static
- * @readonly
- * @example
- * alert(recorder.version);
- */
- this.version = '5.6.2';
- }
-
- if (typeof RecordRTC !== 'undefined') {
- RecordRTC.RecordRTCPromisesHandler = RecordRTCPromisesHandler;
- }
-
- // ______________________
- // WebAssemblyRecorder.js
-
- /**
- * WebAssemblyRecorder lets you create webm videos in JavaScript via WebAssembly. The library consumes raw RGBA32 buffers (4 bytes per pixel) and turns them into a webm video with the given framerate and quality. This makes it compatible out-of-the-box with ImageData from a CANVAS. With realtime mode you can also use webm-wasm for streaming webm videos.
- * @summary Video recording feature in Chrome, Firefox and maybe Edge.
- * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT}
- * @author {@link https://MuazKhan.com|Muaz Khan}
- * @typedef WebAssemblyRecorder
- * @class
- * @example
- * var recorder = new WebAssemblyRecorder(mediaStream);
- * recorder.record();
- * recorder.stop(function(blob) {
- * video.src = URL.createObjectURL(blob);
- * });
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- * @param {MediaStream} mediaStream - MediaStream object fetched using getUserMedia API or generated using captureStreamUntilEnded or WebAudio API.
- * @param {object} config - {webAssemblyPath:'webm-wasm.wasm',workerPath: 'webm-worker.js', frameRate: 30, width: 1920, height: 1080, bitrate: 1024, realtime: true}
- */
- function WebAssemblyRecorder(stream, config) {
- // based on: github.com/GoogleChromeLabs/webm-wasm
-
- if (typeof ReadableStream === 'undefined' || typeof WritableStream === 'undefined') {
- // because it fixes readable/writable streams issues
- console.error('Following polyfill is strongly recommended: https://unpkg.com/@mattiasbuelens/web-streams-polyfill/dist/polyfill.min.js');
- }
-
- config = config || {};
-
- config.width = config.width || 640;
- config.height = config.height || 480;
- config.frameRate = config.frameRate || 30;
- config.bitrate = config.bitrate || 1200;
- config.realtime = config.realtime || true;
-
- var finished;
-
- function cameraStream() {
- return new ReadableStream({
- start: function (controller) {
- var cvs = document.createElement('canvas');
- var video = document.createElement('video');
- var first = true;
- video.srcObject = stream;
- video.muted = true;
- video.height = config.height;
- video.width = config.width;
- video.volume = 0;
- video.onplaying = function () {
- cvs.width = config.width;
- cvs.height = config.height;
- var ctx = cvs.getContext('2d');
- var frameTimeout = 1000 / config.frameRate;
- var cameraTimer = setInterval(function f() {
- if (finished) {
- clearInterval(cameraTimer);
- controller.close();
- }
-
- if (first) {
- first = false;
- if (config.onVideoProcessStarted) {
- config.onVideoProcessStarted();
- }
- }
-
- ctx.drawImage(video, 0, 0);
- if (controller._controlledReadableStream.state !== 'closed') {
- try {
- controller.enqueue(
- ctx.getImageData(0, 0, config.width, config.height)
- );
- } catch (e) { }
- }
- }, frameTimeout);
- };
- video.play();
- }
- });
- }
-
- var worker;
-
- function startRecording(stream, buffer) {
- if (!config.workerPath && !buffer) {
- finished = false;
-
- // is it safe to use @latest ?
-
- fetch(
- 'https://unpkg.com/webm-wasm@latest/dist/webm-worker.js'
- ).then(function (r) {
- r.arrayBuffer().then(function (buffer) {
- startRecording(stream, buffer);
- });
- });
- return;
- }
-
- if (!config.workerPath && buffer instanceof ArrayBuffer) {
- var blob = new Blob([buffer], {
- type: 'text/javascript'
- });
- config.workerPath = URL.createObjectURL(blob);
- }
-
- if (!config.workerPath) {
- console.error('workerPath parameter is missing.');
- }
-
- worker = new Worker(config.workerPath);
-
- worker.postMessage(config.webAssemblyPath || 'https://unpkg.com/webm-wasm@latest/dist/webm-wasm.wasm');
- worker.addEventListener('message', function (event) {
- if (event.data === 'READY') {
- worker.postMessage({
- width: config.width,
- height: config.height,
- bitrate: config.bitrate || 1200,
- timebaseDen: config.frameRate || 30,
- realtime: config.realtime
- });
-
- cameraStream().pipeTo(new WritableStream({
- write: function (image) {
- if (finished) {
- console.error('Got image, but recorder is finished!');
- return;
- }
-
- worker.postMessage(image.data.buffer, [image.data.buffer]);
- }
- }));
- } else if (!!event.data) {
- if (!isPaused) {
- arrayOfBuffers.push(event.data);
- }
- }
- });
- }
-
- /**
- * This method records video.
- * @method
- * @memberof WebAssemblyRecorder
- * @example
- * recorder.record();
- */
- this.record = function () {
- arrayOfBuffers = [];
- isPaused = false;
- this.blob = null;
- startRecording(stream);
-
- if (typeof config.initCallback === 'function') {
- config.initCallback();
- }
- };
-
- var isPaused;
-
- /**
- * This method pauses the recording process.
- * @method
- * @memberof WebAssemblyRecorder
- * @example
- * recorder.pause();
- */
- this.pause = function () {
- isPaused = true;
- };
-
- /**
- * This method resumes the recording process.
- * @method
- * @memberof WebAssemblyRecorder
- * @example
- * recorder.resume();
- */
- this.resume = function () {
- isPaused = false;
- };
-
- function terminate(callback) {
- if (!worker) {
- if (callback) {
- callback();
- }
-
- return;
- }
-
- // Wait for null event data to indicate that the encoding is complete
- worker.addEventListener('message', function (event) {
- if (event.data === null) {
- worker.terminate();
- worker = null;
-
- if (callback) {
- callback();
- }
- }
- });
-
- worker.postMessage(null);
- }
-
- var arrayOfBuffers = [];
-
- /**
- * This method stops recording video.
- * @param {function} callback - Callback function, that is used to pass recorded blob back to the callee.
- * @method
- * @memberof WebAssemblyRecorder
- * @example
- * recorder.stop(function(blob) {
- * video.src = URL.createObjectURL(blob);
- * });
- */
- this.stop = function (callback) {
- finished = true;
-
- var recorder = this;
-
- terminate(function () {
- recorder.blob = new Blob(arrayOfBuffers, {
- type: 'video/webm'
- });
-
- callback(recorder.blob);
- });
- };
-
- // for debugging
- this.name = 'WebAssemblyRecorder';
- this.toString = function () {
- return this.name;
- };
-
- /**
- * This method resets currently recorded data.
- * @method
- * @memberof WebAssemblyRecorder
- * @example
- * recorder.clearRecordedData();
- */
- this.clearRecordedData = function () {
- arrayOfBuffers = [];
- isPaused = false;
- this.blob = null;
-
- // todo: if recording-ON then STOP it first
- };
-
- /**
- * @property {Blob} blob - The recorded blob object.
- * @memberof WebAssemblyRecorder
- * @example
- * recorder.stop(function(){
- * var blob = recorder.blob;
- * });
- */
- this.blob = null;
- }
-
- if (typeof RecordRTC !== 'undefined') {
- RecordRTC.WebAssemblyRecorder = WebAssemblyRecorder;
- }
- });
-
- class RecordRTCLoader extends Emitter {
- constructor(player) {
- super();
- this.player = player;
- this.fileName = '';
- this.fileType = player._opt.recordType || FILE_SUFFIX.webm;
- this.isRecording = false;
- this.recordingTimestamp = 0;
- this.recordingInterval = null;
- player.debug.log('Recorder', 'init');
- }
-
- destroy() {
- this._reset();
-
- this.player.debug.log('Recorder', 'destroy');
- }
-
- setFileName(fileName, fileType) {
- this.fileName = fileName;
-
- if (FILE_SUFFIX.mp4 === fileType || FILE_SUFFIX.webm === fileType) {
- this.fileType = fileType;
- }
- }
-
- get recording() {
- return this.isRecording;
- }
-
- get recordTime() {
- return this.recordingTimestamp;
- }
-
- startRecord() {
- const debug = this.player.debug;
- const options = {
- type: 'video',
- mimeType: 'video/webm;codecs=h264',
- onTimeStamp: timestamp => {
- debug.log('Recorder', 'record timestamp :' + timestamp);
- },
- disableLogs: !this.player._opt.debug
- };
-
- try {
- const stream = this.player.video.$videoElement.captureStream(25);
-
- if (this.player.audio && this.player.audio.mediaStreamAudioDestinationNode && this.player.audio.mediaStreamAudioDestinationNode.stream && !this.player.audio.isStateSuspended() && this.player.audio.hasAudio && this.player._opt.hasAudio) {
- const audioStream = this.player.audio.mediaStreamAudioDestinationNode.stream;
-
- if (audioStream.getAudioTracks().length > 0) {
- const audioTrack = audioStream.getAudioTracks()[0];
-
- if (audioTrack && audioTrack.enabled) {
- stream.addTrack(audioTrack);
- }
- }
- }
-
- this.recorder = RecordRTC_1(stream, options);
- } catch (e) {
- debug.error('Recorder', 'startRecord error', e);
- this.emit(EVENTS.recordCreateError);
- }
-
- if (this.recorder) {
- this.isRecording = true;
- this.player.emit(EVENTS.recording, true);
- this.recorder.startRecording();
- debug.log('Recorder', 'start recording');
- this.player.emit(EVENTS.recordStart);
- this.recordingInterval = window.setInterval(() => {
- this.recordingTimestamp += 1;
- this.player.emit(EVENTS.recordingTimestamp, this.recordingTimestamp);
- }, 1000);
- }
- }
-
- stopRecordAndSave() {
- if (!this.recorder || !this.isRecording) {
- return;
- }
-
- this.recorder.stopRecording(() => {
- this.player.debug.log('Recorder', 'stop recording');
- this.player.emit(EVENTS.recordEnd);
- const fileName = (this.fileName || now()) + '.' + (this.fileType || FILE_SUFFIX.webm);
- saveAs(this.recorder.getBlob(), fileName);
-
- this._reset();
-
- this.player.emit(EVENTS.recording, false);
- });
- }
-
- _reset() {
- this.isRecording = false;
- this.recordingTimestamp = 0;
-
- if (this.recorder) {
- this.recorder.destroy();
- this.recorder = null;
- }
-
- this.fileName = null;
-
- if (this.recordingInterval) {
- clearInterval(this.recordingInterval);
- }
-
- this.recordingInterval = null;
- }
-
- }
-
- class Recorder {
- constructor(player) {
- const Loader = Recorder.getLoaderFactory();
- return new Loader(player);
- }
-
- static getLoaderFactory() {
- return RecordRTCLoader;
- }
-
- }
-
- class DecoderWorker {
- constructor(player) {
- this.player = player;
- this.decoderWorker = new Worker(player._opt.decoder);
-
- this._initDecoderWorker();
-
- player.debug.log('decoderWorker', 'init');
- }
-
- destroy() {
- this.decoderWorker.postMessage({
- cmd: WORKER_SEND_TYPE.close
- });
- this.decoderWorker.terminate();
- this.decoderWorker = null;
- this.player.debug.log(`decoderWorker`, 'destroy');
- }
-
- _initDecoderWorker() {
- const {
- debug,
- events: {
- proxy
- }
- } = this.player;
-
- this.decoderWorker.onmessage = event => {
- const msg = event.data;
-
- switch (msg.cmd) {
- case WORKER_CMD_TYPE.init:
- debug.log(`decoderWorker`, 'onmessage:', WORKER_CMD_TYPE.init);
-
- if (!this.player.loaded) {
- this.player.emit(EVENTS.load);
- }
-
- this.player.emit(EVENTS.decoderWorkerInit);
-
- this._initWork();
-
- break;
-
- case WORKER_CMD_TYPE.videoCode:
- debug.log(`decoderWorker`, 'onmessage:', WORKER_CMD_TYPE.videoCode, msg.code);
-
- if (!this.player._times.decodeStart) {
- this.player._times.decodeStart = now();
- }
-
- this.player.video.updateVideoInfo({
- encTypeCode: msg.code
- });
- break;
-
- case WORKER_CMD_TYPE.audioCode:
- debug.log(`decoderWorker`, 'onmessage:', WORKER_CMD_TYPE.audioCode, msg.code);
- this.player.audio && this.player.audio.updateAudioInfo({
- encTypeCode: msg.code
- });
- break;
-
- case WORKER_CMD_TYPE.initVideo:
- debug.log(`decoderWorker`, 'onmessage:', WORKER_CMD_TYPE.initVideo, `width:${msg.w},height:${msg.h}`);
- this.player.video.updateVideoInfo({
- width: msg.w,
- height: msg.h
- });
-
- if (!this.player._opt.openWebglAlignment && !isWebglRenderSupport(msg.w)) {
- this.player.emit(EVENTS_ERROR.webglAlignmentError);
- return;
- }
-
- this.player.video.initCanvasViewSize();
- break;
-
- case WORKER_CMD_TYPE.initAudio:
- debug.log(`decoderWorker`, 'onmessage:', WORKER_CMD_TYPE.initAudio, `channels:${msg.channels},sampleRate:${msg.sampleRate}`);
-
- if (this.player.audio) {
- this.player.audio.updateAudioInfo(msg);
- this.player.audio.initScriptNode(msg);
- }
-
- break;
-
- case WORKER_CMD_TYPE.render:
- // debug.log(`decoderWorker`, 'onmessage:', WORKER_CMD_TYPE.render, `msg ts:${msg.ts}`);
- this.player.handleRender();
- this.player.video.render(msg);
- this.player.emit(EVENTS.timeUpdate, msg.ts);
- this.player.updateStats({
- fps: true,
- ts: msg.ts,
- buf: msg.delay
- });
-
- if (!this.player._times.videoStart) {
- this.player._times.videoStart = now();
- this.player.handlePlayToRenderTimes();
- }
-
- break;
-
- case WORKER_CMD_TYPE.playAudio:
- // debug.log(`decoderWorker`, 'onmessage:', WORKER_CMD_TYPE.playAudio, `msg ts:${msg.ts}`);
- // 只有在 playing 的时候。
- if (this.player.playing && this.player.audio) {
- this.player.audio.play(msg.buffer, msg.ts);
- }
-
- break;
-
- case WORKER_CMD_TYPE.wasmError:
- if (msg.message) {
- if (msg.message.indexOf(WASM_ERROR.invalidNalUnitSize) !== -1) {
- this.player.emitError(EVENTS_ERROR.wasmDecodeError);
- }
- }
-
- break;
-
- default:
- this.player[msg.cmd] && this.player[msg.cmd](msg);
- }
- };
- }
-
- _initWork() {
- const opt = {
- debug: this.player._opt.debug,
- useOffscreen: this.player._opt.useOffscreen,
- useWCS: this.player._opt.useWCS,
- videoBuffer: this.player._opt.videoBuffer,
- videoBufferDelay: this.player._opt.videoBufferDelay,
- openWebglAlignment: this.player._opt.openWebglAlignment
- };
- this.decoderWorker.postMessage({
- cmd: WORKER_SEND_TYPE.init,
- opt: JSON.stringify(opt),
- sampleRate: this.player.audio && this.player.audio.audioContext.sampleRate || 0
- });
- }
-
- decodeVideo(arrayBuffer, ts, isIFrame) {
- const options = {
- type: MEDIA_TYPE.video,
- ts: Math.max(ts, 0),
- isIFrame
- }; // this.player.debug.log('decoderWorker', 'decodeVideo', options);
-
- this.decoderWorker.postMessage({
- cmd: WORKER_SEND_TYPE.decode,
- buffer: arrayBuffer,
- options
- }, [arrayBuffer.buffer]);
- }
-
- decodeAudio(arrayBuffer, ts) {
- if (this.player._opt.useWCS) {
- this._decodeAudioNoDelay(arrayBuffer, ts);
- } else if (this.player._opt.useMSE) {
- this._decodeAudioNoDelay(arrayBuffer, ts);
- } else {
- this._decodeAudio(arrayBuffer, ts);
- }
- } //
-
-
- _decodeAudio(arrayBuffer, ts) {
- const options = {
- type: MEDIA_TYPE.audio,
- ts: Math.max(ts, 0)
- }; // this.player.debug.log('decoderWorker', 'decodeAudio',options);
-
- this.decoderWorker.postMessage({
- cmd: WORKER_SEND_TYPE.decode,
- buffer: arrayBuffer,
- options
- }, [arrayBuffer.buffer]);
- }
-
- _decodeAudioNoDelay(arrayBuffer, ts) {
- // console.log('_decodeAudioNoDelay', arrayBuffer);
- this.decoderWorker.postMessage({
- cmd: WORKER_SEND_TYPE.audioDecode,
- buffer: arrayBuffer,
- ts: Math.max(ts, 0)
- }, [arrayBuffer.buffer]);
- }
-
- updateWorkConfig(config) {
- this.decoderWorker.postMessage({
- cmd: WORKER_SEND_TYPE.updateConfig,
- key: config.key,
- value: config.value
- });
- }
-
- }
-
- class CommonLoader extends Emitter {
- constructor(player) {
- super();
- this.player = player;
- this.stopId = null;
- this.firstTimestamp = null;
- this.startTimestamp = null;
- this.delay = -1;
- this.bufferList = [];
- this.dropping = false;
- this.initInterval();
- }
-
- destroy() {
- if (this.stopId) {
- clearInterval(this.stopId);
- this.stopId = null;
- }
-
- this.firstTimestamp = null;
- this.startTimestamp = null;
- this.delay = -1;
- this.bufferList = [];
- this.dropping = false;
- this.off();
- this.player.debug.log('CommonDemux', 'destroy');
- }
-
- getDelay(timestamp) {
- if (!timestamp) {
- return -1;
- }
-
- if (!this.firstTimestamp) {
- this.firstTimestamp = timestamp;
- this.startTimestamp = Date.now();
- this.delay = -1;
- } else {
- if (timestamp) {
- const localTimestamp = Date.now() - this.startTimestamp;
- const timeTimestamp = timestamp - this.firstTimestamp;
-
- if (localTimestamp >= timeTimestamp) {
- this.delay = localTimestamp - timeTimestamp;
- } else {
- this.delay = timeTimestamp - localTimestamp;
- }
- }
- }
-
- return this.delay;
- }
-
- resetDelay() {
- this.firstTimestamp = null;
- this.startTimestamp = null;
- this.delay = -1;
- this.dropping = false;
- } //
-
-
- initInterval() {
- this.player.debug.log('common dumex', `init Interval`);
-
- let _loop = () => {
- let data;
- const videoBuffer = this.player._opt.videoBuffer;
- const videoBufferDelay = this.player._opt.videoBufferDelay;
-
- if (this.player._opt.useMSE && this.player.mseDecoder && this.player.mseDecoder.getSourceBufferUpdating()) {
- this.player.debug.warn('CommonDemux', `_loop getSourceBufferUpdating is true and bufferList length is ${this.bufferList.length}`);
- return;
- }
-
- if (this.bufferList.length) {
- if (this.dropping) {
- // this.player.debug.log('common dumex', `is dropping`);
- data = this.bufferList.shift();
-
- if (data.type === MEDIA_TYPE.audio && data.payload[1] === 0) {
- this._doDecoderDecode(data);
- }
-
- while (!data.isIFrame && this.bufferList.length) {
- data = this.bufferList.shift();
-
- if (data.type === MEDIA_TYPE.audio && data.payload[1] === 0) {
- this._doDecoderDecode(data);
- }
- } // i frame
-
-
- if (data.isIFrame && this.getDelay(data.ts) <= Math.min(videoBuffer, 200)) {
- this.dropping = false;
-
- this._doDecoderDecode(data);
- }
- } else {
- data = this.bufferList[0];
-
- if (this.getDelay(data.ts) === -1) {
- // this.player.debug.log('common dumex', `delay is -1`);
- this.bufferList.shift();
-
- this._doDecoderDecode(data);
- } else if (this.delay > videoBuffer + videoBufferDelay) {
- // this.player.debug.log('common dumex', `delay is ${this.delay}, set dropping is true`);
- this.resetDelay();
- this.dropping = true;
- } else {
- data = this.bufferList[0];
-
- if (this.getDelay(data.ts) > videoBuffer) {
- // drop frame
- this.bufferList.shift();
-
- this._doDecoderDecode(data);
- }
- }
- }
- }
- };
-
- _loop();
-
- this.stopId = setInterval(_loop, 10);
- }
-
- _doDecode(payload, type, ts, isIFrame, cts) {
- const player = this.player;
- let options = {
- ts: ts,
- cts: cts,
- type: type,
- isIFrame: false
- }; // use offscreen
-
- if (player._opt.useWCS && !player._opt.useOffscreen) {
- if (type === MEDIA_TYPE.video) {
- options.isIFrame = isIFrame;
- }
-
- this.pushBuffer(payload, options);
- } else if (player._opt.useMSE) {
- // use mse
- if (type === MEDIA_TYPE.video) {
- options.isIFrame = isIFrame;
- }
-
- this.pushBuffer(payload, options);
- } else {
- //
- if (type === MEDIA_TYPE.video) {
- player.decoderWorker && player.decoderWorker.decodeVideo(payload, ts, isIFrame);
- } else if (type === MEDIA_TYPE.audio) {
- if (player._opt.hasAudio) {
- player.decoderWorker && player.decoderWorker.decodeAudio(payload, ts);
- }
- }
- }
- }
-
- _doDecoderDecode(data) {
- const player = this.player;
- const {
- webcodecsDecoder,
- mseDecoder
- } = player;
-
- if (data.type === MEDIA_TYPE.audio) {
- if (player._opt.hasAudio) {
- player.decoderWorker && player.decoderWorker.decodeAudio(data.payload, data.ts);
- }
- } else if (data.type === MEDIA_TYPE.video) {
- if (player._opt.useWCS && !player._opt.useOffscreen) {
- webcodecsDecoder.decodeVideo(data.payload, data.ts, data.isIFrame);
- } else if (player._opt.useMSE) {
- mseDecoder.decodeVideo(data.payload, data.ts, data.isIFrame, data.cts);
- }
- }
- }
-
- pushBuffer(payload, options) {
- // 音频
- if (options.type === MEDIA_TYPE.audio) {
- this.bufferList.push({
- ts: options.ts,
- payload: payload,
- type: MEDIA_TYPE.audio
- });
- } else if (options.type === MEDIA_TYPE.video) {
- this.bufferList.push({
- ts: options.ts,
- cts: options.cts,
- payload: payload,
- type: MEDIA_TYPE.video,
- isIFrame: options.isIFrame
- });
- }
- }
-
- close() { }
-
- }
-
- class FlvLoader extends CommonLoader {
- constructor(player) {
- super(player);
- this.input = this._inputFlv();
- this.flvDemux = this.dispatchFlvData(this.input);
- player.debug.log('FlvDemux', 'init');
- }
-
- destroy() {
- super.destroy();
- this.input = null;
- this.flvDemux = null;
- this.player.debug.log('FlvDemux', 'destroy');
- }
-
- dispatch(data) {
- this.flvDemux(data);
- }
-
- *_inputFlv() {
- yield 9;
- const tmp = new ArrayBuffer(4);
- const tmp8 = new Uint8Array(tmp);
- const tmp32 = new Uint32Array(tmp);
- const player = this.player;
-
- while (true) {
- tmp8[3] = 0;
- const t = yield 15;
- const type = t[4];
- tmp8[0] = t[7];
- tmp8[1] = t[6];
- tmp8[2] = t[5];
- const length = tmp32[0];
- tmp8[0] = t[10];
- tmp8[1] = t[9];
- tmp8[2] = t[8];
- let ts = tmp32[0];
-
- if (ts === 0xFFFFFF) {
- tmp8[3] = t[11];
- ts = tmp32[0];
- }
-
- const payload = yield length;
-
- switch (type) {
- case FLV_MEDIA_TYPE.audio:
- if (player._opt.hasAudio) {
- player.updateStats({
- abps: payload.byteLength
- });
-
- if (payload.byteLength > 0) {
- this._doDecode(payload, MEDIA_TYPE.audio, ts);
- }
- }
-
- break;
-
- case FLV_MEDIA_TYPE.video:
- if (!player._times.demuxStart) {
- player._times.demuxStart = now();
- }
-
- if (player._opt.hasVideo) {
- player.updateStats({
- vbps: payload.byteLength
- });
- const isIFrame = payload[0] >> 4 === 1;
-
- if (payload.byteLength > 0) {
- tmp32[0] = payload[4];
- tmp32[1] = payload[3];
- tmp32[2] = payload[2];
- tmp32[3] = 0;
- let cts = tmp32[0];
-
- this._doDecode(payload, MEDIA_TYPE.video, ts, isIFrame, cts);
- }
- }
-
- break;
- }
- }
- }
-
- dispatchFlvData(input) {
- let need = input.next();
- let buffer = null;
- return value => {
- let data = new Uint8Array(value);
-
- if (buffer) {
- let combine = new Uint8Array(buffer.length + data.length);
- combine.set(buffer);
- combine.set(data, buffer.length);
- data = combine;
- buffer = null;
- }
-
- while (data.length >= need.value) {
- let remain = data.slice(need.value);
- need = input.next(data.slice(0, need.value));
- data = remain;
- }
-
- if (data.length > 0) {
- buffer = data;
- }
- };
- }
-
- close() {
- this.input && this.input.return(null);
- }
-
- }
-
- class M7sLoader extends CommonLoader {
- constructor(player) {
- super(player);
- player.debug.log('M7sDemux', 'init');
- }
-
- destroy() {
- super.destroy();
- this.player.debug.log('M7sDemux', 'destroy');
- this.player = null;
- }
-
- dispatch(data) {
- const player = this.player;
- const dv = new DataView(data);
- const type = dv.getUint8(0);
- const ts = dv.getUint32(1, false);
-
- switch (type) {
- case MEDIA_TYPE.audio:
- if (player._opt.hasAudio) {
- const payload = new Uint8Array(data, 5);
- player.updateStats({
- abps: payload.byteLength
- });
-
- if (payload.byteLength > 0) {
- this._doDecode(payload, type, ts);
- }
- }
-
- break;
-
- case MEDIA_TYPE.video:
- if (player._opt.hasVideo) {
- if (!player._times.demuxStart) {
- player._times.demuxStart = now();
- }
-
- if (dv.byteLength > 5) {
- const payload = new Uint8Array(data, 5);
- const isIframe = dv.getUint8(5) >> 4 === 1;
- player.updateStats({
- vbps: payload.byteLength
- });
-
- if (payload.byteLength > 0) {
- this._doDecode(payload, type, ts, isIframe);
- }
- } else {
- this.player.debug.warn('M7sDemux', 'dispatch', 'dv byteLength is', dv.byteLength);
- }
- }
-
- break;
- }
- }
-
- }
-
- class Demux {
- constructor(player) {
- const Loader = Demux.getLoaderFactory(player._opt.demuxType);
- return new Loader(player);
- }
-
- static getLoaderFactory(type) {
- if (type === DEMUX_TYPE.m7s) {
- return M7sLoader;
- } else if (type === DEMUX_TYPE.flv) {
- return FlvLoader;
- }
- }
-
- }
-
- /*
- * Copyright (C) 2016 Bilibili. All Rights Reserved.
- *
- * @author zheng qian "recorder.getBlob()"
method. Usage of "getBlob" is recommended, though.
- * @property {Blob} blob - Recorded Blob can be accessed using this property.
- * @memberof RecordRTC
- * @instance
- * @readonly
- * @example
- * recorder.stopRecording(function() {
- * var blob = this.blob;
- *
- * // below one is recommended
- * var blob = this.getBlob();
- * });
- */
- blob: null,
-
- /**
- * This works only with {recorderType:StereoAudioRecorder}. Use this property on "stopRecording" to verify the encoder's sample-rates.
- * @property {number} bufferSize - Buffer-size used to encode the WAV container
- * @memberof RecordRTC
- * @instance
- * @readonly
- * @example
- * recorder.stopRecording(function() {
- * alert('Recorder used this buffer-size: ' + this.bufferSize);
- * });
- */
- bufferSize: 0,
-
- /**
- * This works only with {recorderType:StereoAudioRecorder}. Use this property on "stopRecording" to verify the encoder's sample-rates.
- * @property {number} sampleRate - Sample-rates used to encode the WAV container
- * @memberof RecordRTC
- * @instance
- * @readonly
- * @example
- * recorder.stopRecording(function() {
- * alert('Recorder used these sample-rates: ' + this.sampleRate);
- * });
- */
- sampleRate: 0,
-
- /**
- * {recorderType:StereoAudioRecorder} returns ArrayBuffer object.
- * @property {ArrayBuffer} buffer - Audio ArrayBuffer, supported only in Chrome.
- * @memberof RecordRTC
- * @instance
- * @readonly
- * @example
- * recorder.stopRecording(function() {
- * var arrayBuffer = this.buffer;
- * alert(arrayBuffer.byteLength);
- * });
- */
- buffer: null,
-
- /**
- * This method resets the recorder. So that you can reuse single recorder instance many times.
- * @method
- * @memberof RecordRTC
- * @instance
- * @example
- * recorder.reset();
- * recorder.startRecording();
- */
- reset: function () {
- if (self.state === 'recording' && !config.disableLogs) {
- console.warn('Stop an active recorder.');
- }
-
- if (mediaRecorder && typeof mediaRecorder.clearRecordedData === 'function') {
- mediaRecorder.clearRecordedData();
- }
- mediaRecorder = null;
- setState('inactive');
- self.blob = null;
- },
-
- /**
- * This method is called whenever recorder's state changes. Use this as an "event".
- * @property {String} state - A recorder's state can be: recording, paused, stopped or inactive.
- * @method
- * @memberof RecordRTC
- * @instance
- * @example
- * recorder.onStateChanged = function(state) {
- * console.log('Recorder state: ', state);
- * };
- */
- onStateChanged: function (state) {
- if (!config.disableLogs) {
- console.log('Recorder state changed:', state);
- }
- },
-
- /**
- * A recorder can have inactive, recording, paused or stopped states.
- * @property {String} state - A recorder's state can be: recording, paused, stopped or inactive.
- * @memberof RecordRTC
- * @static
- * @readonly
- * @example
- * // this looper function will keep you updated about the recorder's states.
- * (function looper() {
- * document.querySelector('h1').innerHTML = 'Recorder\'s state is: ' + recorder.state;
- * if(recorder.state === 'stopped') return; // ignore+stop
- * setTimeout(looper, 1000); // update after every 3-seconds
- * })();
- * recorder.startRecording();
- */
- state: 'inactive',
-
- /**
- * Get recorder's readonly state.
- * @method
- * @memberof RecordRTC
- * @example
- * var state = recorder.getState();
- * @returns {String} Returns recording state.
- */
- getState: function () {
- return self.state;
- },
-
- /**
- * Destroy RecordRTC instance. Clear all recorders and objects.
- * @method
- * @memberof RecordRTC
- * @example
- * recorder.destroy();
- */
- destroy: function () {
- var disableLogsCache = config.disableLogs;
-
- config = {
- disableLogs: true
- };
- self.reset();
- setState('destroyed');
- returnObject = self = null;
-
- if (Storage.AudioContextConstructor) {
- Storage.AudioContextConstructor.close();
- Storage.AudioContextConstructor = null;
- }
-
- config.disableLogs = disableLogsCache;
-
- if (!config.disableLogs) {
- console.log('RecordRTC is destroyed.');
- }
- },
-
- /**
- * RecordRTC version number
- * @property {String} version - Release version number.
- * @memberof RecordRTC
- * @static
- * @readonly
- * @example
- * alert(recorder.version);
- */
- version: '5.6.2'
- };
-
- if (!this) {
- self = returnObject;
- return returnObject;
- }
-
- // if someone wants to use RecordRTC with the "new" keyword.
- for (var prop in returnObject) {
- this[prop] = returnObject[prop];
- }
-
- self = this;
-
- return returnObject;
- }
-
- RecordRTC.version = '5.6.2';
-
- {
- module.exports = RecordRTC;
- }
-
- RecordRTC.getFromDisk = function (type, callback) {
- if (!callback) {
- throw 'callback is mandatory.';
- }
-
- console.log('Getting recorded ' + (type === 'all' ? 'blobs' : type + ' blob ') + ' from disk!');
- DiskStorage.Fetch(function (dataURL, _type) {
- if (type !== 'all' && _type === type + 'Blob' && callback) {
- callback(dataURL);
- }
-
- if (type === 'all' && callback) {
- callback(dataURL, _type.replace('Blob', ''));
- }
- });
- };
-
- /**
- * This method can be used to store recorded blobs into IndexedDB storage.
- * @param {object} options - {audio: Blob, video: Blob, gif: Blob}
- * @method
- * @memberof RecordRTC
- * @example
- * RecordRTC.writeToDisk({
- * audio: audioBlob,
- * video: videoBlob,
- * gif : gifBlob
- * });
- */
- RecordRTC.writeToDisk = function (options) {
- console.log('Writing recorded blob(s) to disk!');
- options = options || {};
- if (options.audio && options.video && options.gif) {
- options.audio.getDataURL(function (audioDataURL) {
- options.video.getDataURL(function (videoDataURL) {
- options.gif.getDataURL(function (gifDataURL) {
- DiskStorage.Store({
- audioBlob: audioDataURL,
- videoBlob: videoDataURL,
- gifBlob: gifDataURL
- });
- });
- });
- });
- } else if (options.audio && options.video) {
- options.audio.getDataURL(function (audioDataURL) {
- options.video.getDataURL(function (videoDataURL) {
- DiskStorage.Store({
- audioBlob: audioDataURL,
- videoBlob: videoDataURL
- });
- });
- });
- } else if (options.audio && options.gif) {
- options.audio.getDataURL(function (audioDataURL) {
- options.gif.getDataURL(function (gifDataURL) {
- DiskStorage.Store({
- audioBlob: audioDataURL,
- gifBlob: gifDataURL
- });
- });
- });
- } else if (options.video && options.gif) {
- options.video.getDataURL(function (videoDataURL) {
- options.gif.getDataURL(function (gifDataURL) {
- DiskStorage.Store({
- videoBlob: videoDataURL,
- gifBlob: gifDataURL
- });
- });
- });
- } else if (options.audio) {
- options.audio.getDataURL(function (audioDataURL) {
- DiskStorage.Store({
- audioBlob: audioDataURL
- });
- });
- } else if (options.video) {
- options.video.getDataURL(function (videoDataURL) {
- DiskStorage.Store({
- videoBlob: videoDataURL
- });
- });
- } else if (options.gif) {
- options.gif.getDataURL(function (gifDataURL) {
- DiskStorage.Store({
- gifBlob: gifDataURL
- });
- });
- }
- };
-
- // __________________________
- // RecordRTC-Configuration.js
-
- /**
- * {@link RecordRTCConfiguration} is an inner/private helper for {@link RecordRTC}.
- * @summary It configures the 2nd parameter passed over {@link RecordRTC} and returns a valid "config" object.
- * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT}
- * @author {@link https://MuazKhan.com|Muaz Khan}
- * @typedef RecordRTCConfiguration
- * @class
- * @example
- * var options = RecordRTCConfiguration(mediaStream, options);
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- * @param {MediaStream} mediaStream - MediaStream object fetched using getUserMedia API or generated using captureStreamUntilEnded or WebAudio API.
- * @param {object} config - {type:"video", disableLogs: true, numberOfAudioChannels: 1, bufferSize: 0, sampleRate: 0, video: HTMLVideoElement, getNativeBlob:true, etc.}
- */
-
- function RecordRTCConfiguration(mediaStream, config) {
- if (!config.recorderType && !config.type) {
- if (!!config.audio && !!config.video) {
- config.type = 'video';
- } else if (!!config.audio && !config.video) {
- config.type = 'audio';
- }
- }
-
- if (config.recorderType && !config.type) {
- if (config.recorderType === WhammyRecorder || config.recorderType === CanvasRecorder || (typeof WebAssemblyRecorder !== 'undefined' && config.recorderType === WebAssemblyRecorder)) {
- config.type = 'video';
- } else if (config.recorderType === GifRecorder) {
- config.type = 'gif';
- } else if (config.recorderType === StereoAudioRecorder) {
- config.type = 'audio';
- } else if (config.recorderType === MediaStreamRecorder) {
- if (getTracks(mediaStream, 'audio').length && getTracks(mediaStream, 'video').length) {
- config.type = 'video';
- } else if (!getTracks(mediaStream, 'audio').length && getTracks(mediaStream, 'video').length) {
- config.type = 'video';
- } else if (getTracks(mediaStream, 'audio').length && !getTracks(mediaStream, 'video').length) {
- config.type = 'audio';
- } else;
- }
- }
-
- if (typeof MediaStreamRecorder !== 'undefined' && typeof MediaRecorder !== 'undefined' && 'requestData' in MediaRecorder.prototype) {
- if (!config.mimeType) {
- config.mimeType = 'video/webm';
- }
-
- if (!config.type) {
- config.type = config.mimeType.split('/')[0];
- }
-
- if (!config.bitsPerSecond);
- }
-
- // consider default type=audio
- if (!config.type) {
- if (config.mimeType) {
- config.type = config.mimeType.split('/')[0];
- }
- if (!config.type) {
- config.type = 'audio';
- }
- }
-
- return config;
- }
-
- // __________________
- // GetRecorderType.js
-
- /**
- * {@link GetRecorderType} is an inner/private helper for {@link RecordRTC}.
- * @summary It returns best recorder-type available for your browser.
- * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT}
- * @author {@link https://MuazKhan.com|Muaz Khan}
- * @typedef GetRecorderType
- * @class
- * @example
- * var RecorderType = GetRecorderType(options);
- * var recorder = new RecorderType(options);
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- * @param {MediaStream} mediaStream - MediaStream object fetched using getUserMedia API or generated using captureStreamUntilEnded or WebAudio API.
- * @param {object} config - {type:"video", disableLogs: true, numberOfAudioChannels: 1, bufferSize: 0, sampleRate: 0, video: HTMLVideoElement, etc.}
- */
-
- function GetRecorderType(mediaStream, config) {
- var recorder;
-
- // StereoAudioRecorder can work with all three: Edge, Firefox and Chrome
- // todo: detect if it is Edge, then auto use: StereoAudioRecorder
- if (isChrome || isEdge || isOpera) {
- // Media Stream Recording API has not been implemented in chrome yet;
- // That's why using WebAudio API to record stereo audio in WAV format
- recorder = StereoAudioRecorder;
- }
-
- if (typeof MediaRecorder !== 'undefined' && 'requestData' in MediaRecorder.prototype && !isChrome) {
- recorder = MediaStreamRecorder;
- }
-
- // video recorder (in WebM format)
- if (config.type === 'video' && (isChrome || isOpera)) {
- recorder = WhammyRecorder;
-
- if (typeof WebAssemblyRecorder !== 'undefined' && typeof ReadableStream !== 'undefined') {
- recorder = WebAssemblyRecorder;
- }
- }
-
- // video recorder (in Gif format)
- if (config.type === 'gif') {
- recorder = GifRecorder;
- }
-
- // html2canvas recording!
- if (config.type === 'canvas') {
- recorder = CanvasRecorder;
- }
-
- if (isMediaRecorderCompatible() && recorder !== CanvasRecorder && recorder !== GifRecorder && typeof MediaRecorder !== 'undefined' && 'requestData' in MediaRecorder.prototype) {
- if (getTracks(mediaStream, 'video').length || getTracks(mediaStream, 'audio').length) {
- // audio-only recording
- if (config.type === 'audio') {
- if (typeof MediaRecorder.isTypeSupported === 'function' && MediaRecorder.isTypeSupported('audio/webm')) {
- recorder = MediaStreamRecorder;
- }
- // else recorder = StereoAudioRecorder;
- } else {
- // video or screen tracks
- if (typeof MediaRecorder.isTypeSupported === 'function' && MediaRecorder.isTypeSupported('video/webm')) {
- recorder = MediaStreamRecorder;
- }
- }
- }
- }
-
- if (mediaStream instanceof Array && mediaStream.length) {
- recorder = MultiStreamRecorder;
- }
-
- if (config.recorderType) {
- recorder = config.recorderType;
- }
-
- if (!config.disableLogs && !!recorder && !!recorder.name) {
- console.log('Using recorderType:', recorder.name || recorder.constructor.name);
- }
-
- if (!recorder && isSafari) {
- recorder = MediaStreamRecorder;
- }
-
- return recorder;
- }
-
- // _____________
- // MRecordRTC.js
-
- /**
- * MRecordRTC runs on top of {@link RecordRTC} to bring multiple recordings in a single place, by providing simple API.
- * @summary MRecordRTC stands for "Multiple-RecordRTC".
- * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT}
- * @author {@link https://MuazKhan.com|Muaz Khan}
- * @typedef MRecordRTC
- * @class
- * @example
- * var recorder = new MRecordRTC();
- * recorder.addStream(MediaStream);
- * recorder.mediaType = {
- * audio: true, // or StereoAudioRecorder or MediaStreamRecorder
- * video: true, // or WhammyRecorder or MediaStreamRecorder or WebAssemblyRecorder or CanvasRecorder
- * gif: true // or GifRecorder
- * };
- * // mimeType is optional and should be set only in advance cases.
- * recorder.mimeType = {
- * audio: 'audio/wav',
- * video: 'video/webm',
- * gif: 'image/gif'
- * };
- * recorder.startRecording();
- * @see For further information:
- * @see {@link https://github.com/muaz-khan/RecordRTC/tree/master/MRecordRTC|MRecordRTC Source Code}
- * @param {MediaStream} mediaStream - MediaStream object fetched using getUserMedia API or generated using captureStreamUntilEnded or WebAudio API.
- * @requires {@link RecordRTC}
- */
-
- function MRecordRTC(mediaStream) {
-
- /**
- * This method attaches MediaStream object to {@link MRecordRTC}.
- * @param {MediaStream} mediaStream - A MediaStream object, either fetched using getUserMedia API, or generated using captureStreamUntilEnded or WebAudio API.
- * @method
- * @memberof MRecordRTC
- * @example
- * recorder.addStream(MediaStream);
- */
- this.addStream = function (_mediaStream) {
- if (_mediaStream) {
- mediaStream = _mediaStream;
- }
- };
-
- /**
- * This property can be used to set the recording type e.g. audio, or video, or gif, or canvas.
- * @property {object} mediaType - {audio: true, video: true, gif: true}
- * @memberof MRecordRTC
- * @example
- * var recorder = new MRecordRTC();
- * recorder.mediaType = {
- * audio: true, // TRUE or StereoAudioRecorder or MediaStreamRecorder
- * video: true, // TRUE or WhammyRecorder or MediaStreamRecorder or WebAssemblyRecorder or CanvasRecorder
- * gif : true // TRUE or GifRecorder
- * };
- */
- this.mediaType = {
- audio: true,
- video: true
- };
-
- /**
- * This method starts recording.
- * @method
- * @memberof MRecordRTC
- * @example
- * recorder.startRecording();
- */
- this.startRecording = function () {
- var mediaType = this.mediaType;
- var recorderType;
- var mimeType = this.mimeType || {
- audio: null,
- video: null,
- gif: null
- };
-
- if (typeof mediaType.audio !== 'function' && isMediaRecorderCompatible() && !getTracks(mediaStream, 'audio').length) {
- mediaType.audio = false;
- }
-
- if (typeof mediaType.video !== 'function' && isMediaRecorderCompatible() && !getTracks(mediaStream, 'video').length) {
- mediaType.video = false;
- }
-
- if (typeof mediaType.gif !== 'function' && isMediaRecorderCompatible() && !getTracks(mediaStream, 'video').length) {
- mediaType.gif = false;
- }
-
- if (!mediaType.audio && !mediaType.video && !mediaType.gif) {
- throw 'MediaStream must have either audio or video tracks.';
- }
-
- if (!!mediaType.audio) {
- recorderType = null;
- if (typeof mediaType.audio === 'function') {
- recorderType = mediaType.audio;
- }
-
- this.audioRecorder = new RecordRTC(mediaStream, {
- type: 'audio',
- bufferSize: this.bufferSize,
- sampleRate: this.sampleRate,
- numberOfAudioChannels: this.numberOfAudioChannels || 2,
- disableLogs: this.disableLogs,
- recorderType: recorderType,
- mimeType: mimeType.audio,
- timeSlice: this.timeSlice,
- onTimeStamp: this.onTimeStamp
- });
-
- if (!mediaType.video) {
- this.audioRecorder.startRecording();
- }
- }
-
- if (!!mediaType.video) {
- recorderType = null;
- if (typeof mediaType.video === 'function') {
- recorderType = mediaType.video;
- }
-
- var newStream = mediaStream;
-
- if (isMediaRecorderCompatible() && !!mediaType.audio && typeof mediaType.audio === 'function') {
- var videoTrack = getTracks(mediaStream, 'video')[0];
-
- if (isFirefox) {
- newStream = new MediaStream();
- newStream.addTrack(videoTrack);
-
- if (recorderType && recorderType === WhammyRecorder) {
- // Firefox does NOT supports webp-encoding yet
- // But Firefox do supports WebAssemblyRecorder
- recorderType = MediaStreamRecorder;
- }
- } else {
- newStream = new MediaStream();
- newStream.addTrack(videoTrack);
- }
- }
-
- this.videoRecorder = new RecordRTC(newStream, {
- type: 'video',
- video: this.video,
- canvas: this.canvas,
- frameInterval: this.frameInterval || 10,
- disableLogs: this.disableLogs,
- recorderType: recorderType,
- mimeType: mimeType.video,
- timeSlice: this.timeSlice,
- onTimeStamp: this.onTimeStamp,
- workerPath: this.workerPath,
- webAssemblyPath: this.webAssemblyPath,
- frameRate: this.frameRate, // used by WebAssemblyRecorder; values: usually 30; accepts any.
- bitrate: this.bitrate // used by WebAssemblyRecorder; values: 0 to 1000+
- });
-
- if (!mediaType.audio) {
- this.videoRecorder.startRecording();
- }
- }
-
- if (!!mediaType.audio && !!mediaType.video) {
- var self = this;
-
- var isSingleRecorder = isMediaRecorderCompatible() === true;
-
- if (mediaType.audio instanceof StereoAudioRecorder && !!mediaType.video) {
- isSingleRecorder = false;
- } else if (mediaType.audio !== true && mediaType.video !== true && mediaType.audio !== mediaType.video) {
- isSingleRecorder = false;
- }
-
- if (isSingleRecorder === true) {
- self.audioRecorder = null;
- self.videoRecorder.startRecording();
- } else {
- self.videoRecorder.initRecorder(function () {
- self.audioRecorder.initRecorder(function () {
- // Both recorders are ready to record things accurately
- self.videoRecorder.startRecording();
- self.audioRecorder.startRecording();
- });
- });
- }
- }
-
- if (!!mediaType.gif) {
- recorderType = null;
- if (typeof mediaType.gif === 'function') {
- recorderType = mediaType.gif;
- }
- this.gifRecorder = new RecordRTC(mediaStream, {
- type: 'gif',
- frameRate: this.frameRate || 200,
- quality: this.quality || 10,
- disableLogs: this.disableLogs,
- recorderType: recorderType,
- mimeType: mimeType.gif
- });
- this.gifRecorder.startRecording();
- }
- };
-
- /**
- * This method stops recording.
- * @param {function} callback - Callback function is invoked when all encoders finished their jobs.
- * @method
- * @memberof MRecordRTC
- * @example
- * recorder.stopRecording(function(recording){
- * var audioBlob = recording.audio;
- * var videoBlob = recording.video;
- * var gifBlob = recording.gif;
- * });
- */
- this.stopRecording = function (callback) {
- callback = callback || function () { };
-
- if (this.audioRecorder) {
- this.audioRecorder.stopRecording(function (blobURL) {
- callback(blobURL, 'audio');
- });
- }
-
- if (this.videoRecorder) {
- this.videoRecorder.stopRecording(function (blobURL) {
- callback(blobURL, 'video');
- });
- }
-
- if (this.gifRecorder) {
- this.gifRecorder.stopRecording(function (blobURL) {
- callback(blobURL, 'gif');
- });
- }
- };
-
- /**
- * This method pauses recording.
- * @method
- * @memberof MRecordRTC
- * @example
- * recorder.pauseRecording();
- */
- this.pauseRecording = function () {
- if (this.audioRecorder) {
- this.audioRecorder.pauseRecording();
- }
-
- if (this.videoRecorder) {
- this.videoRecorder.pauseRecording();
- }
-
- if (this.gifRecorder) {
- this.gifRecorder.pauseRecording();
- }
- };
-
- /**
- * This method resumes recording.
- * @method
- * @memberof MRecordRTC
- * @example
- * recorder.resumeRecording();
- */
- this.resumeRecording = function () {
- if (this.audioRecorder) {
- this.audioRecorder.resumeRecording();
- }
-
- if (this.videoRecorder) {
- this.videoRecorder.resumeRecording();
- }
-
- if (this.gifRecorder) {
- this.gifRecorder.resumeRecording();
- }
- };
-
- /**
- * This method can be used to manually get all recorded blobs.
- * @param {function} callback - All recorded blobs are passed back to the "callback" function.
- * @method
- * @memberof MRecordRTC
- * @example
- * recorder.getBlob(function(recording){
- * var audioBlob = recording.audio;
- * var videoBlob = recording.video;
- * var gifBlob = recording.gif;
- * });
- * // or
- * var audioBlob = recorder.getBlob().audio;
- * var videoBlob = recorder.getBlob().video;
- */
- this.getBlob = function (callback) {
- var output = {};
-
- if (this.audioRecorder) {
- output.audio = this.audioRecorder.getBlob();
- }
-
- if (this.videoRecorder) {
- output.video = this.videoRecorder.getBlob();
- }
-
- if (this.gifRecorder) {
- output.gif = this.gifRecorder.getBlob();
- }
-
- if (callback) {
- callback(output);
- }
-
- return output;
- };
-
- /**
- * Destroy all recorder instances.
- * @method
- * @memberof MRecordRTC
- * @example
- * recorder.destroy();
- */
- this.destroy = function () {
- if (this.audioRecorder) {
- this.audioRecorder.destroy();
- this.audioRecorder = null;
- }
-
- if (this.videoRecorder) {
- this.videoRecorder.destroy();
- this.videoRecorder = null;
- }
-
- if (this.gifRecorder) {
- this.gifRecorder.destroy();
- this.gifRecorder = null;
- }
- };
-
- /**
- * This method can be used to manually get all recorded blobs' DataURLs.
- * @param {function} callback - All recorded blobs' DataURLs are passed back to the "callback" function.
- * @method
- * @memberof MRecordRTC
- * @example
- * recorder.getDataURL(function(recording){
- * var audioDataURL = recording.audio;
- * var videoDataURL = recording.video;
- * var gifDataURL = recording.gif;
- * });
- */
- this.getDataURL = function (callback) {
- this.getBlob(function (blob) {
- if (blob.audio && blob.video) {
- getDataURL(blob.audio, function (_audioDataURL) {
- getDataURL(blob.video, function (_videoDataURL) {
- callback({
- audio: _audioDataURL,
- video: _videoDataURL
- });
- });
- });
- } else if (blob.audio) {
- getDataURL(blob.audio, function (_audioDataURL) {
- callback({
- audio: _audioDataURL
- });
- });
- } else if (blob.video) {
- getDataURL(blob.video, function (_videoDataURL) {
- callback({
- video: _videoDataURL
- });
- });
- }
- });
-
- function getDataURL(blob, callback00) {
- if (typeof Worker !== 'undefined') {
- var webWorker = processInWebWorker(function readFile(_blob) {
- postMessage(new FileReaderSync().readAsDataURL(_blob));
- });
-
- webWorker.onmessage = function (event) {
- callback00(event.data);
- };
-
- webWorker.postMessage(blob);
- } else {
- var reader = new FileReader();
- reader.readAsDataURL(blob);
- reader.onload = function (event) {
- callback00(event.target.result);
- };
- }
- }
-
- function processInWebWorker(_function) {
- var blob = URL.createObjectURL(new Blob([_function.toString(),
- 'this.onmessage = function (eee) {' + _function.name + '(eee.data);}'
- ], {
- type: 'application/javascript'
- }));
-
- var worker = new Worker(blob);
- var url;
- if (typeof URL !== 'undefined') {
- url = URL;
- } else if (typeof webkitURL !== 'undefined') {
- url = webkitURL;
- } else {
- throw 'Neither URL nor webkitURL detected.';
- }
- url.revokeObjectURL(blob);
- return worker;
- }
- };
-
- /**
- * This method can be used to ask {@link MRecordRTC} to write all recorded blobs into IndexedDB storage.
- * @method
- * @memberof MRecordRTC
- * @example
- * recorder.writeToDisk();
- */
- this.writeToDisk = function () {
- RecordRTC.writeToDisk({
- audio: this.audioRecorder,
- video: this.videoRecorder,
- gif: this.gifRecorder
- });
- };
-
- /**
- * This method can be used to invoke a save-as dialog for all recorded blobs.
- * @param {object} args - {audio: 'audio-name', video: 'video-name', gif: 'gif-name'}
- * @method
- * @memberof MRecordRTC
- * @example
- * recorder.save({
- * audio: 'audio-file-name',
- * video: 'video-file-name',
- * gif : 'gif-file-name'
- * });
- */
- this.save = function (args) {
- args = args || {
- audio: true,
- video: true,
- gif: true
- };
-
- if (!!args.audio && this.audioRecorder) {
- this.audioRecorder.save(typeof args.audio === 'string' ? args.audio : '');
- }
-
- if (!!args.video && this.videoRecorder) {
- this.videoRecorder.save(typeof args.video === 'string' ? args.video : '');
- }
- if (!!args.gif && this.gifRecorder) {
- this.gifRecorder.save(typeof args.gif === 'string' ? args.gif : '');
- }
- };
- }
-
- /**
- * This method can be used to get all recorded blobs from IndexedDB storage.
- * @param {string} type - 'all' or 'audio' or 'video' or 'gif'
- * @param {function} callback - Callback function to get all stored blobs.
- * @method
- * @memberof MRecordRTC
- * @example
- * MRecordRTC.getFromDisk('all', function(dataURL, type){
- * if(type === 'audio') { }
- * if(type === 'video') { }
- * if(type === 'gif') { }
- * });
- */
- MRecordRTC.getFromDisk = RecordRTC.getFromDisk;
-
- /**
- * This method can be used to store recorded blobs into IndexedDB storage.
- * @param {object} options - {audio: Blob, video: Blob, gif: Blob}
- * @method
- * @memberof MRecordRTC
- * @example
- * MRecordRTC.writeToDisk({
- * audio: audioBlob,
- * video: videoBlob,
- * gif : gifBlob
- * });
- */
- MRecordRTC.writeToDisk = RecordRTC.writeToDisk;
-
- if (typeof RecordRTC !== 'undefined') {
- RecordRTC.MRecordRTC = MRecordRTC;
- }
-
- var browserFakeUserAgent = 'Fake/5.0 (FakeOS) AppleWebKit/123 (KHTML, like Gecko) Fake/12.3.4567.89 Fake/123.45';
-
- (function (that) {
- if (!that) {
- return;
- }
-
- if (typeof window !== 'undefined') {
- return;
- }
-
- if (typeof commonjsGlobal === 'undefined') {
- return;
- }
-
- commonjsGlobal.navigator = {
- userAgent: browserFakeUserAgent,
- getUserMedia: function () { }
- };
-
- if (!commonjsGlobal.console) {
- commonjsGlobal.console = {};
- }
-
- if (typeof commonjsGlobal.console.log === 'undefined' || typeof commonjsGlobal.console.error === 'undefined') {
- commonjsGlobal.console.error = commonjsGlobal.console.log = commonjsGlobal.console.log || function () {
- console.log(arguments);
- };
- }
-
- if (typeof document === 'undefined') {
- /*global document:true */
- that.document = {
- documentElement: {
- appendChild: function () {
- return '';
- }
- }
- };
-
- document.createElement = document.captureStream = document.mozCaptureStream = function () {
- var obj = {
- getContext: function () {
- return obj;
- },
- play: function () { },
- pause: function () { },
- drawImage: function () { },
- toDataURL: function () {
- return '';
- },
- style: {}
- };
- return obj;
- };
-
- that.HTMLVideoElement = function () { };
- }
-
- if (typeof location === 'undefined') {
- /*global location:true */
- that.location = {
- protocol: 'file:',
- href: '',
- hash: ''
- };
- }
-
- if (typeof screen === 'undefined') {
- /*global screen:true */
- that.screen = {
- width: 0,
- height: 0
- };
- }
-
- if (typeof URL === 'undefined') {
- /*global screen:true */
- that.URL = {
- createObjectURL: function () {
- return '';
- },
- revokeObjectURL: function () {
- return '';
- }
- };
- }
-
- /*global window:true */
- that.window = commonjsGlobal;
- })(typeof commonjsGlobal !== 'undefined' ? commonjsGlobal : null);
-
- // _____________________________
- // Cross-Browser-Declarations.js
-
- // animation-frame used in WebM recording
-
- /*jshint -W079 */
- var requestAnimationFrame = window.requestAnimationFrame;
- if (typeof requestAnimationFrame === 'undefined') {
- if (typeof webkitRequestAnimationFrame !== 'undefined') {
- /*global requestAnimationFrame:true */
- requestAnimationFrame = webkitRequestAnimationFrame;
- } else if (typeof mozRequestAnimationFrame !== 'undefined') {
- /*global requestAnimationFrame:true */
- requestAnimationFrame = mozRequestAnimationFrame;
- } else if (typeof msRequestAnimationFrame !== 'undefined') {
- /*global requestAnimationFrame:true */
- requestAnimationFrame = msRequestAnimationFrame;
- } else if (typeof requestAnimationFrame === 'undefined') {
- // via: https://gist.github.com/paulirish/1579671
- var lastTime = 0;
-
- /*global requestAnimationFrame:true */
- requestAnimationFrame = function (callback, element) {
- var currTime = new Date().getTime();
- var timeToCall = Math.max(0, 16 - (currTime - lastTime));
- var id = setTimeout(function () {
- callback(currTime + timeToCall);
- }, timeToCall);
- lastTime = currTime + timeToCall;
- return id;
- };
- }
- }
-
- /*jshint -W079 */
- var cancelAnimationFrame = window.cancelAnimationFrame;
- if (typeof cancelAnimationFrame === 'undefined') {
- if (typeof webkitCancelAnimationFrame !== 'undefined') {
- /*global cancelAnimationFrame:true */
- cancelAnimationFrame = webkitCancelAnimationFrame;
- } else if (typeof mozCancelAnimationFrame !== 'undefined') {
- /*global cancelAnimationFrame:true */
- cancelAnimationFrame = mozCancelAnimationFrame;
- } else if (typeof msCancelAnimationFrame !== 'undefined') {
- /*global cancelAnimationFrame:true */
- cancelAnimationFrame = msCancelAnimationFrame;
- } else if (typeof cancelAnimationFrame === 'undefined') {
- /*global cancelAnimationFrame:true */
- cancelAnimationFrame = function (id) {
- clearTimeout(id);
- };
- }
- }
-
- // WebAudio API representer
- var AudioContext = window.AudioContext;
-
- if (typeof AudioContext === 'undefined') {
- if (typeof webkitAudioContext !== 'undefined') {
- /*global AudioContext:true */
- AudioContext = webkitAudioContext;
- }
-
- if (typeof mozAudioContext !== 'undefined') {
- /*global AudioContext:true */
- AudioContext = mozAudioContext;
- }
- }
-
- /*jshint -W079 */
- var URL = window.URL;
-
- if (typeof URL === 'undefined' && typeof webkitURL !== 'undefined') {
- /*global URL:true */
- URL = webkitURL;
- }
-
- if (typeof navigator !== 'undefined' && typeof navigator.getUserMedia === 'undefined') { // maybe window.navigator?
- if (typeof navigator.webkitGetUserMedia !== 'undefined') {
- navigator.getUserMedia = navigator.webkitGetUserMedia;
- }
-
- if (typeof navigator.mozGetUserMedia !== 'undefined') {
- navigator.getUserMedia = navigator.mozGetUserMedia;
- }
- }
-
- var isEdge = navigator.userAgent.indexOf('Edge') !== -1 && (!!navigator.msSaveBlob || !!navigator.msSaveOrOpenBlob);
- var isOpera = !!window.opera || navigator.userAgent.indexOf('OPR/') !== -1;
- var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1 && ('netscape' in window) && / rv:/.test(navigator.userAgent);
- var isChrome = (!isOpera && !isEdge && !!navigator.webkitGetUserMedia) || isElectron() || navigator.userAgent.toLowerCase().indexOf('chrome/') !== -1;
-
- var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-
- if (isSafari && !isChrome && navigator.userAgent.indexOf('CriOS') !== -1) {
- isSafari = false;
- isChrome = true;
- }
-
- var MediaStream = window.MediaStream;
-
- if (typeof MediaStream === 'undefined' && typeof webkitMediaStream !== 'undefined') {
- MediaStream = webkitMediaStream;
- }
-
- /*global MediaStream:true */
- if (typeof MediaStream !== 'undefined') {
- // override "stop" method for all browsers
- if (typeof MediaStream.prototype.stop === 'undefined') {
- MediaStream.prototype.stop = function () {
- this.getTracks().forEach(function (track) {
- track.stop();
- });
- };
- }
- }
-
- // below function via: http://goo.gl/B3ae8c
- /**
- * Return human-readable file size.
- * @param {number} bytes - Pass bytes and get formatted string.
- * @returns {string} - formatted string
- * @example
- * bytesToSize(1024*1024*5) === '5 GB'
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- */
- function bytesToSize(bytes) {
- var k = 1000;
- var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
- if (bytes === 0) {
- return '0 Bytes';
- }
- var i = parseInt(Math.floor(Math.log(bytes) / Math.log(k)), 10);
- return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
- }
-
- /**
- * @param {Blob} file - File or Blob object. This parameter is required.
- * @param {string} fileName - Optional file name e.g. "Recorded-Video.webm"
- * @example
- * invokeSaveAsDialog(blob or file, [optional] fileName);
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- */
- function invokeSaveAsDialog(file, fileName) {
- if (!file) {
- throw 'Blob object is required.';
- }
-
- if (!file.type) {
- try {
- file.type = 'video/webm';
- } catch (e) { }
- }
-
- var fileExtension = (file.type || 'video/webm').split('/')[1];
- if (fileExtension.indexOf(';') !== -1) {
- // extended mimetype, e.g. 'video/webm;codecs=vp8,opus'
- fileExtension = fileExtension.split(';')[0];
- }
- if (fileName && fileName.indexOf('.') !== -1) {
- var splitted = fileName.split('.');
- fileName = splitted[0];
- fileExtension = splitted[1];
- }
-
- var fileFullName = (fileName || (Math.round(Math.random() * 9999999999) + 888888888)) + '.' + fileExtension;
-
- if (typeof navigator.msSaveOrOpenBlob !== 'undefined') {
- return navigator.msSaveOrOpenBlob(file, fileFullName);
- } else if (typeof navigator.msSaveBlob !== 'undefined') {
- return navigator.msSaveBlob(file, fileFullName);
- }
-
- var hyperlink = document.createElement('a');
- hyperlink.href = URL.createObjectURL(file);
- hyperlink.download = fileFullName;
-
- hyperlink.style = 'display:none;opacity:0;color:transparent;';
- (document.body || document.documentElement).appendChild(hyperlink);
-
- if (typeof hyperlink.click === 'function') {
- hyperlink.click();
- } else {
- hyperlink.target = '_blank';
- hyperlink.dispatchEvent(new MouseEvent('click', {
- view: window,
- bubbles: true,
- cancelable: true
- }));
- }
-
- URL.revokeObjectURL(hyperlink.href);
- }
-
- /**
- * from: https://github.com/cheton/is-electron/blob/master/index.js
- **/
- function isElectron() {
- // Renderer process
- if (typeof window !== 'undefined' && typeof window.process === 'object' && window.process.type === 'renderer') {
- return true;
- }
-
- // Main process
- if (typeof process !== 'undefined' && typeof process.versions === 'object' && !!process.versions.electron) {
- return true;
- }
-
- // Detect the user agent when the `nodeIntegration` option is set to true
- if (typeof navigator === 'object' && typeof navigator.userAgent === 'string' && navigator.userAgent.indexOf('Electron') >= 0) {
- return true;
- }
-
- return false;
- }
-
- function getTracks(stream, kind) {
- if (!stream || !stream.getTracks) {
- return [];
- }
-
- return stream.getTracks().filter(function (t) {
- return t.kind === (kind || 'audio');
- });
- }
-
- function setSrcObject(stream, element) {
- if ('srcObject' in element) {
- element.srcObject = stream;
- } else if ('mozSrcObject' in element) {
- element.mozSrcObject = stream;
- } else {
- element.srcObject = stream;
- }
- }
-
- /**
- * @param {Blob} file - File or Blob object.
- * @param {function} callback - Callback function.
- * @example
- * getSeekableBlob(blob or file, callback);
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- */
- function getSeekableBlob(inputBlob, callback) {
- // EBML.js copyrights goes to: https://github.com/legokichi/ts-ebml
- if (typeof EBML === 'undefined') {
- throw new Error('Please link: https://www.webrtc-experiment.com/EBML.js');
- }
-
- var reader = new EBML.Reader();
- var decoder = new EBML.Decoder();
- var tools = EBML.tools;
-
- var fileReader = new FileReader();
- fileReader.onload = function (e) {
- var ebmlElms = decoder.decode(this.result);
- ebmlElms.forEach(function (element) {
- reader.read(element);
- });
- reader.stop();
- var refinedMetadataBuf = tools.makeMetadataSeekable(reader.metadatas, reader.duration, reader.cues);
- var body = this.result.slice(reader.metadataSize);
- var newBlob = new Blob([refinedMetadataBuf, body], {
- type: 'video/webm'
- });
-
- callback(newBlob);
- };
- fileReader.readAsArrayBuffer(inputBlob);
- }
-
- if (typeof RecordRTC !== 'undefined') {
- RecordRTC.invokeSaveAsDialog = invokeSaveAsDialog;
- RecordRTC.getTracks = getTracks;
- RecordRTC.getSeekableBlob = getSeekableBlob;
- RecordRTC.bytesToSize = bytesToSize;
- RecordRTC.isElectron = isElectron;
- }
-
- // __________ (used to handle stuff like http://goo.gl/xmE5eg) issue #129
- // Storage.js
-
- /**
- * Storage is a standalone object used by {@link RecordRTC} to store reusable objects e.g. "new AudioContext".
- * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT}
- * @author {@link https://MuazKhan.com|Muaz Khan}
- * @example
- * Storage.AudioContext === webkitAudioContext
- * @property {webkitAudioContext} AudioContext - Keeps a reference to AudioContext object.
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- */
-
- var Storage = {};
-
- if (typeof AudioContext !== 'undefined') {
- Storage.AudioContext = AudioContext;
- } else if (typeof webkitAudioContext !== 'undefined') {
- Storage.AudioContext = webkitAudioContext;
- }
-
- if (typeof RecordRTC !== 'undefined') {
- RecordRTC.Storage = Storage;
- }
-
- function isMediaRecorderCompatible() {
- if (isFirefox || isSafari || isEdge) {
- return true;
- }
- var nAgt = navigator.userAgent;
- var fullVersion = '' + parseFloat(navigator.appVersion);
- var majorVersion = parseInt(navigator.appVersion, 10);
- var verOffset, ix;
-
- if (isChrome || isOpera) {
- verOffset = nAgt.indexOf('Chrome');
- fullVersion = nAgt.substring(verOffset + 7);
- }
-
- // trim the fullVersion string at semicolon/space if present
- if ((ix = fullVersion.indexOf(';')) !== -1) {
- fullVersion = fullVersion.substring(0, ix);
- }
-
- if ((ix = fullVersion.indexOf(' ')) !== -1) {
- fullVersion = fullVersion.substring(0, ix);
- }
-
- majorVersion = parseInt('' + fullVersion, 10);
-
- if (isNaN(majorVersion)) {
- fullVersion = '' + parseFloat(navigator.appVersion);
- majorVersion = parseInt(navigator.appVersion, 10);
- }
-
- return majorVersion >= 49;
- }
-
- // ______________________
- // MediaStreamRecorder.js
-
- /**
- * MediaStreamRecorder is an abstraction layer for {@link https://w3c.github.io/mediacapture-record/MediaRecorder.html|MediaRecorder API}. It is used by {@link RecordRTC} to record MediaStream(s) in both Chrome and Firefox.
- * @summary Runs top over {@link https://w3c.github.io/mediacapture-record/MediaRecorder.html|MediaRecorder API}.
- * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT}
- * @author {@link https://github.com/muaz-khan|Muaz Khan}
- * @typedef MediaStreamRecorder
- * @class
- * @example
- * var config = {
- * mimeType: 'video/webm', // vp8, vp9, h264, mkv, opus/vorbis
- * audioBitsPerSecond : 256 * 8 * 1024,
- * videoBitsPerSecond : 256 * 8 * 1024,
- * bitsPerSecond: 256 * 8 * 1024, // if this is provided, skip above two
- * checkForInactiveTracks: true,
- * timeSlice: 1000, // concatenate intervals based blobs
- * ondataavailable: function() {} // get intervals based blobs
- * }
- * var recorder = new MediaStreamRecorder(mediaStream, config);
- * recorder.record();
- * recorder.stop(function(blob) {
- * video.src = URL.createObjectURL(blob);
- *
- * // or
- * var blob = recorder.blob;
- * });
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- * @param {MediaStream} mediaStream - MediaStream object fetched using getUserMedia API or generated using captureStreamUntilEnded or WebAudio API.
- * @param {object} config - {disableLogs:true, initCallback: function, mimeType: "video/webm", timeSlice: 1000}
- * @throws Will throw an error if first argument "MediaStream" is missing. Also throws error if "MediaRecorder API" are not supported by the browser.
- */
-
- function MediaStreamRecorder(mediaStream, config) {
- var self = this;
-
- if (typeof mediaStream === 'undefined') {
- throw 'First argument "MediaStream" is required.';
- }
-
- if (typeof MediaRecorder === 'undefined') {
- throw 'Your browser does not support the Media Recorder API. Please try other modules e.g. WhammyRecorder or StereoAudioRecorder.';
- }
-
- config = config || {
- // bitsPerSecond: 256 * 8 * 1024,
- mimeType: 'video/webm'
- };
-
- if (config.type === 'audio') {
- if (getTracks(mediaStream, 'video').length && getTracks(mediaStream, 'audio').length) {
- var stream;
- if (!!navigator.mozGetUserMedia) {
- stream = new MediaStream();
- stream.addTrack(getTracks(mediaStream, 'audio')[0]);
- } else {
- // webkitMediaStream
- stream = new MediaStream(getTracks(mediaStream, 'audio'));
- }
- mediaStream = stream;
- }
-
- if (!config.mimeType || config.mimeType.toString().toLowerCase().indexOf('audio') === -1) {
- config.mimeType = isChrome ? 'audio/webm' : 'audio/ogg';
- }
-
- if (config.mimeType && config.mimeType.toString().toLowerCase() !== 'audio/ogg' && !!navigator.mozGetUserMedia) {
- // forcing better codecs on Firefox (via #166)
- config.mimeType = 'audio/ogg';
- }
- }
-
- var arrayOfBlobs = [];
-
- /**
- * This method returns array of blobs. Use only with "timeSlice". Its useful to preview recording anytime, without using the "stop" method.
- * @method
- * @memberof MediaStreamRecorder
- * @example
- * var arrayOfBlobs = recorder.getArrayOfBlobs();
- * @returns {Array} Returns array of recorded blobs.
- */
- this.getArrayOfBlobs = function () {
- return arrayOfBlobs;
- };
-
- /**
- * This method records MediaStream.
- * @method
- * @memberof MediaStreamRecorder
- * @example
- * recorder.record();
- */
- this.record = function () {
- // set defaults
- self.blob = null;
- self.clearRecordedData();
- self.timestamps = [];
- allStates = [];
- arrayOfBlobs = [];
-
- var recorderHints = config;
-
- if (!config.disableLogs) {
- console.log('Passing following config over MediaRecorder API.', recorderHints);
- }
-
- if (mediaRecorder) {
- // mandatory to make sure Firefox doesn't fails to record streams 3-4 times without reloading the page.
- mediaRecorder = null;
- }
-
- if (isChrome && !isMediaRecorderCompatible()) {
- // to support video-only recording on stable
- recorderHints = 'video/vp8';
- }
-
- if (typeof MediaRecorder.isTypeSupported === 'function' && recorderHints.mimeType) {
- if (!MediaRecorder.isTypeSupported(recorderHints.mimeType)) {
- if (!config.disableLogs) {
- console.warn('MediaRecorder API seems unable to record mimeType:', recorderHints.mimeType);
- }
-
- recorderHints.mimeType = config.type === 'audio' ? 'audio/webm' : 'video/webm';
- }
- }
-
- // using MediaRecorder API here
- try {
- mediaRecorder = new MediaRecorder(mediaStream, recorderHints);
-
- // reset
- config.mimeType = recorderHints.mimeType;
- } catch (e) {
- // chrome-based fallback
- mediaRecorder = new MediaRecorder(mediaStream);
- }
-
- // old hack?
- if (recorderHints.mimeType && !MediaRecorder.isTypeSupported && 'canRecordMimeType' in mediaRecorder && mediaRecorder.canRecordMimeType(recorderHints.mimeType) === false) {
- if (!config.disableLogs) {
- console.warn('MediaRecorder API seems unable to record mimeType:', recorderHints.mimeType);
- }
- }
-
- // Dispatching OnDataAvailable Handler
- mediaRecorder.ondataavailable = function (e) {
- if (e.data) {
- allStates.push('ondataavailable: ' + bytesToSize(e.data.size));
- }
-
- if (typeof config.timeSlice === 'number') {
- if (e.data && e.data.size) {
- arrayOfBlobs.push(e.data);
- updateTimeStamp();
-
- if (typeof config.ondataavailable === 'function') {
- // intervals based blobs
- var blob = config.getNativeBlob ? e.data : new Blob([e.data], {
- type: getMimeType(recorderHints)
- });
- config.ondataavailable(blob);
- }
- }
- return;
- }
-
- if (!e.data || !e.data.size || e.data.size < 100 || self.blob) {
- // make sure that stopRecording always getting fired
- // even if there is invalid data
- if (self.recordingCallback) {
- self.recordingCallback(new Blob([], {
- type: getMimeType(recorderHints)
- }));
- self.recordingCallback = null;
- }
- return;
- }
-
- self.blob = config.getNativeBlob ? e.data : new Blob([e.data], {
- type: getMimeType(recorderHints)
- });
-
- if (self.recordingCallback) {
- self.recordingCallback(self.blob);
- self.recordingCallback = null;
- }
- };
-
- mediaRecorder.onstart = function () {
- allStates.push('started');
- };
-
- mediaRecorder.onpause = function () {
- allStates.push('paused');
- };
-
- mediaRecorder.onresume = function () {
- allStates.push('resumed');
- };
-
- mediaRecorder.onstop = function () {
- allStates.push('stopped');
- };
-
- mediaRecorder.onerror = function (error) {
- if (!error) {
- return;
- }
-
- if (!error.name) {
- error.name = 'UnknownError';
- }
-
- allStates.push('error: ' + error);
-
- if (!config.disableLogs) {
- // via: https://w3c.github.io/mediacapture-record/MediaRecorder.html#exception-summary
- if (error.name.toString().toLowerCase().indexOf('invalidstate') !== -1) {
- console.error('The MediaRecorder is not in a state in which the proposed operation is allowed to be executed.', error);
- } else if (error.name.toString().toLowerCase().indexOf('notsupported') !== -1) {
- console.error('MIME type (', recorderHints.mimeType, ') is not supported.', error);
- } else if (error.name.toString().toLowerCase().indexOf('security') !== -1) {
- console.error('MediaRecorder security error', error);
- }
-
- // older code below
- else if (error.name === 'OutOfMemory') {
- console.error('The UA has exhaused the available memory. User agents SHOULD provide as much additional information as possible in the message attribute.', error);
- } else if (error.name === 'IllegalStreamModification') {
- console.error('A modification to the stream has occurred that makes it impossible to continue recording. An example would be the addition of a Track while recording is occurring. User agents SHOULD provide as much additional information as possible in the message attribute.', error);
- } else if (error.name === 'OtherRecordingError') {
- console.error('Used for an fatal error other than those listed above. User agents SHOULD provide as much additional information as possible in the message attribute.', error);
- } else if (error.name === 'GenericError') {
- console.error('The UA cannot provide the codec or recording option that has been requested.', error);
- } else {
- console.error('MediaRecorder Error', error);
- }
- }
-
- (function (looper) {
- if (!self.manuallyStopped && mediaRecorder && mediaRecorder.state === 'inactive') {
- delete config.timeslice;
-
- // 10 minutes, enough?
- mediaRecorder.start(10 * 60 * 1000);
- return;
- }
-
- setTimeout(looper, 1000);
- })();
-
- if (mediaRecorder.state !== 'inactive' && mediaRecorder.state !== 'stopped') {
- mediaRecorder.stop();
- }
- };
-
- if (typeof config.timeSlice === 'number') {
- updateTimeStamp();
- mediaRecorder.start(config.timeSlice);
- } else {
- // default is 60 minutes; enough?
- // use config => {timeSlice: 1000} otherwise
-
- mediaRecorder.start(3.6e+6);
- }
-
- if (config.initCallback) {
- config.initCallback(); // old code
- }
- };
-
- /**
- * @property {Array} timestamps - Array of time stamps
- * @memberof MediaStreamRecorder
- * @example
- * console.log(recorder.timestamps);
- */
- this.timestamps = [];
-
- function updateTimeStamp() {
- self.timestamps.push(new Date().getTime());
-
- if (typeof config.onTimeStamp === 'function') {
- config.onTimeStamp(self.timestamps[self.timestamps.length - 1], self.timestamps);
- }
- }
-
- function getMimeType(secondObject) {
- if (mediaRecorder && mediaRecorder.mimeType) {
- return mediaRecorder.mimeType;
- }
-
- return secondObject.mimeType || 'video/webm';
- }
-
- /**
- * This method stops recording MediaStream.
- * @param {function} callback - Callback function, that is used to pass recorded blob back to the callee.
- * @method
- * @memberof MediaStreamRecorder
- * @example
- * recorder.stop(function(blob) {
- * video.src = URL.createObjectURL(blob);
- * });
- */
- this.stop = function (callback) {
- callback = callback || function () { };
-
- self.manuallyStopped = true; // used inside the mediaRecorder.onerror
-
- if (!mediaRecorder) {
- return;
- }
-
- this.recordingCallback = callback;
-
- if (mediaRecorder.state === 'recording') {
- mediaRecorder.stop();
- }
-
- if (typeof config.timeSlice === 'number') {
- setTimeout(function () {
- self.blob = new Blob(arrayOfBlobs, {
- type: getMimeType(config)
- });
-
- self.recordingCallback(self.blob);
- }, 100);
- }
- };
-
- /**
- * This method pauses the recording process.
- * @method
- * @memberof MediaStreamRecorder
- * @example
- * recorder.pause();
- */
- this.pause = function () {
- if (!mediaRecorder) {
- return;
- }
-
- if (mediaRecorder.state === 'recording') {
- mediaRecorder.pause();
- }
- };
-
- /**
- * This method resumes the recording process.
- * @method
- * @memberof MediaStreamRecorder
- * @example
- * recorder.resume();
- */
- this.resume = function () {
- if (!mediaRecorder) {
- return;
- }
-
- if (mediaRecorder.state === 'paused') {
- mediaRecorder.resume();
- }
- };
-
- /**
- * This method resets currently recorded data.
- * @method
- * @memberof MediaStreamRecorder
- * @example
- * recorder.clearRecordedData();
- */
- this.clearRecordedData = function () {
- if (mediaRecorder && mediaRecorder.state === 'recording') {
- self.stop(clearRecordedDataCB);
- }
-
- clearRecordedDataCB();
- };
-
- function clearRecordedDataCB() {
- arrayOfBlobs = [];
- mediaRecorder = null;
- self.timestamps = [];
- }
-
- // Reference to "MediaRecorder" object
- var mediaRecorder;
-
- /**
- * Access to native MediaRecorder API
- * @method
- * @memberof MediaStreamRecorder
- * @instance
- * @example
- * var internal = recorder.getInternalRecorder();
- * internal.ondataavailable = function() {}; // override
- * internal.stream, internal.onpause, internal.onstop, etc.
- * @returns {Object} Returns internal recording object.
- */
- this.getInternalRecorder = function () {
- return mediaRecorder;
- };
-
- function isMediaStreamActive() {
- if ('active' in mediaStream) {
- if (!mediaStream.active) {
- return false;
- }
- } else if ('ended' in mediaStream) { // old hack
- if (mediaStream.ended) {
- return false;
- }
- }
- return true;
- }
-
- /**
- * @property {Blob} blob - Recorded data as "Blob" object.
- * @memberof MediaStreamRecorder
- * @example
- * recorder.stop(function() {
- * var blob = recorder.blob;
- * });
- */
- this.blob = null;
-
-
- /**
- * Get MediaRecorder readonly state.
- * @method
- * @memberof MediaStreamRecorder
- * @example
- * var state = recorder.getState();
- * @returns {String} Returns recording state.
- */
- this.getState = function () {
- if (!mediaRecorder) {
- return 'inactive';
- }
-
- return mediaRecorder.state || 'inactive';
- };
-
- // list of all recording states
- var allStates = [];
-
- /**
- * Get MediaRecorder all recording states.
- * @method
- * @memberof MediaStreamRecorder
- * @example
- * var state = recorder.getAllStates();
- * @returns {Array} Returns all recording states
- */
- this.getAllStates = function () {
- return allStates;
- };
-
- // if any Track within the MediaStream is muted or not enabled at any time,
- // the browser will only record black frames
- // or silence since that is the content produced by the Track
- // so we need to stopRecording as soon as any single track ends.
- if (typeof config.checkForInactiveTracks === 'undefined') {
- config.checkForInactiveTracks = false; // disable to minimize CPU usage
- }
-
- var self = this;
-
- // this method checks if media stream is stopped
- // or if any track is ended.
- (function looper() {
- if (!mediaRecorder || config.checkForInactiveTracks === false) {
- return;
- }
-
- if (isMediaStreamActive() === false) {
- if (!config.disableLogs) {
- console.log('MediaStream seems stopped.');
- }
- self.stop();
- return;
- }
-
- setTimeout(looper, 1000); // check every second
- })();
-
- // for debugging
- this.name = 'MediaStreamRecorder';
- this.toString = function () {
- return this.name;
- };
- }
-
- if (typeof RecordRTC !== 'undefined') {
- RecordRTC.MediaStreamRecorder = MediaStreamRecorder;
- }
-
- // source code from: http://typedarray.org/wp-content/projects/WebAudioRecorder/script.js
- // https://github.com/mattdiamond/Recorderjs#license-mit
- // ______________________
- // StereoAudioRecorder.js
-
- /**
- * StereoAudioRecorder is a standalone class used by {@link RecordRTC} to bring "stereo" audio-recording in chrome.
- * @summary JavaScript standalone object for stereo audio recording.
- * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT}
- * @author {@link https://MuazKhan.com|Muaz Khan}
- * @typedef StereoAudioRecorder
- * @class
- * @example
- * var recorder = new StereoAudioRecorder(MediaStream, {
- * sampleRate: 44100,
- * bufferSize: 4096
- * });
- * recorder.record();
- * recorder.stop(function(blob) {
- * video.src = URL.createObjectURL(blob);
- * });
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- * @param {MediaStream} mediaStream - MediaStream object fetched using getUserMedia API or generated using captureStreamUntilEnded or WebAudio API.
- * @param {object} config - {sampleRate: 44100, bufferSize: 4096, numberOfAudioChannels: 1, etc.}
- */
-
- function StereoAudioRecorder(mediaStream, config) {
- if (!getTracks(mediaStream, 'audio').length) {
- throw 'Your stream has no audio tracks.';
- }
-
- config = config || {};
-
- var self = this;
-
- // variables
- var leftchannel = [];
- var rightchannel = [];
- var recording = false;
- var recordingLength = 0;
- var jsAudioNode;
-
- var numberOfAudioChannels = 2;
-
- /**
- * Set sample rates such as 8K or 16K. Reference: http://stackoverflow.com/a/28977136/552182
- * @property {number} desiredSampRate - Desired Bits per sample * 1000
- * @memberof StereoAudioRecorder
- * @instance
- * @example
- * var recorder = StereoAudioRecorder(mediaStream, {
- * desiredSampRate: 16 * 1000 // bits-per-sample * 1000
- * });
- */
- var desiredSampRate = config.desiredSampRate;
-
- // backward compatibility
- if (config.leftChannel === true) {
- numberOfAudioChannels = 1;
- }
-
- if (config.numberOfAudioChannels === 1) {
- numberOfAudioChannels = 1;
- }
-
- if (!numberOfAudioChannels || numberOfAudioChannels < 1) {
- numberOfAudioChannels = 2;
- }
-
- if (!config.disableLogs) {
- console.log('StereoAudioRecorder is set to record number of channels: ' + numberOfAudioChannels);
- }
-
- // if any Track within the MediaStream is muted or not enabled at any time,
- // the browser will only record black frames
- // or silence since that is the content produced by the Track
- // so we need to stopRecording as soon as any single track ends.
- if (typeof config.checkForInactiveTracks === 'undefined') {
- config.checkForInactiveTracks = true;
- }
-
- function isMediaStreamActive() {
- if (config.checkForInactiveTracks === false) {
- // always return "true"
- return true;
- }
-
- if ('active' in mediaStream) {
- if (!mediaStream.active) {
- return false;
- }
- } else if ('ended' in mediaStream) { // old hack
- if (mediaStream.ended) {
- return false;
- }
- }
- return true;
- }
-
- /**
- * This method records MediaStream.
- * @method
- * @memberof StereoAudioRecorder
- * @example
- * recorder.record();
- */
- this.record = function () {
- if (isMediaStreamActive() === false) {
- throw 'Please make sure MediaStream is active.';
- }
-
- resetVariables();
-
- isAudioProcessStarted = isPaused = false;
- recording = true;
-
- if (typeof config.timeSlice !== 'undefined') {
- looper();
- }
- };
-
- function mergeLeftRightBuffers(config, callback) {
- function mergeAudioBuffers(config, cb) {
- var numberOfAudioChannels = config.numberOfAudioChannels;
-
- // todo: "slice(0)" --- is it causes loop? Should be removed?
- var leftBuffers = config.leftBuffers.slice(0);
- var rightBuffers = config.rightBuffers.slice(0);
- var sampleRate = config.sampleRate;
- var internalInterleavedLength = config.internalInterleavedLength;
- var desiredSampRate = config.desiredSampRate;
-
- if (numberOfAudioChannels === 2) {
- leftBuffers = mergeBuffers(leftBuffers, internalInterleavedLength);
- rightBuffers = mergeBuffers(rightBuffers, internalInterleavedLength);
-
- if (desiredSampRate) {
- leftBuffers = interpolateArray(leftBuffers, desiredSampRate, sampleRate);
- rightBuffers = interpolateArray(rightBuffers, desiredSampRate, sampleRate);
- }
- }
-
- if (numberOfAudioChannels === 1) {
- leftBuffers = mergeBuffers(leftBuffers, internalInterleavedLength);
-
- if (desiredSampRate) {
- leftBuffers = interpolateArray(leftBuffers, desiredSampRate, sampleRate);
- }
- }
-
- // set sample rate as desired sample rate
- if (desiredSampRate) {
- sampleRate = desiredSampRate;
- }
-
- // for changing the sampling rate, reference:
- // http://stackoverflow.com/a/28977136/552182
- function interpolateArray(data, newSampleRate, oldSampleRate) {
- var fitCount = Math.round(data.length * (newSampleRate / oldSampleRate));
- var newData = [];
- var springFactor = Number((data.length - 1) / (fitCount - 1));
- newData[0] = data[0];
- for (var i = 1; i < fitCount - 1; i++) {
- var tmp = i * springFactor;
- var before = Number(Math.floor(tmp)).toFixed();
- var after = Number(Math.ceil(tmp)).toFixed();
- var atPoint = tmp - before;
- newData[i] = linearInterpolate(data[before], data[after], atPoint);
- }
- newData[fitCount - 1] = data[data.length - 1];
- return newData;
- }
-
- function linearInterpolate(before, after, atPoint) {
- return before + (after - before) * atPoint;
- }
-
- function mergeBuffers(channelBuffer, rLength) {
- var result = new Float64Array(rLength);
- var offset = 0;
- var lng = channelBuffer.length;
-
- for (var i = 0; i < lng; i++) {
- var buffer = channelBuffer[i];
- result.set(buffer, offset);
- offset += buffer.length;
- }
-
- return result;
- }
-
- function interleave(leftChannel, rightChannel) {
- var length = leftChannel.length + rightChannel.length;
-
- var result = new Float64Array(length);
-
- var inputIndex = 0;
-
- for (var index = 0; index < length;) {
- result[index++] = leftChannel[inputIndex];
- result[index++] = rightChannel[inputIndex];
- inputIndex++;
- }
- return result;
- }
-
- function writeUTFBytes(view, offset, string) {
- var lng = string.length;
- for (var i = 0; i < lng; i++) {
- view.setUint8(offset + i, string.charCodeAt(i));
- }
- }
-
- // interleave both channels together
- var interleaved;
-
- if (numberOfAudioChannels === 2) {
- interleaved = interleave(leftBuffers, rightBuffers);
- }
-
- if (numberOfAudioChannels === 1) {
- interleaved = leftBuffers;
- }
-
- var interleavedLength = interleaved.length;
-
- // create wav file
- var resultingBufferLength = 44 + interleavedLength * 2;
-
- var buffer = new ArrayBuffer(resultingBufferLength);
-
- var view = new DataView(buffer);
-
- // RIFF chunk descriptor/identifier
- writeUTFBytes(view, 0, 'RIFF');
-
- // RIFF chunk length
- // changed "44" to "36" via #401
- view.setUint32(4, 36 + interleavedLength * 2, true);
-
- // RIFF type
- writeUTFBytes(view, 8, 'WAVE');
-
- // format chunk identifier
- // FMT sub-chunk
- writeUTFBytes(view, 12, 'fmt ');
-
- // format chunk length
- view.setUint32(16, 16, true);
-
- // sample format (raw)
- view.setUint16(20, 1, true);
-
- // stereo (2 channels)
- view.setUint16(22, numberOfAudioChannels, true);
-
- // sample rate
- view.setUint32(24, sampleRate, true);
-
- // byte rate (sample rate * block align)
- view.setUint32(28, sampleRate * numberOfAudioChannels * 2, true);
-
- // block align (channel count * bytes per sample)
- view.setUint16(32, numberOfAudioChannels * 2, true);
-
- // bits per sample
- view.setUint16(34, 16, true);
-
- // data sub-chunk
- // data chunk identifier
- writeUTFBytes(view, 36, 'data');
-
- // data chunk length
- view.setUint32(40, interleavedLength * 2, true);
-
- // write the PCM samples
- var lng = interleavedLength;
- var index = 44;
- var volume = 1;
- for (var i = 0; i < lng; i++) {
- view.setInt16(index, interleaved[i] * (0x7FFF * volume), true);
- index += 2;
- }
-
- if (cb) {
- return cb({
- buffer: buffer,
- view: view
- });
- }
-
- postMessage({
- buffer: buffer,
- view: view
- });
- }
-
- if (config.noWorker) {
- mergeAudioBuffers(config, function (data) {
- callback(data.buffer, data.view);
- });
- return;
- }
-
-
- var webWorker = processInWebWorker(mergeAudioBuffers);
-
- webWorker.onmessage = function (event) {
- callback(event.data.buffer, event.data.view);
-
- // release memory
- URL.revokeObjectURL(webWorker.workerURL);
-
- // kill webworker (or Chrome will kill your page after ~25 calls)
- webWorker.terminate();
- };
-
- webWorker.postMessage(config);
- }
-
- function processInWebWorker(_function) {
- var workerURL = URL.createObjectURL(new Blob([_function.toString(),
- ';this.onmessage = function (eee) {' + _function.name + '(eee.data);}'
- ], {
- type: 'application/javascript'
- }));
-
- var worker = new Worker(workerURL);
- worker.workerURL = workerURL;
- return worker;
- }
-
- /**
- * This method stops recording MediaStream.
- * @param {function} callback - Callback function, that is used to pass recorded blob back to the callee.
- * @method
- * @memberof StereoAudioRecorder
- * @example
- * recorder.stop(function(blob) {
- * video.src = URL.createObjectURL(blob);
- * });
- */
- this.stop = function (callback) {
- callback = callback || function () { };
-
- // stop recording
- recording = false;
-
- mergeLeftRightBuffers({
- desiredSampRate: desiredSampRate,
- sampleRate: sampleRate,
- numberOfAudioChannels: numberOfAudioChannels,
- internalInterleavedLength: recordingLength,
- leftBuffers: leftchannel,
- rightBuffers: numberOfAudioChannels === 1 ? [] : rightchannel,
- noWorker: config.noWorker
- }, function (buffer, view) {
- /**
- * @property {Blob} blob - The recorded blob object.
- * @memberof StereoAudioRecorder
- * @example
- * recorder.stop(function(){
- * var blob = recorder.blob;
- * });
- */
- self.blob = new Blob([view], {
- type: 'audio/wav'
- });
-
- /**
- * @property {ArrayBuffer} buffer - The recorded buffer object.
- * @memberof StereoAudioRecorder
- * @example
- * recorder.stop(function(){
- * var buffer = recorder.buffer;
- * });
- */
- self.buffer = new ArrayBuffer(view.buffer.byteLength);
-
- /**
- * @property {DataView} view - The recorded data-view object.
- * @memberof StereoAudioRecorder
- * @example
- * recorder.stop(function(){
- * var view = recorder.view;
- * });
- */
- self.view = view;
-
- self.sampleRate = desiredSampRate || sampleRate;
- self.bufferSize = bufferSize;
-
- // recorded audio length
- self.length = recordingLength;
-
- isAudioProcessStarted = false;
-
- if (callback) {
- callback(self.blob);
- }
- });
- };
-
- if (typeof RecordRTC.Storage === 'undefined') {
- RecordRTC.Storage = {
- AudioContextConstructor: null,
- AudioContext: window.AudioContext || window.webkitAudioContext
- };
- }
-
- if (!RecordRTC.Storage.AudioContextConstructor || RecordRTC.Storage.AudioContextConstructor.state === 'closed') {
- RecordRTC.Storage.AudioContextConstructor = new RecordRTC.Storage.AudioContext();
- }
-
- var context = RecordRTC.Storage.AudioContextConstructor;
-
- // creates an audio node from the microphone incoming stream
- var audioInput = context.createMediaStreamSource(mediaStream);
-
- var legalBufferValues = [0, 256, 512, 1024, 2048, 4096, 8192, 16384];
-
- /**
- * From the spec: This value controls how frequently the audioprocess event is
- * dispatched and how many sample-frames need to be processed each call.
- * Lower values for buffer size will result in a lower (better) latency.
- * Higher values will be necessary to avoid audio breakup and glitches
- * The size of the buffer (in sample-frames) which needs to
- * be processed each time onprocessaudio is called.
- * Legal values are (256, 512, 1024, 2048, 4096, 8192, 16384).
- * @property {number} bufferSize - Buffer-size for how frequently the audioprocess event is dispatched.
- * @memberof StereoAudioRecorder
- * @example
- * recorder = new StereoAudioRecorder(mediaStream, {
- * bufferSize: 4096
- * });
- */
-
- // "0" means, let chrome decide the most accurate buffer-size for current platform.
- var bufferSize = typeof config.bufferSize === 'undefined' ? 4096 : config.bufferSize;
-
- if (legalBufferValues.indexOf(bufferSize) === -1) {
- if (!config.disableLogs) {
- console.log('Legal values for buffer-size are ' + JSON.stringify(legalBufferValues, null, '\t'));
- }
- }
-
- if (context.createJavaScriptNode) {
- jsAudioNode = context.createJavaScriptNode(bufferSize, numberOfAudioChannels, numberOfAudioChannels);
- } else if (context.createScriptProcessor) {
- jsAudioNode = context.createScriptProcessor(bufferSize, numberOfAudioChannels, numberOfAudioChannels);
- } else {
- throw 'WebAudio API has no support on this browser.';
- }
-
- // connect the stream to the script processor
- audioInput.connect(jsAudioNode);
-
- if (!config.bufferSize) {
- bufferSize = jsAudioNode.bufferSize; // device buffer-size
- }
-
- /**
- * The sample rate (in sample-frames per second) at which the
- * AudioContext handles audio. It is assumed that all AudioNodes
- * in the context run at this rate. In making this assumption,
- * sample-rate converters or "varispeed" processors are not supported
- * in real-time processing.
- * The sampleRate parameter describes the sample-rate of the
- * linear PCM audio data in the buffer in sample-frames per second.
- * An implementation must support sample-rates in at least
- * the range 22050 to 96000.
- * @property {number} sampleRate - Buffer-size for how frequently the audioprocess event is dispatched.
- * @memberof StereoAudioRecorder
- * @example
- * recorder = new StereoAudioRecorder(mediaStream, {
- * sampleRate: 44100
- * });
- */
- var sampleRate = typeof config.sampleRate !== 'undefined' ? config.sampleRate : context.sampleRate || 44100;
-
- if (sampleRate < 22050 || sampleRate > 96000) {
- // Ref: http://stackoverflow.com/a/26303918/552182
- if (!config.disableLogs) {
- console.log('sample-rate must be under range 22050 and 96000.');
- }
- }
-
- if (!config.disableLogs) {
- if (config.desiredSampRate) {
- console.log('Desired sample-rate: ' + config.desiredSampRate);
- }
- }
-
- var isPaused = false;
- /**
- * This method pauses the recording process.
- * @method
- * @memberof StereoAudioRecorder
- * @example
- * recorder.pause();
- */
- this.pause = function () {
- isPaused = true;
- };
-
- /**
- * This method resumes the recording process.
- * @method
- * @memberof StereoAudioRecorder
- * @example
- * recorder.resume();
- */
- this.resume = function () {
- if (isMediaStreamActive() === false) {
- throw 'Please make sure MediaStream is active.';
- }
-
- if (!recording) {
- if (!config.disableLogs) {
- console.log('Seems recording has been restarted.');
- }
- this.record();
- return;
- }
-
- isPaused = false;
- };
-
- /**
- * This method resets currently recorded data.
- * @method
- * @memberof StereoAudioRecorder
- * @example
- * recorder.clearRecordedData();
- */
- this.clearRecordedData = function () {
- config.checkForInactiveTracks = false;
-
- if (recording) {
- this.stop(clearRecordedDataCB);
- }
-
- clearRecordedDataCB();
- };
-
- function resetVariables() {
- leftchannel = [];
- rightchannel = [];
- recordingLength = 0;
- isAudioProcessStarted = false;
- recording = false;
- isPaused = false;
- context = null;
-
- self.leftchannel = leftchannel;
- self.rightchannel = rightchannel;
- self.numberOfAudioChannels = numberOfAudioChannels;
- self.desiredSampRate = desiredSampRate;
- self.sampleRate = sampleRate;
- self.recordingLength = recordingLength;
-
- intervalsBasedBuffers = {
- left: [],
- right: [],
- recordingLength: 0
- };
- }
-
- function clearRecordedDataCB() {
- if (jsAudioNode) {
- jsAudioNode.onaudioprocess = null;
- jsAudioNode.disconnect();
- jsAudioNode = null;
- }
-
- if (audioInput) {
- audioInput.disconnect();
- audioInput = null;
- }
-
- resetVariables();
- }
-
- // for debugging
- this.name = 'StereoAudioRecorder';
- this.toString = function () {
- return this.name;
- };
-
- var isAudioProcessStarted = false;
-
- function onAudioProcessDataAvailable(e) {
- if (isPaused) {
- return;
- }
-
- if (isMediaStreamActive() === false) {
- if (!config.disableLogs) {
- console.log('MediaStream seems stopped.');
- }
- jsAudioNode.disconnect();
- recording = false;
- }
-
- if (!recording) {
- if (audioInput) {
- audioInput.disconnect();
- audioInput = null;
- }
- return;
- }
-
- /**
- * This method is called on "onaudioprocess" event's first invocation.
- * @method {function} onAudioProcessStarted
- * @memberof StereoAudioRecorder
- * @example
- * recorder.onAudioProcessStarted: function() { };
- */
- if (!isAudioProcessStarted) {
- isAudioProcessStarted = true;
- if (config.onAudioProcessStarted) {
- config.onAudioProcessStarted();
- }
-
- if (config.initCallback) {
- config.initCallback();
- }
- }
-
- var left = e.inputBuffer.getChannelData(0);
-
- // we clone the samples
- var chLeft = new Float32Array(left);
- leftchannel.push(chLeft);
-
- if (numberOfAudioChannels === 2) {
- var right = e.inputBuffer.getChannelData(1);
- var chRight = new Float32Array(right);
- rightchannel.push(chRight);
- }
-
- recordingLength += bufferSize;
-
- // export raw PCM
- self.recordingLength = recordingLength;
-
- if (typeof config.timeSlice !== 'undefined') {
- intervalsBasedBuffers.recordingLength += bufferSize;
- intervalsBasedBuffers.left.push(chLeft);
-
- if (numberOfAudioChannels === 2) {
- intervalsBasedBuffers.right.push(chRight);
- }
- }
- }
-
- jsAudioNode.onaudioprocess = onAudioProcessDataAvailable;
-
- // to prevent self audio to be connected with speakers
- if (context.createMediaStreamDestination) {
- jsAudioNode.connect(context.createMediaStreamDestination());
- } else {
- jsAudioNode.connect(context.destination);
- }
-
- // export raw PCM
- this.leftchannel = leftchannel;
- this.rightchannel = rightchannel;
- this.numberOfAudioChannels = numberOfAudioChannels;
- this.desiredSampRate = desiredSampRate;
- this.sampleRate = sampleRate;
- self.recordingLength = recordingLength;
-
- // helper for intervals based blobs
- var intervalsBasedBuffers = {
- left: [],
- right: [],
- recordingLength: 0
- };
-
- // this looper is used to support intervals based blobs (via timeSlice+ondataavailable)
- function looper() {
- if (!recording || typeof config.ondataavailable !== 'function' || typeof config.timeSlice === 'undefined') {
- return;
- }
-
- if (intervalsBasedBuffers.left.length) {
- mergeLeftRightBuffers({
- desiredSampRate: desiredSampRate,
- sampleRate: sampleRate,
- numberOfAudioChannels: numberOfAudioChannels,
- internalInterleavedLength: intervalsBasedBuffers.recordingLength,
- leftBuffers: intervalsBasedBuffers.left,
- rightBuffers: numberOfAudioChannels === 1 ? [] : intervalsBasedBuffers.right
- }, function (buffer, view) {
- var blob = new Blob([view], {
- type: 'audio/wav'
- });
- config.ondataavailable(blob);
-
- setTimeout(looper, config.timeSlice);
- });
-
- intervalsBasedBuffers = {
- left: [],
- right: [],
- recordingLength: 0
- };
- } else {
- setTimeout(looper, config.timeSlice);
- }
- }
- }
-
- if (typeof RecordRTC !== 'undefined') {
- RecordRTC.StereoAudioRecorder = StereoAudioRecorder;
- }
-
- // _________________
- // CanvasRecorder.js
-
- /**
- * CanvasRecorder is a standalone class used by {@link RecordRTC} to bring HTML5-Canvas recording into video WebM. It uses HTML2Canvas library and runs top over {@link Whammy}.
- * @summary HTML2Canvas recording into video WebM.
- * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT}
- * @author {@link https://MuazKhan.com|Muaz Khan}
- * @typedef CanvasRecorder
- * @class
- * @example
- * var recorder = new CanvasRecorder(htmlElement, { disableLogs: true, useWhammyRecorder: true });
- * recorder.record();
- * recorder.stop(function(blob) {
- * video.src = URL.createObjectURL(blob);
- * });
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- * @param {HTMLElement} htmlElement - querySelector/getElementById/getElementsByTagName[0]/etc.
- * @param {object} config - {disableLogs:true, initCallback: function}
- */
-
- function CanvasRecorder(htmlElement, config) {
- if (typeof html2canvas === 'undefined') {
- throw 'Please link: https://www.webrtc-experiment.com/screenshot.js';
- }
-
- config = config || {};
- if (!config.frameInterval) {
- config.frameInterval = 10;
- }
-
- // via DetectRTC.js
- var isCanvasSupportsStreamCapturing = false;
- ['captureStream', 'mozCaptureStream', 'webkitCaptureStream'].forEach(function (item) {
- if (item in document.createElement('canvas')) {
- isCanvasSupportsStreamCapturing = true;
- }
- });
-
- var _isChrome = (!!window.webkitRTCPeerConnection || !!window.webkitGetUserMedia) && !!window.chrome;
-
- var chromeVersion = 50;
- var matchArray = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
- if (_isChrome && matchArray && matchArray[2]) {
- chromeVersion = parseInt(matchArray[2], 10);
- }
-
- if (_isChrome && chromeVersion < 52) {
- isCanvasSupportsStreamCapturing = false;
- }
-
- if (config.useWhammyRecorder) {
- isCanvasSupportsStreamCapturing = false;
- }
-
- var globalCanvas, mediaStreamRecorder;
-
- if (isCanvasSupportsStreamCapturing) {
- if (!config.disableLogs) {
- console.log('Your browser supports both MediRecorder API and canvas.captureStream!');
- }
-
- if (htmlElement instanceof HTMLCanvasElement) {
- globalCanvas = htmlElement;
- } else if (htmlElement instanceof CanvasRenderingContext2D) {
- globalCanvas = htmlElement.canvas;
- } else {
- throw 'Please pass either HTMLCanvasElement or CanvasRenderingContext2D.';
- }
- } else if (!!navigator.mozGetUserMedia) {
- if (!config.disableLogs) {
- console.error('Canvas recording is NOT supported in Firefox.');
- }
- }
-
- var isRecording;
-
- /**
- * This method records Canvas.
- * @method
- * @memberof CanvasRecorder
- * @example
- * recorder.record();
- */
- this.record = function () {
- isRecording = true;
-
- if (isCanvasSupportsStreamCapturing && !config.useWhammyRecorder) {
- // CanvasCaptureMediaStream
- var canvasMediaStream;
- if ('captureStream' in globalCanvas) {
- canvasMediaStream = globalCanvas.captureStream(25); // 25 FPS
- } else if ('mozCaptureStream' in globalCanvas) {
- canvasMediaStream = globalCanvas.mozCaptureStream(25);
- } else if ('webkitCaptureStream' in globalCanvas) {
- canvasMediaStream = globalCanvas.webkitCaptureStream(25);
- }
-
- try {
- var mdStream = new MediaStream();
- mdStream.addTrack(getTracks(canvasMediaStream, 'video')[0]);
- canvasMediaStream = mdStream;
- } catch (e) { }
-
- if (!canvasMediaStream) {
- throw 'captureStream API are NOT available.';
- }
-
- // Note: Jan 18, 2016 status is that,
- // Firefox MediaRecorder API can't record CanvasCaptureMediaStream object.
- mediaStreamRecorder = new MediaStreamRecorder(canvasMediaStream, {
- mimeType: config.mimeType || 'video/webm'
- });
- mediaStreamRecorder.record();
- } else {
- whammy.frames = [];
- lastTime = new Date().getTime();
- drawCanvasFrame();
- }
-
- if (config.initCallback) {
- config.initCallback();
- }
- };
-
- this.getWebPImages = function (callback) {
- if (htmlElement.nodeName.toLowerCase() !== 'canvas') {
- callback();
- return;
- }
-
- var framesLength = whammy.frames.length;
- whammy.frames.forEach(function (frame, idx) {
- var framesRemaining = framesLength - idx;
- if (!config.disableLogs) {
- console.log(framesRemaining + '/' + framesLength + ' frames remaining');
- }
-
- if (config.onEncodingCallback) {
- config.onEncodingCallback(framesRemaining, framesLength);
- }
-
- var webp = frame.image.toDataURL('image/webp', 1);
- whammy.frames[idx].image = webp;
- });
-
- if (!config.disableLogs) {
- console.log('Generating WebM');
- }
-
- callback();
- };
-
- /**
- * This method stops recording Canvas.
- * @param {function} callback - Callback function, that is used to pass recorded blob back to the callee.
- * @method
- * @memberof CanvasRecorder
- * @example
- * recorder.stop(function(blob) {
- * video.src = URL.createObjectURL(blob);
- * });
- */
- this.stop = function (callback) {
- isRecording = false;
-
- var that = this;
-
- if (isCanvasSupportsStreamCapturing && mediaStreamRecorder) {
- mediaStreamRecorder.stop(callback);
- return;
- }
-
- this.getWebPImages(function () {
- /**
- * @property {Blob} blob - Recorded frames in video/webm blob.
- * @memberof CanvasRecorder
- * @example
- * recorder.stop(function() {
- * var blob = recorder.blob;
- * });
- */
- whammy.compile(function (blob) {
- if (!config.disableLogs) {
- console.log('Recording finished!');
- }
-
- that.blob = blob;
-
- if (that.blob.forEach) {
- that.blob = new Blob([], {
- type: 'video/webm'
- });
- }
-
- if (callback) {
- callback(that.blob);
- }
-
- whammy.frames = [];
- });
- });
- };
-
- var isPausedRecording = false;
-
- /**
- * This method pauses the recording process.
- * @method
- * @memberof CanvasRecorder
- * @example
- * recorder.pause();
- */
- this.pause = function () {
- isPausedRecording = true;
-
- if (mediaStreamRecorder instanceof MediaStreamRecorder) {
- mediaStreamRecorder.pause();
- return;
- }
- };
-
- /**
- * This method resumes the recording process.
- * @method
- * @memberof CanvasRecorder
- * @example
- * recorder.resume();
- */
- this.resume = function () {
- isPausedRecording = false;
-
- if (mediaStreamRecorder instanceof MediaStreamRecorder) {
- mediaStreamRecorder.resume();
- return;
- }
-
- if (!isRecording) {
- this.record();
- }
- };
-
- /**
- * This method resets currently recorded data.
- * @method
- * @memberof CanvasRecorder
- * @example
- * recorder.clearRecordedData();
- */
- this.clearRecordedData = function () {
- if (isRecording) {
- this.stop(clearRecordedDataCB);
- }
- clearRecordedDataCB();
- };
-
- function clearRecordedDataCB() {
- whammy.frames = [];
- isRecording = false;
- isPausedRecording = false;
- }
-
- // for debugging
- this.name = 'CanvasRecorder';
- this.toString = function () {
- return this.name;
- };
-
- function cloneCanvas() {
- //create a new canvas
- var newCanvas = document.createElement('canvas');
- var context = newCanvas.getContext('2d');
-
- //set dimensions
- newCanvas.width = htmlElement.width;
- newCanvas.height = htmlElement.height;
-
- //apply the old canvas to the new one
- context.drawImage(htmlElement, 0, 0);
-
- //return the new canvas
- return newCanvas;
- }
-
- function drawCanvasFrame() {
- if (isPausedRecording) {
- lastTime = new Date().getTime();
- return setTimeout(drawCanvasFrame, 500);
- }
-
- if (htmlElement.nodeName.toLowerCase() === 'canvas') {
- var duration = new Date().getTime() - lastTime;
- // via #206, by Jack i.e. @Seymourr
- lastTime = new Date().getTime();
-
- whammy.frames.push({
- image: cloneCanvas(),
- duration: duration
- });
-
- if (isRecording) {
- setTimeout(drawCanvasFrame, config.frameInterval);
- }
- return;
- }
-
- html2canvas(htmlElement, {
- grabMouse: typeof config.showMousePointer === 'undefined' || config.showMousePointer,
- onrendered: function (canvas) {
- var duration = new Date().getTime() - lastTime;
- if (!duration) {
- return setTimeout(drawCanvasFrame, config.frameInterval);
- }
-
- // via #206, by Jack i.e. @Seymourr
- lastTime = new Date().getTime();
-
- whammy.frames.push({
- image: canvas.toDataURL('image/webp', 1),
- duration: duration
- });
-
- if (isRecording) {
- setTimeout(drawCanvasFrame, config.frameInterval);
- }
- }
- });
- }
-
- var lastTime = new Date().getTime();
-
- var whammy = new Whammy.Video(100);
- }
-
- if (typeof RecordRTC !== 'undefined') {
- RecordRTC.CanvasRecorder = CanvasRecorder;
- }
-
- // _________________
- // WhammyRecorder.js
-
- /**
- * WhammyRecorder is a standalone class used by {@link RecordRTC} to bring video recording in Chrome. It runs top over {@link Whammy}.
- * @summary Video recording feature in Chrome.
- * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT}
- * @author {@link https://MuazKhan.com|Muaz Khan}
- * @typedef WhammyRecorder
- * @class
- * @example
- * var recorder = new WhammyRecorder(mediaStream);
- * recorder.record();
- * recorder.stop(function(blob) {
- * video.src = URL.createObjectURL(blob);
- * });
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- * @param {MediaStream} mediaStream - MediaStream object fetched using getUserMedia API or generated using captureStreamUntilEnded or WebAudio API.
- * @param {object} config - {disableLogs: true, initCallback: function, video: HTMLVideoElement, etc.}
- */
-
- function WhammyRecorder(mediaStream, config) {
-
- config = config || {};
-
- if (!config.frameInterval) {
- config.frameInterval = 10;
- }
-
- if (!config.disableLogs) {
- console.log('Using frames-interval:', config.frameInterval);
- }
-
- /**
- * This method records video.
- * @method
- * @memberof WhammyRecorder
- * @example
- * recorder.record();
- */
- this.record = function () {
- if (!config.width) {
- config.width = 320;
- }
-
- if (!config.height) {
- config.height = 240;
- }
-
- if (!config.video) {
- config.video = {
- width: config.width,
- height: config.height
- };
- }
-
- if (!config.canvas) {
- config.canvas = {
- width: config.width,
- height: config.height
- };
- }
-
- canvas.width = config.canvas.width || 320;
- canvas.height = config.canvas.height || 240;
-
- context = canvas.getContext('2d');
-
- // setting defaults
- if (config.video && config.video instanceof HTMLVideoElement) {
- video = config.video.cloneNode();
-
- if (config.initCallback) {
- config.initCallback();
- }
- } else {
- video = document.createElement('video');
-
- setSrcObject(mediaStream, video);
-
- video.onloadedmetadata = function () { // "onloadedmetadata" may NOT work in FF?
- if (config.initCallback) {
- config.initCallback();
- }
- };
-
- video.width = config.video.width;
- video.height = config.video.height;
- }
-
- video.muted = true;
- video.play();
-
- lastTime = new Date().getTime();
- whammy = new Whammy.Video();
-
- if (!config.disableLogs) {
- console.log('canvas resolutions', canvas.width, '*', canvas.height);
- console.log('video width/height', video.width || canvas.width, '*', video.height || canvas.height);
- }
-
- drawFrames(config.frameInterval);
- };
-
- /**
- * Draw and push frames to Whammy
- * @param {integer} frameInterval - set minimum interval (in milliseconds) between each time we push a frame to Whammy
- */
- function drawFrames(frameInterval) {
- frameInterval = typeof frameInterval !== 'undefined' ? frameInterval : 10;
-
- var duration = new Date().getTime() - lastTime;
- if (!duration) {
- return setTimeout(drawFrames, frameInterval, frameInterval);
- }
-
- if (isPausedRecording) {
- lastTime = new Date().getTime();
- return setTimeout(drawFrames, 100);
- }
-
- // via #206, by Jack i.e. @Seymourr
- lastTime = new Date().getTime();
-
- if (video.paused) {
- // via: https://github.com/muaz-khan/WebRTC-Experiment/pull/316
- // Tweak for Android Chrome
- video.play();
- }
-
- context.drawImage(video, 0, 0, canvas.width, canvas.height);
- whammy.frames.push({
- duration: duration,
- image: canvas.toDataURL('image/webp')
- });
-
- if (!isStopDrawing) {
- setTimeout(drawFrames, frameInterval, frameInterval);
- }
- }
-
- function asyncLoop(o) {
- var i = -1,
- length = o.length;
-
- (function loop() {
- i++;
- if (i === length) {
- o.callback();
- return;
- }
-
- // "setTimeout" added by Jim McLeod
- setTimeout(function () {
- o.functionToLoop(loop, i);
- }, 1);
- })();
- }
-
-
- /**
- * remove black frames from the beginning to the specified frame
- * @param {Array} _frames - array of frames to be checked
- * @param {number} _framesToCheck - number of frame until check will be executed (-1 - will drop all frames until frame not matched will be found)
- * @param {number} _pixTolerance - 0 - very strict (only black pixel color) ; 1 - all
- * @param {number} _frameTolerance - 0 - very strict (only black frame color) ; 1 - all
- * @returns {Array} - array of frames
- */
- // pull#293 by @volodalexey
- function dropBlackFrames(_frames, _framesToCheck, _pixTolerance, _frameTolerance, callback) {
- var localCanvas = document.createElement('canvas');
- localCanvas.width = canvas.width;
- localCanvas.height = canvas.height;
- var context2d = localCanvas.getContext('2d');
- var resultFrames = [];
-
- var checkUntilNotBlack = _framesToCheck === -1;
- var endCheckFrame = (_framesToCheck && _framesToCheck > 0 && _framesToCheck <= _frames.length) ?
- _framesToCheck : _frames.length;
- var sampleColor = {
- r: 0,
- g: 0,
- b: 0
- };
- var maxColorDifference = Math.sqrt(
- Math.pow(255, 2) +
- Math.pow(255, 2) +
- Math.pow(255, 2)
- );
- var pixTolerance = _pixTolerance && _pixTolerance >= 0 && _pixTolerance <= 1 ? _pixTolerance : 0;
- var frameTolerance = _frameTolerance && _frameTolerance >= 0 && _frameTolerance <= 1 ? _frameTolerance : 0;
- var doNotCheckNext = false;
-
- asyncLoop({
- length: endCheckFrame,
- functionToLoop: function (loop, f) {
- var matchPixCount, endPixCheck, maxPixCount;
-
- var finishImage = function () {
- if (!doNotCheckNext && maxPixCount - matchPixCount <= maxPixCount * frameTolerance); else {
- // console.log('frame is passed : ' + f);
- if (checkUntilNotBlack) {
- doNotCheckNext = true;
- }
- resultFrames.push(_frames[f]);
- }
- loop();
- };
-
- if (!doNotCheckNext) {
- var image = new Image();
- image.onload = function () {
- context2d.drawImage(image, 0, 0, canvas.width, canvas.height);
- var imageData = context2d.getImageData(0, 0, canvas.width, canvas.height);
- matchPixCount = 0;
- endPixCheck = imageData.data.length;
- maxPixCount = imageData.data.length / 4;
-
- for (var pix = 0; pix < endPixCheck; pix += 4) {
- var currentColor = {
- r: imageData.data[pix],
- g: imageData.data[pix + 1],
- b: imageData.data[pix + 2]
- };
- var colorDifference = Math.sqrt(
- Math.pow(currentColor.r - sampleColor.r, 2) +
- Math.pow(currentColor.g - sampleColor.g, 2) +
- Math.pow(currentColor.b - sampleColor.b, 2)
- );
- // difference in color it is difference in color vectors (r1,g1,b1) <=> (r2,g2,b2)
- if (colorDifference <= maxColorDifference * pixTolerance) {
- matchPixCount++;
- }
- }
- finishImage();
- };
- image.src = _frames[f].image;
- } else {
- finishImage();
- }
- },
- callback: function () {
- resultFrames = resultFrames.concat(_frames.slice(endCheckFrame));
-
- if (resultFrames.length <= 0) {
- // at least one last frame should be available for next manipulation
- // if total duration of all frames will be < 1000 than ffmpeg doesn't work well...
- resultFrames.push(_frames[_frames.length - 1]);
- }
- callback(resultFrames);
- }
- });
- }
-
- var isStopDrawing = false;
-
- /**
- * This method stops recording video.
- * @param {function} callback - Callback function, that is used to pass recorded blob back to the callee.
- * @method
- * @memberof WhammyRecorder
- * @example
- * recorder.stop(function(blob) {
- * video.src = URL.createObjectURL(blob);
- * });
- */
- this.stop = function (callback) {
- callback = callback || function () { };
-
- isStopDrawing = true;
-
- var _this = this;
- // analyse of all frames takes some time!
- setTimeout(function () {
- // e.g. dropBlackFrames(frames, 10, 1, 1) - will cut all 10 frames
- // e.g. dropBlackFrames(frames, 10, 0.5, 0.5) - will analyse 10 frames
- // e.g. dropBlackFrames(frames, 10) === dropBlackFrames(frames, 10, 0, 0) - will analyse 10 frames with strict black color
- dropBlackFrames(whammy.frames, -1, null, null, function (frames) {
- whammy.frames = frames;
-
- // to display advertisement images!
- if (config.advertisement && config.advertisement.length) {
- whammy.frames = config.advertisement.concat(whammy.frames);
- }
-
- /**
- * @property {Blob} blob - Recorded frames in video/webm blob.
- * @memberof WhammyRecorder
- * @example
- * recorder.stop(function() {
- * var blob = recorder.blob;
- * });
- */
- whammy.compile(function (blob) {
- _this.blob = blob;
-
- if (_this.blob.forEach) {
- _this.blob = new Blob([], {
- type: 'video/webm'
- });
- }
-
- if (callback) {
- callback(_this.blob);
- }
- });
- });
- }, 10);
- };
-
- var isPausedRecording = false;
-
- /**
- * This method pauses the recording process.
- * @method
- * @memberof WhammyRecorder
- * @example
- * recorder.pause();
- */
- this.pause = function () {
- isPausedRecording = true;
- };
-
- /**
- * This method resumes the recording process.
- * @method
- * @memberof WhammyRecorder
- * @example
- * recorder.resume();
- */
- this.resume = function () {
- isPausedRecording = false;
-
- if (isStopDrawing) {
- this.record();
- }
- };
-
- /**
- * This method resets currently recorded data.
- * @method
- * @memberof WhammyRecorder
- * @example
- * recorder.clearRecordedData();
- */
- this.clearRecordedData = function () {
- if (!isStopDrawing) {
- this.stop(clearRecordedDataCB);
- }
- clearRecordedDataCB();
- };
-
- function clearRecordedDataCB() {
- whammy.frames = [];
- isStopDrawing = true;
- isPausedRecording = false;
- }
-
- // for debugging
- this.name = 'WhammyRecorder';
- this.toString = function () {
- return this.name;
- };
-
- var canvas = document.createElement('canvas');
- var context = canvas.getContext('2d');
-
- var video;
- var lastTime;
- var whammy;
- }
-
- if (typeof RecordRTC !== 'undefined') {
- RecordRTC.WhammyRecorder = WhammyRecorder;
- }
-
- // https://github.com/antimatter15/whammy/blob/master/LICENSE
- // _________
- // Whammy.js
-
- // todo: Firefox now supports webp for webm containers!
- // their MediaRecorder implementation works well!
- // should we provide an option to record via Whammy.js or MediaRecorder API is a better solution?
-
- /**
- * Whammy is a standalone class used by {@link RecordRTC} to bring video recording in Chrome. It is written by {@link https://github.com/antimatter15|antimatter15}
- * @summary A real time javascript webm encoder based on a canvas hack.
- * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT}
- * @author {@link https://MuazKhan.com|Muaz Khan}
- * @typedef Whammy
- * @class
- * @example
- * var recorder = new Whammy().Video(15);
- * recorder.add(context || canvas || dataURL);
- * var output = recorder.compile();
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- */
-
- var Whammy = (function () {
- // a more abstract-ish API
-
- function WhammyVideo(duration) {
- this.frames = [];
- this.duration = duration || 1;
- this.quality = 0.8;
- }
-
- /**
- * Pass Canvas or Context or image/webp(string) to {@link Whammy} encoder.
- * @method
- * @memberof Whammy
- * @example
- * recorder = new Whammy().Video(0.8, 100);
- * recorder.add(canvas || context || 'image/webp');
- * @param {string} frame - Canvas || Context || image/webp
- * @param {number} duration - Stick a duration (in milliseconds)
- */
- WhammyVideo.prototype.add = function (frame, duration) {
- if ('canvas' in frame) { //CanvasRenderingContext2D
- frame = frame.canvas;
- }
-
- if ('toDataURL' in frame) {
- frame = frame.toDataURL('image/webp', this.quality);
- }
-
- if (!(/^data:image\/webp;base64,/ig).test(frame)) {
- throw 'Input must be formatted properly as a base64 encoded DataURI of type image/webp';
- }
- this.frames.push({
- image: frame,
- duration: duration || this.duration
- });
- };
-
- function processInWebWorker(_function) {
- var blob = URL.createObjectURL(new Blob([_function.toString(),
- 'this.onmessage = function (eee) {' + _function.name + '(eee.data);}'
- ], {
- type: 'application/javascript'
- }));
-
- var worker = new Worker(blob);
- URL.revokeObjectURL(blob);
- return worker;
- }
-
- function whammyInWebWorker(frames) {
- function ArrayToWebM(frames) {
- var info = checkFrames(frames);
- if (!info) {
- return [];
- }
-
- var clusterMaxDuration = 30000;
-
- var EBML = [{
- 'id': 0x1a45dfa3, // EBML
- 'data': [{
- 'data': 1,
- 'id': 0x4286 // EBMLVersion
- }, {
- 'data': 1,
- 'id': 0x42f7 // EBMLReadVersion
- }, {
- 'data': 4,
- 'id': 0x42f2 // EBMLMaxIDLength
- }, {
- 'data': 8,
- 'id': 0x42f3 // EBMLMaxSizeLength
- }, {
- 'data': 'webm',
- 'id': 0x4282 // DocType
- }, {
- 'data': 2,
- 'id': 0x4287 // DocTypeVersion
- }, {
- 'data': 2,
- 'id': 0x4285 // DocTypeReadVersion
- }]
- }, {
- 'id': 0x18538067, // Segment
- 'data': [{
- 'id': 0x1549a966, // Info
- 'data': [{
- 'data': 1e6, //do things in millisecs (num of nanosecs for duration scale)
- 'id': 0x2ad7b1 // TimecodeScale
- }, {
- 'data': 'whammy',
- 'id': 0x4d80 // MuxingApp
- }, {
- 'data': 'whammy',
- 'id': 0x5741 // WritingApp
- }, {
- 'data': doubleToString(info.duration),
- 'id': 0x4489 // Duration
- }]
- }, {
- 'id': 0x1654ae6b, // Tracks
- 'data': [{
- 'id': 0xae, // TrackEntry
- 'data': [{
- 'data': 1,
- 'id': 0xd7 // TrackNumber
- }, {
- 'data': 1,
- 'id': 0x73c5 // TrackUID
- }, {
- 'data': 0,
- 'id': 0x9c // FlagLacing
- }, {
- 'data': 'und',
- 'id': 0x22b59c // Language
- }, {
- 'data': 'V_VP8',
- 'id': 0x86 // CodecID
- }, {
- 'data': 'VP8',
- 'id': 0x258688 // CodecName
- }, {
- 'data': 1,
- 'id': 0x83 // TrackType
- }, {
- 'id': 0xe0, // Video
- 'data': [{
- 'data': info.width,
- 'id': 0xb0 // PixelWidth
- }, {
- 'data': info.height,
- 'id': 0xba // PixelHeight
- }]
- }]
- }]
- }]
- }];
-
- //Generate clusters (max duration)
- var frameNumber = 0;
- var clusterTimecode = 0;
- while (frameNumber < frames.length) {
-
- var clusterFrames = [];
- var clusterDuration = 0;
- do {
- clusterFrames.push(frames[frameNumber]);
- clusterDuration += frames[frameNumber].duration;
- frameNumber++;
- } while (frameNumber < frames.length && clusterDuration < clusterMaxDuration);
-
- var clusterCounter = 0;
- var cluster = {
- 'id': 0x1f43b675, // Cluster
- 'data': getClusterData(clusterTimecode, clusterCounter, clusterFrames)
- }; //Add cluster to segment
- EBML[1].data.push(cluster);
- clusterTimecode += clusterDuration;
- }
-
- return generateEBML(EBML);
- }
-
- function getClusterData(clusterTimecode, clusterCounter, clusterFrames) {
- return [{
- 'data': clusterTimecode,
- 'id': 0xe7 // Timecode
- }].concat(clusterFrames.map(function (webp) {
- var block = makeSimpleBlock({
- discardable: 0,
- frame: webp.data.slice(4),
- invisible: 0,
- keyframe: 1,
- lacing: 0,
- trackNum: 1,
- timecode: Math.round(clusterCounter)
- });
- clusterCounter += webp.duration;
- return {
- data: block,
- id: 0xa3
- };
- }));
- }
-
- // sums the lengths of all the frames and gets the duration
-
- function checkFrames(frames) {
- if (!frames[0]) {
- postMessage({
- error: 'Something went wrong. Maybe WebP format is not supported in the current browser.'
- });
- return;
- }
-
- var width = frames[0].width,
- height = frames[0].height,
- duration = frames[0].duration;
-
- for (var i = 1; i < frames.length; i++) {
- duration += frames[i].duration;
- }
- return {
- duration: duration,
- width: width,
- height: height
- };
- }
-
- function numToBuffer(num) {
- var parts = [];
- while (num > 0) {
- parts.push(num & 0xff);
- num = num >> 8;
- }
- return new Uint8Array(parts.reverse());
- }
-
- function strToBuffer(str) {
- return new Uint8Array(str.split('').map(function (e) {
- return e.charCodeAt(0);
- }));
- }
-
- function bitsToBuffer(bits) {
- var data = [];
- var pad = (bits.length % 8) ? (new Array(1 + 8 - (bits.length % 8))).join('0') : '';
- bits = pad + bits;
- for (var i = 0; i < bits.length; i += 8) {
- data.push(parseInt(bits.substr(i, 8), 2));
- }
- return new Uint8Array(data);
- }
-
- function generateEBML(json) {
- var ebml = [];
- for (var i = 0; i < json.length; i++) {
- var data = json[i].data;
-
- if (typeof data === 'object') {
- data = generateEBML(data);
- }
-
- if (typeof data === 'number') {
- data = bitsToBuffer(data.toString(2));
- }
-
- if (typeof data === 'string') {
- data = strToBuffer(data);
- }
-
- var len = data.size || data.byteLength || data.length;
- var zeroes = Math.ceil(Math.ceil(Math.log(len) / Math.log(2)) / 8);
- var sizeToString = len.toString(2);
- var padded = (new Array((zeroes * 7 + 7 + 1) - sizeToString.length)).join('0') + sizeToString;
- var size = (new Array(zeroes)).join('0') + '1' + padded;
-
- ebml.push(numToBuffer(json[i].id));
- ebml.push(bitsToBuffer(size));
- ebml.push(data);
- }
-
- return new Blob(ebml, {
- type: 'video/webm'
- });
- }
-
- function makeSimpleBlock(data) {
- var flags = 0;
-
- if (data.keyframe) {
- flags |= 128;
- }
-
- if (data.invisible) {
- flags |= 8;
- }
-
- if (data.lacing) {
- flags |= (data.lacing << 1);
- }
-
- if (data.discardable) {
- flags |= 1;
- }
-
- if (data.trackNum > 127) {
- throw 'TrackNumber > 127 not supported';
- }
-
- var out = [data.trackNum | 0x80, data.timecode >> 8, data.timecode & 0xff, flags].map(function (e) {
- return String.fromCharCode(e);
- }).join('') + data.frame;
-
- return out;
- }
-
- function parseWebP(riff) {
- var VP8 = riff.RIFF[0].WEBP[0];
-
- var frameStart = VP8.indexOf('\x9d\x01\x2a'); // A VP8 keyframe starts with the 0x9d012a header
- for (var i = 0, c = []; i < 4; i++) {
- c[i] = VP8.charCodeAt(frameStart + 3 + i);
- }
-
- var width, height, tmp;
-
- //the code below is literally copied verbatim from the bitstream spec
- tmp = (c[1] << 8) | c[0];
- width = tmp & 0x3FFF;
- tmp = (c[3] << 8) | c[2];
- height = tmp & 0x3FFF;
- return {
- width: width,
- height: height,
- data: VP8,
- riff: riff
- };
- }
-
- function getStrLength(string, offset) {
- return parseInt(string.substr(offset + 4, 4).split('').map(function (i) {
- var unpadded = i.charCodeAt(0).toString(2);
- return (new Array(8 - unpadded.length + 1)).join('0') + unpadded;
- }).join(''), 2);
- }
-
- function parseRIFF(string) {
- var offset = 0;
- var chunks = {};
-
- while (offset < string.length) {
- var id = string.substr(offset, 4);
- var len = getStrLength(string, offset);
- var data = string.substr(offset + 4 + 4, len);
- offset += 4 + 4 + len;
- chunks[id] = chunks[id] || [];
-
- if (id === 'RIFF' || id === 'LIST') {
- chunks[id].push(parseRIFF(data));
- } else {
- chunks[id].push(data);
- }
- }
- return chunks;
- }
-
- function doubleToString(num) {
- return [].slice.call(
- new Uint8Array((new Float64Array([num])).buffer), 0).map(function (e) {
- return String.fromCharCode(e);
- }).reverse().join('');
- }
-
- var webm = new ArrayToWebM(frames.map(function (frame) {
- var webp = parseWebP(parseRIFF(atob(frame.image.slice(23))));
- webp.duration = frame.duration;
- return webp;
- }));
-
- postMessage(webm);
- }
-
- /**
- * Encodes frames in WebM container. It uses WebWorkinvoke to invoke 'ArrayToWebM' method.
- * @param {function} callback - Callback function, that is used to pass recorded blob back to the callee.
- * @method
- * @memberof Whammy
- * @example
- * recorder = new Whammy().Video(0.8, 100);
- * recorder.compile(function(blob) {
- * // blob.size - blob.type
- * });
- */
- WhammyVideo.prototype.compile = function (callback) {
- var webWorker = processInWebWorker(whammyInWebWorker);
-
- webWorker.onmessage = function (event) {
- if (event.data.error) {
- console.error(event.data.error);
- return;
- }
- callback(event.data);
- };
-
- webWorker.postMessage(this.frames);
- };
-
- return {
- /**
- * A more abstract-ish API.
- * @method
- * @memberof Whammy
- * @example
- * recorder = new Whammy().Video(0.8, 100);
- * @param {?number} speed - 0.8
- * @param {?number} quality - 100
- */
- Video: WhammyVideo
- };
- })();
-
- if (typeof RecordRTC !== 'undefined') {
- RecordRTC.Whammy = Whammy;
- }
-
- // ______________ (indexed-db)
- // DiskStorage.js
-
- /**
- * DiskStorage is a standalone object used by {@link RecordRTC} to store recorded blobs in IndexedDB storage.
- * @summary Writing blobs into IndexedDB.
- * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT}
- * @author {@link https://MuazKhan.com|Muaz Khan}
- * @example
- * DiskStorage.Store({
- * audioBlob: yourAudioBlob,
- * videoBlob: yourVideoBlob,
- * gifBlob : yourGifBlob
- * });
- * DiskStorage.Fetch(function(dataURL, type) {
- * if(type === 'audioBlob') { }
- * if(type === 'videoBlob') { }
- * if(type === 'gifBlob') { }
- * });
- * // DiskStorage.dataStoreName = 'recordRTC';
- * // DiskStorage.onError = function(error) { };
- * @property {function} init - This method must be called once to initialize IndexedDB ObjectStore. Though, it is auto-used internally.
- * @property {function} Fetch - This method fetches stored blobs from IndexedDB.
- * @property {function} Store - This method stores blobs in IndexedDB.
- * @property {function} onError - This function is invoked for any known/unknown error.
- * @property {string} dataStoreName - Name of the ObjectStore created in IndexedDB storage.
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- */
-
-
- var DiskStorage = {
- /**
- * This method must be called once to initialize IndexedDB ObjectStore. Though, it is auto-used internally.
- * @method
- * @memberof DiskStorage
- * @internal
- * @example
- * DiskStorage.init();
- */
- init: function () {
- var self = this;
-
- if (typeof indexedDB === 'undefined' || typeof indexedDB.open === 'undefined') {
- console.error('IndexedDB API are not available in this browser.');
- return;
- }
-
- var dbVersion = 1;
- var dbName = this.dbName || location.href.replace(/\/|:|#|%|\.|\[|\]/g, ''),
- db;
- var request = indexedDB.open(dbName, dbVersion);
-
- function createObjectStore(dataBase) {
- dataBase.createObjectStore(self.dataStoreName);
- }
-
- function putInDB() {
- var transaction = db.transaction([self.dataStoreName], 'readwrite');
-
- if (self.videoBlob) {
- transaction.objectStore(self.dataStoreName).put(self.videoBlob, 'videoBlob');
- }
-
- if (self.gifBlob) {
- transaction.objectStore(self.dataStoreName).put(self.gifBlob, 'gifBlob');
- }
-
- if (self.audioBlob) {
- transaction.objectStore(self.dataStoreName).put(self.audioBlob, 'audioBlob');
- }
-
- function getFromStore(portionName) {
- transaction.objectStore(self.dataStoreName).get(portionName).onsuccess = function (event) {
- if (self.callback) {
- self.callback(event.target.result, portionName);
- }
- };
- }
-
- getFromStore('audioBlob');
- getFromStore('videoBlob');
- getFromStore('gifBlob');
- }
-
- request.onerror = self.onError;
-
- request.onsuccess = function () {
- db = request.result;
- db.onerror = self.onError;
-
- if (db.setVersion) {
- if (db.version !== dbVersion) {
- var setVersion = db.setVersion(dbVersion);
- setVersion.onsuccess = function () {
- createObjectStore(db);
- putInDB();
- };
- } else {
- putInDB();
- }
- } else {
- putInDB();
- }
- };
- request.onupgradeneeded = function (event) {
- createObjectStore(event.target.result);
- };
- },
- /**
- * This method fetches stored blobs from IndexedDB.
- * @method
- * @memberof DiskStorage
- * @internal
- * @example
- * DiskStorage.Fetch(function(dataURL, type) {
- * if(type === 'audioBlob') { }
- * if(type === 'videoBlob') { }
- * if(type === 'gifBlob') { }
- * });
- */
- Fetch: function (callback) {
- this.callback = callback;
- this.init();
-
- return this;
- },
- /**
- * This method stores blobs in IndexedDB.
- * @method
- * @memberof DiskStorage
- * @internal
- * @example
- * DiskStorage.Store({
- * audioBlob: yourAudioBlob,
- * videoBlob: yourVideoBlob,
- * gifBlob : yourGifBlob
- * });
- */
- Store: function (config) {
- this.audioBlob = config.audioBlob;
- this.videoBlob = config.videoBlob;
- this.gifBlob = config.gifBlob;
-
- this.init();
-
- return this;
- },
- /**
- * This function is invoked for any known/unknown error.
- * @method
- * @memberof DiskStorage
- * @internal
- * @example
- * DiskStorage.onError = function(error){
- * alerot( JSON.stringify(error) );
- * };
- */
- onError: function (error) {
- console.error(JSON.stringify(error, null, '\t'));
- },
-
- /**
- * @property {string} dataStoreName - Name of the ObjectStore created in IndexedDB storage.
- * @memberof DiskStorage
- * @internal
- * @example
- * DiskStorage.dataStoreName = 'recordRTC';
- */
- dataStoreName: 'recordRTC',
- dbName: null
- };
-
- if (typeof RecordRTC !== 'undefined') {
- RecordRTC.DiskStorage = DiskStorage;
- }
-
- // ______________
- // GifRecorder.js
-
- /**
- * GifRecorder is standalone calss used by {@link RecordRTC} to record video or canvas into animated gif.
- * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT}
- * @author {@link https://MuazKhan.com|Muaz Khan}
- * @typedef GifRecorder
- * @class
- * @example
- * var recorder = new GifRecorder(mediaStream || canvas || context, { onGifPreview: function, onGifRecordingStarted: function, width: 1280, height: 720, frameRate: 200, quality: 10 });
- * recorder.record();
- * recorder.stop(function(blob) {
- * img.src = URL.createObjectURL(blob);
- * });
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- * @param {MediaStream} mediaStream - MediaStream object or HTMLCanvasElement or CanvasRenderingContext2D.
- * @param {object} config - {disableLogs:true, initCallback: function, width: 320, height: 240, frameRate: 200, quality: 10}
- */
-
- function GifRecorder(mediaStream, config) {
- if (typeof GIFEncoder === 'undefined') {
- var script = document.createElement('script');
- script.src = 'https://www.webrtc-experiment.com/gif-recorder.js';
- (document.body || document.documentElement).appendChild(script);
- }
-
- config = config || {};
-
- var isHTMLObject = mediaStream instanceof CanvasRenderingContext2D || mediaStream instanceof HTMLCanvasElement;
-
- /**
- * This method records MediaStream.
- * @method
- * @memberof GifRecorder
- * @example
- * recorder.record();
- */
- this.record = function () {
- if (typeof GIFEncoder === 'undefined') {
- setTimeout(self.record, 1000);
- return;
- }
-
- if (!isLoadedMetaData) {
- setTimeout(self.record, 1000);
- return;
- }
-
- if (!isHTMLObject) {
- if (!config.width) {
- config.width = video.offsetWidth || 320;
- }
-
- if (!config.height) {
- config.height = video.offsetHeight || 240;
- }
-
- if (!config.video) {
- config.video = {
- width: config.width,
- height: config.height
- };
- }
-
- if (!config.canvas) {
- config.canvas = {
- width: config.width,
- height: config.height
- };
- }
-
- canvas.width = config.canvas.width || 320;
- canvas.height = config.canvas.height || 240;
-
- video.width = config.video.width || 320;
- video.height = config.video.height || 240;
- }
-
- // external library to record as GIF images
- gifEncoder = new GIFEncoder();
-
- // void setRepeat(int iter)
- // Sets the number of times the set of GIF frames should be played.
- // Default is 1; 0 means play indefinitely.
- gifEncoder.setRepeat(0);
-
- // void setFrameRate(Number fps)
- // Sets frame rate in frames per second.
- // Equivalent to setDelay(1000/fps).
- // Using "setDelay" instead of "setFrameRate"
- gifEncoder.setDelay(config.frameRate || 200);
-
- // void setQuality(int quality)
- // Sets quality of color quantization (conversion of images to the
- // maximum 256 colors allowed by the GIF specification).
- // Lower values (minimum = 1) produce better colors,
- // but slow processing significantly. 10 is the default,
- // and produces good color mapping at reasonable speeds.
- // Values greater than 20 do not yield significant improvements in speed.
- gifEncoder.setQuality(config.quality || 10);
-
- // Boolean start()
- // This writes the GIF Header and returns false if it fails.
- gifEncoder.start();
-
- if (typeof config.onGifRecordingStarted === 'function') {
- config.onGifRecordingStarted();
- }
-
- function drawVideoFrame(time) {
- if (self.clearedRecordedData === true) {
- return;
- }
-
- if (isPausedRecording) {
- return setTimeout(function () {
- drawVideoFrame(time);
- }, 100);
- }
-
- lastAnimationFrame = requestAnimationFrame(drawVideoFrame);
-
- if (typeof lastFrameTime === undefined) {
- lastFrameTime = time;
- }
-
- // ~10 fps
- if (time - lastFrameTime < 90) {
- return;
- }
-
- if (!isHTMLObject && video.paused) {
- // via: https://github.com/muaz-khan/WebRTC-Experiment/pull/316
- // Tweak for Android Chrome
- video.play();
- }
-
- if (!isHTMLObject) {
- context.drawImage(video, 0, 0, canvas.width, canvas.height);
- }
-
- if (config.onGifPreview) {
- config.onGifPreview(canvas.toDataURL('image/png'));
- }
-
- gifEncoder.addFrame(context);
- lastFrameTime = time;
- }
-
- lastAnimationFrame = requestAnimationFrame(drawVideoFrame);
-
- if (config.initCallback) {
- config.initCallback();
- }
- };
-
- /**
- * This method stops recording MediaStream.
- * @param {function} callback - Callback function, that is used to pass recorded blob back to the callee.
- * @method
- * @memberof GifRecorder
- * @example
- * recorder.stop(function(blob) {
- * img.src = URL.createObjectURL(blob);
- * });
- */
- this.stop = function (callback) {
- callback = callback || function () { };
-
- if (lastAnimationFrame) {
- cancelAnimationFrame(lastAnimationFrame);
- }
-
- /**
- * @property {Blob} blob - The recorded blob object.
- * @memberof GifRecorder
- * @example
- * recorder.stop(function(){
- * var blob = recorder.blob;
- * });
- */
- this.blob = new Blob([new Uint8Array(gifEncoder.stream().bin)], {
- type: 'image/gif'
- });
-
- callback(this.blob);
-
- // bug: find a way to clear old recorded blobs
- gifEncoder.stream().bin = [];
- };
-
- var isPausedRecording = false;
-
- /**
- * This method pauses the recording process.
- * @method
- * @memberof GifRecorder
- * @example
- * recorder.pause();
- */
- this.pause = function () {
- isPausedRecording = true;
- };
-
- /**
- * This method resumes the recording process.
- * @method
- * @memberof GifRecorder
- * @example
- * recorder.resume();
- */
- this.resume = function () {
- isPausedRecording = false;
- };
-
- /**
- * This method resets currently recorded data.
- * @method
- * @memberof GifRecorder
- * @example
- * recorder.clearRecordedData();
- */
- this.clearRecordedData = function () {
- self.clearedRecordedData = true;
- clearRecordedDataCB();
- };
-
- function clearRecordedDataCB() {
- if (gifEncoder) {
- gifEncoder.stream().bin = [];
- }
- }
-
- // for debugging
- this.name = 'GifRecorder';
- this.toString = function () {
- return this.name;
- };
-
- var canvas = document.createElement('canvas');
- var context = canvas.getContext('2d');
-
- if (isHTMLObject) {
- if (mediaStream instanceof CanvasRenderingContext2D) {
- context = mediaStream;
- canvas = context.canvas;
- } else if (mediaStream instanceof HTMLCanvasElement) {
- context = mediaStream.getContext('2d');
- canvas = mediaStream;
- }
- }
-
- var isLoadedMetaData = true;
-
- if (!isHTMLObject) {
- var video = document.createElement('video');
- video.muted = true;
- video.autoplay = true;
- video.playsInline = true;
-
- isLoadedMetaData = false;
- video.onloadedmetadata = function () {
- isLoadedMetaData = true;
- };
-
- setSrcObject(mediaStream, video);
-
- video.play();
- }
-
- var lastAnimationFrame = null;
- var lastFrameTime;
-
- var gifEncoder;
-
- var self = this;
- }
-
- if (typeof RecordRTC !== 'undefined') {
- RecordRTC.GifRecorder = GifRecorder;
- }
-
- // Last time updated: 2019-06-21 4:09:42 AM UTC
-
- // ________________________
- // MultiStreamsMixer v1.2.2
-
- // Open-Sourced: https://github.com/muaz-khan/MultiStreamsMixer
-
- // --------------------------------------------------
- // Muaz Khan - www.MuazKhan.com
- // MIT License - www.WebRTC-Experiment.com/licence
- // --------------------------------------------------
-
- function MultiStreamsMixer(arrayOfMediaStreams, elementClass) {
-
- var browserFakeUserAgent = 'Fake/5.0 (FakeOS) AppleWebKit/123 (KHTML, like Gecko) Fake/12.3.4567.89 Fake/123.45';
-
- (function (that) {
- if (typeof RecordRTC !== 'undefined') {
- return;
- }
-
- if (!that) {
- return;
- }
-
- if (typeof window !== 'undefined') {
- return;
- }
-
- if (typeof commonjsGlobal === 'undefined') {
- return;
- }
-
- commonjsGlobal.navigator = {
- userAgent: browserFakeUserAgent,
- getUserMedia: function () { }
- };
-
- if (!commonjsGlobal.console) {
- commonjsGlobal.console = {};
- }
-
- if (typeof commonjsGlobal.console.log === 'undefined' || typeof commonjsGlobal.console.error === 'undefined') {
- commonjsGlobal.console.error = commonjsGlobal.console.log = commonjsGlobal.console.log || function () {
- console.log(arguments);
- };
- }
-
- if (typeof document === 'undefined') {
- /*global document:true */
- that.document = {
- documentElement: {
- appendChild: function () {
- return '';
- }
- }
- };
-
- document.createElement = document.captureStream = document.mozCaptureStream = function () {
- var obj = {
- getContext: function () {
- return obj;
- },
- play: function () { },
- pause: function () { },
- drawImage: function () { },
- toDataURL: function () {
- return '';
- },
- style: {}
- };
- return obj;
- };
-
- that.HTMLVideoElement = function () { };
- }
-
- if (typeof location === 'undefined') {
- /*global location:true */
- that.location = {
- protocol: 'file:',
- href: '',
- hash: ''
- };
- }
-
- if (typeof screen === 'undefined') {
- /*global screen:true */
- that.screen = {
- width: 0,
- height: 0
- };
- }
-
- if (typeof URL === 'undefined') {
- /*global screen:true */
- that.URL = {
- createObjectURL: function () {
- return '';
- },
- revokeObjectURL: function () {
- return '';
- }
- };
- }
-
- /*global window:true */
- that.window = commonjsGlobal;
- })(typeof commonjsGlobal !== 'undefined' ? commonjsGlobal : null);
-
- // requires: chrome://flags/#enable-experimental-web-platform-features
-
- elementClass = elementClass || 'multi-streams-mixer';
-
- var videos = [];
- var isStopDrawingFrames = false;
-
- var canvas = document.createElement('canvas');
- var context = canvas.getContext('2d');
- canvas.style.opacity = 0;
- canvas.style.position = 'absolute';
- canvas.style.zIndex = -1;
- canvas.style.top = '-1000em';
- canvas.style.left = '-1000em';
- canvas.className = elementClass;
- (document.body || document.documentElement).appendChild(canvas);
-
- this.disableLogs = false;
- this.frameInterval = 10;
-
- this.width = 360;
- this.height = 240;
-
- // use gain node to prevent echo
- this.useGainNode = true;
-
- var self = this;
-
- // _____________________________
- // Cross-Browser-Declarations.js
-
- // WebAudio API representer
- var AudioContext = window.AudioContext;
-
- if (typeof AudioContext === 'undefined') {
- if (typeof webkitAudioContext !== 'undefined') {
- /*global AudioContext:true */
- AudioContext = webkitAudioContext;
- }
-
- if (typeof mozAudioContext !== 'undefined') {
- /*global AudioContext:true */
- AudioContext = mozAudioContext;
- }
- }
-
- /*jshint -W079 */
- var URL = window.URL;
-
- if (typeof URL === 'undefined' && typeof webkitURL !== 'undefined') {
- /*global URL:true */
- URL = webkitURL;
- }
-
- if (typeof navigator !== 'undefined' && typeof navigator.getUserMedia === 'undefined') { // maybe window.navigator?
- if (typeof navigator.webkitGetUserMedia !== 'undefined') {
- navigator.getUserMedia = navigator.webkitGetUserMedia;
- }
-
- if (typeof navigator.mozGetUserMedia !== 'undefined') {
- navigator.getUserMedia = navigator.mozGetUserMedia;
- }
- }
-
- var MediaStream = window.MediaStream;
-
- if (typeof MediaStream === 'undefined' && typeof webkitMediaStream !== 'undefined') {
- MediaStream = webkitMediaStream;
- }
-
- /*global MediaStream:true */
- if (typeof MediaStream !== 'undefined') {
- // override "stop" method for all browsers
- if (typeof MediaStream.prototype.stop === 'undefined') {
- MediaStream.prototype.stop = function () {
- this.getTracks().forEach(function (track) {
- track.stop();
- });
- };
- }
- }
-
- var Storage = {};
-
- if (typeof AudioContext !== 'undefined') {
- Storage.AudioContext = AudioContext;
- } else if (typeof webkitAudioContext !== 'undefined') {
- Storage.AudioContext = webkitAudioContext;
- }
-
- function setSrcObject(stream, element) {
- if ('srcObject' in element) {
- element.srcObject = stream;
- } else if ('mozSrcObject' in element) {
- element.mozSrcObject = stream;
- } else {
- element.srcObject = stream;
- }
- }
-
- this.startDrawingFrames = function () {
- drawVideosToCanvas();
- };
-
- function drawVideosToCanvas() {
- if (isStopDrawingFrames) {
- return;
- }
-
- var videosLength = videos.length;
-
- var fullcanvas = false;
- var remaining = [];
- videos.forEach(function (video) {
- if (!video.stream) {
- video.stream = {};
- }
-
- if (video.stream.fullcanvas) {
- fullcanvas = video;
- } else {
- // todo: video.stream.active or video.stream.live to fix blank frames issues?
- remaining.push(video);
- }
- });
-
- if (fullcanvas) {
- canvas.width = fullcanvas.stream.width;
- canvas.height = fullcanvas.stream.height;
- } else if (remaining.length) {
- canvas.width = videosLength > 1 ? remaining[0].width * 2 : remaining[0].width;
-
- var height = 1;
- if (videosLength === 3 || videosLength === 4) {
- height = 2;
- }
- if (videosLength === 5 || videosLength === 6) {
- height = 3;
- }
- if (videosLength === 7 || videosLength === 8) {
- height = 4;
- }
- if (videosLength === 9 || videosLength === 10) {
- height = 5;
- }
- canvas.height = remaining[0].height * height;
- } else {
- canvas.width = self.width || 360;
- canvas.height = self.height || 240;
- }
-
- if (fullcanvas && fullcanvas instanceof HTMLVideoElement) {
- drawImage(fullcanvas);
- }
-
- remaining.forEach(function (video, idx) {
- drawImage(video, idx);
- });
-
- setTimeout(drawVideosToCanvas, self.frameInterval);
- }
-
- function drawImage(video, idx) {
- if (isStopDrawingFrames) {
- return;
- }
-
- var x = 0;
- var y = 0;
- var width = video.width;
- var height = video.height;
-
- if (idx === 1) {
- x = video.width;
- }
-
- if (idx === 2) {
- y = video.height;
- }
-
- if (idx === 3) {
- x = video.width;
- y = video.height;
- }
-
- if (idx === 4) {
- y = video.height * 2;
- }
-
- if (idx === 5) {
- x = video.width;
- y = video.height * 2;
- }
-
- if (idx === 6) {
- y = video.height * 3;
- }
-
- if (idx === 7) {
- x = video.width;
- y = video.height * 3;
- }
-
- if (typeof video.stream.left !== 'undefined') {
- x = video.stream.left;
- }
-
- if (typeof video.stream.top !== 'undefined') {
- y = video.stream.top;
- }
-
- if (typeof video.stream.width !== 'undefined') {
- width = video.stream.width;
- }
-
- if (typeof video.stream.height !== 'undefined') {
- height = video.stream.height;
- }
-
- context.drawImage(video, x, y, width, height);
-
- if (typeof video.stream.onRender === 'function') {
- video.stream.onRender(context, x, y, width, height, idx);
- }
- }
-
- function getMixedStream() {
- isStopDrawingFrames = false;
- var mixedVideoStream = getMixedVideoStream();
-
- var mixedAudioStream = getMixedAudioStream();
- if (mixedAudioStream) {
- mixedAudioStream.getTracks().filter(function (t) {
- return t.kind === 'audio';
- }).forEach(function (track) {
- mixedVideoStream.addTrack(track);
- });
- }
- arrayOfMediaStreams.forEach(function (stream) {
- if (stream.fullcanvas);
- });
-
- // mixedVideoStream.prototype.appendStreams = appendStreams;
- // mixedVideoStream.prototype.resetVideoStreams = resetVideoStreams;
- // mixedVideoStream.prototype.clearRecordedData = clearRecordedData;
-
- return mixedVideoStream;
- }
-
- function getMixedVideoStream() {
- resetVideoStreams();
-
- var capturedStream;
-
- if ('captureStream' in canvas) {
- capturedStream = canvas.captureStream();
- } else if ('mozCaptureStream' in canvas) {
- capturedStream = canvas.mozCaptureStream();
- } else if (!self.disableLogs) {
- console.error('Upgrade to latest Chrome or otherwise enable this flag: chrome://flags/#enable-experimental-web-platform-features');
- }
-
- var videoStream = new MediaStream();
-
- capturedStream.getTracks().filter(function (t) {
- return t.kind === 'video';
- }).forEach(function (track) {
- videoStream.addTrack(track);
- });
-
- canvas.stream = videoStream;
-
- return videoStream;
- }
-
- function getMixedAudioStream() {
- // via: @pehrsons
- if (!Storage.AudioContextConstructor) {
- Storage.AudioContextConstructor = new Storage.AudioContext();
- }
-
- self.audioContext = Storage.AudioContextConstructor;
-
- self.audioSources = [];
-
- if (self.useGainNode === true) {
- self.gainNode = self.audioContext.createGain();
- self.gainNode.connect(self.audioContext.destination);
- self.gainNode.gain.value = 0; // don't hear self
- }
-
- var audioTracksLength = 0;
- arrayOfMediaStreams.forEach(function (stream) {
- if (!stream.getTracks().filter(function (t) {
- return t.kind === 'audio';
- }).length) {
- return;
- }
-
- audioTracksLength++;
-
- var audioSource = self.audioContext.createMediaStreamSource(stream);
-
- if (self.useGainNode === true) {
- audioSource.connect(self.gainNode);
- }
-
- self.audioSources.push(audioSource);
- });
-
- if (!audioTracksLength) {
- // because "self.audioContext" is not initialized
- // that's why we've to ignore rest of the code
- return;
- }
-
- self.audioDestination = self.audioContext.createMediaStreamDestination();
- self.audioSources.forEach(function (audioSource) {
- audioSource.connect(self.audioDestination);
- });
- return self.audioDestination.stream;
- }
-
- function getVideo(stream) {
- var video = document.createElement('video');
-
- setSrcObject(stream, video);
-
- video.className = elementClass;
-
- video.muted = true;
- video.volume = 0;
-
- video.width = stream.width || self.width || 360;
- video.height = stream.height || self.height || 240;
-
- video.play();
-
- return video;
- }
-
- this.appendStreams = function (streams) {
- if (!streams) {
- throw 'First parameter is required.';
- }
-
- if (!(streams instanceof Array)) {
- streams = [streams];
- }
-
- streams.forEach(function (stream) {
- var newStream = new MediaStream();
-
- if (stream.getTracks().filter(function (t) {
- return t.kind === 'video';
- }).length) {
- var video = getVideo(stream);
- video.stream = stream;
- videos.push(video);
-
- newStream.addTrack(stream.getTracks().filter(function (t) {
- return t.kind === 'video';
- })[0]);
- }
-
- if (stream.getTracks().filter(function (t) {
- return t.kind === 'audio';
- }).length) {
- var audioSource = self.audioContext.createMediaStreamSource(stream);
- self.audioDestination = self.audioContext.createMediaStreamDestination();
- audioSource.connect(self.audioDestination);
-
- newStream.addTrack(self.audioDestination.stream.getTracks().filter(function (t) {
- return t.kind === 'audio';
- })[0]);
- }
-
- arrayOfMediaStreams.push(newStream);
- });
- };
-
- this.releaseStreams = function () {
- videos = [];
- isStopDrawingFrames = true;
-
- if (self.gainNode) {
- self.gainNode.disconnect();
- self.gainNode = null;
- }
-
- if (self.audioSources.length) {
- self.audioSources.forEach(function (source) {
- source.disconnect();
- });
- self.audioSources = [];
- }
-
- if (self.audioDestination) {
- self.audioDestination.disconnect();
- self.audioDestination = null;
- }
-
- if (self.audioContext) {
- self.audioContext.close();
- }
-
- self.audioContext = null;
-
- context.clearRect(0, 0, canvas.width, canvas.height);
-
- if (canvas.stream) {
- canvas.stream.stop();
- canvas.stream = null;
- }
- };
-
- this.resetVideoStreams = function (streams) {
- if (streams && !(streams instanceof Array)) {
- streams = [streams];
- }
-
- resetVideoStreams(streams);
- };
-
- function resetVideoStreams(streams) {
- videos = [];
- streams = streams || arrayOfMediaStreams;
-
- // via: @adrian-ber
- streams.forEach(function (stream) {
- if (!stream.getTracks().filter(function (t) {
- return t.kind === 'video';
- }).length) {
- return;
- }
-
- var video = getVideo(stream);
- video.stream = stream;
- videos.push(video);
- });
- }
-
- // for debugging
- this.name = 'MultiStreamsMixer';
- this.toString = function () {
- return this.name;
- };
-
- this.getMixedStream = getMixedStream;
-
- }
-
- if (typeof RecordRTC === 'undefined') {
- {
- module.exports = MultiStreamsMixer;
- }
- }
-
- // ______________________
- // MultiStreamRecorder.js
-
- /*
- * Video conference recording, using captureStream API along with WebAudio and Canvas2D API.
- */
-
- /**
- * MultiStreamRecorder can record multiple videos in single container.
- * @summary Multi-videos recorder.
- * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT}
- * @author {@link https://MuazKhan.com|Muaz Khan}
- * @typedef MultiStreamRecorder
- * @class
- * @example
- * var options = {
- * mimeType: 'video/webm'
- * }
- * var recorder = new MultiStreamRecorder(ArrayOfMediaStreams, options);
- * recorder.record();
- * recorder.stop(function(blob) {
- * video.src = URL.createObjectURL(blob);
- *
- * // or
- * var blob = recorder.blob;
- * });
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- * @param {MediaStreams} mediaStreams - Array of MediaStreams.
- * @param {object} config - {disableLogs:true, frameInterval: 1, mimeType: "video/webm"}
- */
-
- function MultiStreamRecorder(arrayOfMediaStreams, options) {
- arrayOfMediaStreams = arrayOfMediaStreams || [];
- var self = this;
-
- var mixer;
- var mediaRecorder;
-
- options = options || {
- elementClass: 'multi-streams-mixer',
- mimeType: 'video/webm',
- video: {
- width: 360,
- height: 240
- }
- };
-
- if (!options.frameInterval) {
- options.frameInterval = 10;
- }
-
- if (!options.video) {
- options.video = {};
- }
-
- if (!options.video.width) {
- options.video.width = 360;
- }
-
- if (!options.video.height) {
- options.video.height = 240;
- }
-
- /**
- * This method records all MediaStreams.
- * @method
- * @memberof MultiStreamRecorder
- * @example
- * recorder.record();
- */
- this.record = function () {
- // github/muaz-khan/MultiStreamsMixer
- mixer = new MultiStreamsMixer(arrayOfMediaStreams, options.elementClass || 'multi-streams-mixer');
-
- if (getAllVideoTracks().length) {
- mixer.frameInterval = options.frameInterval || 10;
- mixer.width = options.video.width || 360;
- mixer.height = options.video.height || 240;
- mixer.startDrawingFrames();
- }
-
- if (options.previewStream && typeof options.previewStream === 'function') {
- options.previewStream(mixer.getMixedStream());
- }
-
- // record using MediaRecorder API
- mediaRecorder = new MediaStreamRecorder(mixer.getMixedStream(), options);
- mediaRecorder.record();
- };
-
- function getAllVideoTracks() {
- var tracks = [];
- arrayOfMediaStreams.forEach(function (stream) {
- getTracks(stream, 'video').forEach(function (track) {
- tracks.push(track);
- });
- });
- return tracks;
- }
-
- /**
- * This method stops recording MediaStream.
- * @param {function} callback - Callback function, that is used to pass recorded blob back to the callee.
- * @method
- * @memberof MultiStreamRecorder
- * @example
- * recorder.stop(function(blob) {
- * video.src = URL.createObjectURL(blob);
- * });
- */
- this.stop = function (callback) {
- if (!mediaRecorder) {
- return;
- }
-
- mediaRecorder.stop(function (blob) {
- self.blob = blob;
-
- callback(blob);
-
- self.clearRecordedData();
- });
- };
-
- /**
- * This method pauses the recording process.
- * @method
- * @memberof MultiStreamRecorder
- * @example
- * recorder.pause();
- */
- this.pause = function () {
- if (mediaRecorder) {
- mediaRecorder.pause();
- }
- };
-
- /**
- * This method resumes the recording process.
- * @method
- * @memberof MultiStreamRecorder
- * @example
- * recorder.resume();
- */
- this.resume = function () {
- if (mediaRecorder) {
- mediaRecorder.resume();
- }
- };
-
- /**
- * This method resets currently recorded data.
- * @method
- * @memberof MultiStreamRecorder
- * @example
- * recorder.clearRecordedData();
- */
- this.clearRecordedData = function () {
- if (mediaRecorder) {
- mediaRecorder.clearRecordedData();
- mediaRecorder = null;
- }
-
- if (mixer) {
- mixer.releaseStreams();
- mixer = null;
- }
- };
-
- /**
- * Add extra media-streams to existing recordings.
- * @method
- * @memberof MultiStreamRecorder
- * @param {MediaStreams} mediaStreams - Array of MediaStreams
- * @example
- * recorder.addStreams([newAudioStream, newVideoStream]);
- */
- this.addStreams = function (streams) {
- if (!streams) {
- throw 'First parameter is required.';
- }
-
- if (!(streams instanceof Array)) {
- streams = [streams];
- }
-
- arrayOfMediaStreams.concat(streams);
-
- if (!mediaRecorder || !mixer) {
- return;
- }
-
- mixer.appendStreams(streams);
-
- if (options.previewStream && typeof options.previewStream === 'function') {
- options.previewStream(mixer.getMixedStream());
- }
- };
-
- /**
- * Reset videos during live recording. Replace old videos e.g. replace cameras with full-screen.
- * @method
- * @memberof MultiStreamRecorder
- * @param {MediaStreams} mediaStreams - Array of MediaStreams
- * @example
- * recorder.resetVideoStreams([newVideo1, newVideo2]);
- */
- this.resetVideoStreams = function (streams) {
- if (!mixer) {
- return;
- }
-
- if (streams && !(streams instanceof Array)) {
- streams = [streams];
- }
-
- mixer.resetVideoStreams(streams);
- };
-
- /**
- * Returns MultiStreamsMixer
- * @method
- * @memberof MultiStreamRecorder
- * @example
- * let mixer = recorder.getMixer();
- * mixer.appendStreams([newStream]);
- */
- this.getMixer = function () {
- return mixer;
- };
-
- // for debugging
- this.name = 'MultiStreamRecorder';
- this.toString = function () {
- return this.name;
- };
- }
-
- if (typeof RecordRTC !== 'undefined') {
- RecordRTC.MultiStreamRecorder = MultiStreamRecorder;
- }
-
- // _____________________
- // RecordRTC.promises.js
-
- /**
- * RecordRTCPromisesHandler adds promises support in {@link RecordRTC}. Try a {@link https://github.com/muaz-khan/RecordRTC/blob/master/simple-demos/RecordRTCPromisesHandler.html|demo here}
- * @summary Promises for {@link RecordRTC}
- * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT}
- * @author {@link https://MuazKhan.com|Muaz Khan}
- * @typedef RecordRTCPromisesHandler
- * @class
- * @example
- * var recorder = new RecordRTCPromisesHandler(mediaStream, options);
- * recorder.startRecording()
- * .then(successCB)
- * .catch(errorCB);
- * // Note: You can access all RecordRTC API using "recorder.recordRTC" e.g.
- * recorder.recordRTC.onStateChanged = function(state) {};
- * recorder.recordRTC.setRecordingDuration(5000);
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- * @param {MediaStream} mediaStream - Single media-stream object, array of media-streams, html-canvas-element, etc.
- * @param {object} config - {type:"video", recorderType: MediaStreamRecorder, disableLogs: true, numberOfAudioChannels: 1, bufferSize: 0, sampleRate: 0, video: HTMLVideoElement, etc.}
- * @throws Will throw an error if "new" keyword is not used to initiate "RecordRTCPromisesHandler". Also throws error if first argument "MediaStream" is missing.
- * @requires {@link RecordRTC}
- */
-
- function RecordRTCPromisesHandler(mediaStream, options) {
- if (!this) {
- throw 'Use "new RecordRTCPromisesHandler()"';
- }
-
- if (typeof mediaStream === 'undefined') {
- throw 'First argument "MediaStream" is required.';
- }
-
- var self = this;
-
- /**
- * @property {Blob} blob - Access/reach the native {@link RecordRTC} object.
- * @memberof RecordRTCPromisesHandler
- * @example
- * let internal = recorder.recordRTC.getInternalRecorder();
- * alert(internal instanceof MediaStreamRecorder);
- * recorder.recordRTC.onStateChanged = function(state) {};
- */
- self.recordRTC = new RecordRTC(mediaStream, options);
-
- /**
- * This method records MediaStream.
- * @method
- * @memberof RecordRTCPromisesHandler
- * @example
- * recorder.startRecording()
- * .then(successCB)
- * .catch(errorCB);
- */
- this.startRecording = function () {
- return new Promise(function (resolve, reject) {
- try {
- self.recordRTC.startRecording();
- resolve();
- } catch (e) {
- reject(e);
- }
- });
- };
-
- /**
- * This method stops the recording.
- * @method
- * @memberof RecordRTCPromisesHandler
- * @example
- * recorder.stopRecording().then(function() {
- * var blob = recorder.getBlob();
- * }).catch(errorCB);
- */
- this.stopRecording = function () {
- return new Promise(function (resolve, reject) {
- try {
- self.recordRTC.stopRecording(function (url) {
- self.blob = self.recordRTC.getBlob();
-
- if (!self.blob || !self.blob.size) {
- reject('Empty blob.', self.blob);
- return;
- }
-
- resolve(url);
- });
- } catch (e) {
- reject(e);
- }
- });
- };
-
- /**
- * This method pauses the recording. You can resume recording using "resumeRecording" method.
- * @method
- * @memberof RecordRTCPromisesHandler
- * @example
- * recorder.pauseRecording()
- * .then(successCB)
- * .catch(errorCB);
- */
- this.pauseRecording = function () {
- return new Promise(function (resolve, reject) {
- try {
- self.recordRTC.pauseRecording();
- resolve();
- } catch (e) {
- reject(e);
- }
- });
- };
-
- /**
- * This method resumes the recording.
- * @method
- * @memberof RecordRTCPromisesHandler
- * @example
- * recorder.resumeRecording()
- * .then(successCB)
- * .catch(errorCB);
- */
- this.resumeRecording = function () {
- return new Promise(function (resolve, reject) {
- try {
- self.recordRTC.resumeRecording();
- resolve();
- } catch (e) {
- reject(e);
- }
- });
- };
-
- /**
- * This method returns data-url for the recorded blob.
- * @method
- * @memberof RecordRTCPromisesHandler
- * @example
- * recorder.stopRecording().then(function() {
- * recorder.getDataURL().then(function(dataURL) {
- * window.open(dataURL);
- * }).catch(errorCB);;
- * }).catch(errorCB);
- */
- this.getDataURL = function (callback) {
- return new Promise(function (resolve, reject) {
- try {
- self.recordRTC.getDataURL(function (dataURL) {
- resolve(dataURL);
- });
- } catch (e) {
- reject(e);
- }
- });
- };
-
- /**
- * This method returns the recorded blob.
- * @method
- * @memberof RecordRTCPromisesHandler
- * @example
- * recorder.stopRecording().then(function() {
- * recorder.getBlob().then(function(blob) {})
- * }).catch(errorCB);
- */
- this.getBlob = function () {
- return new Promise(function (resolve, reject) {
- try {
- resolve(self.recordRTC.getBlob());
- } catch (e) {
- reject(e);
- }
- });
- };
-
- /**
- * This method returns the internal recording object.
- * @method
- * @memberof RecordRTCPromisesHandler
- * @example
- * let internalRecorder = await recorder.getInternalRecorder();
- * if(internalRecorder instanceof MultiStreamRecorder) {
- * internalRecorder.addStreams([newAudioStream]);
- * internalRecorder.resetVideoStreams([screenStream]);
- * }
- * @returns {Object}
- */
- this.getInternalRecorder = function () {
- return new Promise(function (resolve, reject) {
- try {
- resolve(self.recordRTC.getInternalRecorder());
- } catch (e) {
- reject(e);
- }
- });
- };
-
- /**
- * This method resets the recorder. So that you can reuse single recorder instance many times.
- * @method
- * @memberof RecordRTCPromisesHandler
- * @example
- * await recorder.reset();
- * recorder.startRecording(); // record again
- */
- this.reset = function () {
- return new Promise(function (resolve, reject) {
- try {
- resolve(self.recordRTC.reset());
- } catch (e) {
- reject(e);
- }
- });
- };
-
- /**
- * Destroy RecordRTC instance. Clear all recorders and objects.
- * @method
- * @memberof RecordRTCPromisesHandler
- * @example
- * recorder.destroy().then(successCB).catch(errorCB);
- */
- this.destroy = function () {
- return new Promise(function (resolve, reject) {
- try {
- resolve(self.recordRTC.destroy());
- } catch (e) {
- reject(e);
- }
- });
- };
-
- /**
- * Get recorder's readonly state.
- * @method
- * @memberof RecordRTCPromisesHandler
- * @example
- * let state = await recorder.getState();
- * // or
- * recorder.getState().then(state => { console.log(state); })
- * @returns {String} Returns recording state.
- */
- this.getState = function () {
- return new Promise(function (resolve, reject) {
- try {
- resolve(self.recordRTC.getState());
- } catch (e) {
- reject(e);
- }
- });
- };
-
- /**
- * @property {Blob} blob - Recorded data as "Blob" object.
- * @memberof RecordRTCPromisesHandler
- * @example
- * await recorder.stopRecording();
- * let blob = recorder.getBlob(); // or "recorder.recordRTC.blob"
- * invokeSaveAsDialog(blob);
- */
- this.blob = null;
-
- /**
- * RecordRTC version number
- * @property {String} version - Release version number.
- * @memberof RecordRTCPromisesHandler
- * @static
- * @readonly
- * @example
- * alert(recorder.version);
- */
- this.version = '5.6.2';
- }
-
- if (typeof RecordRTC !== 'undefined') {
- RecordRTC.RecordRTCPromisesHandler = RecordRTCPromisesHandler;
- }
-
- // ______________________
- // WebAssemblyRecorder.js
-
- /**
- * WebAssemblyRecorder lets you create webm videos in JavaScript via WebAssembly. The library consumes raw RGBA32 buffers (4 bytes per pixel) and turns them into a webm video with the given framerate and quality. This makes it compatible out-of-the-box with ImageData from a CANVAS. With realtime mode you can also use webm-wasm for streaming webm videos.
- * @summary Video recording feature in Chrome, Firefox and maybe Edge.
- * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT}
- * @author {@link https://MuazKhan.com|Muaz Khan}
- * @typedef WebAssemblyRecorder
- * @class
- * @example
- * var recorder = new WebAssemblyRecorder(mediaStream);
- * recorder.record();
- * recorder.stop(function(blob) {
- * video.src = URL.createObjectURL(blob);
- * });
- * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
- * @param {MediaStream} mediaStream - MediaStream object fetched using getUserMedia API or generated using captureStreamUntilEnded or WebAudio API.
- * @param {object} config - {webAssemblyPath:'webm-wasm.wasm',workerPath: 'webm-worker.js', frameRate: 30, width: 1920, height: 1080, bitrate: 1024, realtime: true}
- */
- function WebAssemblyRecorder(stream, config) {
- // based on: github.com/GoogleChromeLabs/webm-wasm
-
- if (typeof ReadableStream === 'undefined' || typeof WritableStream === 'undefined') {
- // because it fixes readable/writable streams issues
- console.error('Following polyfill is strongly recommended: https://unpkg.com/@mattiasbuelens/web-streams-polyfill/dist/polyfill.min.js');
- }
-
- config = config || {};
-
- config.width = config.width || 640;
- config.height = config.height || 480;
- config.frameRate = config.frameRate || 30;
- config.bitrate = config.bitrate || 1200;
- config.realtime = config.realtime || true;
-
- var finished;
-
- function cameraStream() {
- return new ReadableStream({
- start: function (controller) {
- var cvs = document.createElement('canvas');
- var video = document.createElement('video');
- var first = true;
- video.srcObject = stream;
- video.muted = true;
- video.height = config.height;
- video.width = config.width;
- video.volume = 0;
- video.onplaying = function () {
- cvs.width = config.width;
- cvs.height = config.height;
- var ctx = cvs.getContext('2d');
- var frameTimeout = 1000 / config.frameRate;
- var cameraTimer = setInterval(function f() {
- if (finished) {
- clearInterval(cameraTimer);
- controller.close();
- }
-
- if (first) {
- first = false;
- if (config.onVideoProcessStarted) {
- config.onVideoProcessStarted();
- }
- }
-
- ctx.drawImage(video, 0, 0);
- if (controller._controlledReadableStream.state !== 'closed') {
- try {
- controller.enqueue(
- ctx.getImageData(0, 0, config.width, config.height)
- );
- } catch (e) { }
- }
- }, frameTimeout);
- };
- video.play();
- }
- });
- }
-
- var worker;
-
- function startRecording(stream, buffer) {
- if (!config.workerPath && !buffer) {
- finished = false;
-
- // is it safe to use @latest ?
-
- fetch(
- 'https://unpkg.com/webm-wasm@latest/dist/webm-worker.js'
- ).then(function (r) {
- r.arrayBuffer().then(function (buffer) {
- startRecording(stream, buffer);
- });
- });
- return;
- }
-
- if (!config.workerPath && buffer instanceof ArrayBuffer) {
- var blob = new Blob([buffer], {
- type: 'text/javascript'
- });
- config.workerPath = URL.createObjectURL(blob);
- }
-
- if (!config.workerPath) {
- console.error('workerPath parameter is missing.');
- }
-
- worker = new Worker(config.workerPath);
-
- worker.postMessage(config.webAssemblyPath || 'https://unpkg.com/webm-wasm@latest/dist/webm-wasm.wasm');
- worker.addEventListener('message', function (event) {
- if (event.data === 'READY') {
- worker.postMessage({
- width: config.width,
- height: config.height,
- bitrate: config.bitrate || 1200,
- timebaseDen: config.frameRate || 30,
- realtime: config.realtime
- });
-
- cameraStream().pipeTo(new WritableStream({
- write: function (image) {
- if (finished) {
- console.error('Got image, but recorder is finished!');
- return;
- }
-
- worker.postMessage(image.data.buffer, [image.data.buffer]);
- }
- }));
- } else if (!!event.data) {
- if (!isPaused) {
- arrayOfBuffers.push(event.data);
- }
- }
- });
- }
-
- /**
- * This method records video.
- * @method
- * @memberof WebAssemblyRecorder
- * @example
- * recorder.record();
- */
- this.record = function () {
- arrayOfBuffers = [];
- isPaused = false;
- this.blob = null;
- startRecording(stream);
-
- if (typeof config.initCallback === 'function') {
- config.initCallback();
- }
- };
-
- var isPaused;
-
- /**
- * This method pauses the recording process.
- * @method
- * @memberof WebAssemblyRecorder
- * @example
- * recorder.pause();
- */
- this.pause = function () {
- isPaused = true;
- };
-
- /**
- * This method resumes the recording process.
- * @method
- * @memberof WebAssemblyRecorder
- * @example
- * recorder.resume();
- */
- this.resume = function () {
- isPaused = false;
- };
-
- function terminate(callback) {
- if (!worker) {
- if (callback) {
- callback();
- }
-
- return;
- }
-
- // Wait for null event data to indicate that the encoding is complete
- worker.addEventListener('message', function (event) {
- if (event.data === null) {
- worker.terminate();
- worker = null;
-
- if (callback) {
- callback();
- }
- }
- });
-
- worker.postMessage(null);
- }
-
- var arrayOfBuffers = [];
-
- /**
- * This method stops recording video.
- * @param {function} callback - Callback function, that is used to pass recorded blob back to the callee.
- * @method
- * @memberof WebAssemblyRecorder
- * @example
- * recorder.stop(function(blob) {
- * video.src = URL.createObjectURL(blob);
- * });
- */
- this.stop = function (callback) {
- finished = true;
-
- var recorder = this;
-
- terminate(function () {
- recorder.blob = new Blob(arrayOfBuffers, {
- type: 'video/webm'
- });
-
- callback(recorder.blob);
- });
- };
-
- // for debugging
- this.name = 'WebAssemblyRecorder';
- this.toString = function () {
- return this.name;
- };
-
- /**
- * This method resets currently recorded data.
- * @method
- * @memberof WebAssemblyRecorder
- * @example
- * recorder.clearRecordedData();
- */
- this.clearRecordedData = function () {
- arrayOfBuffers = [];
- isPaused = false;
- this.blob = null;
-
- // todo: if recording-ON then STOP it first
- };
-
- /**
- * @property {Blob} blob - The recorded blob object.
- * @memberof WebAssemblyRecorder
- * @example
- * recorder.stop(function(){
- * var blob = recorder.blob;
- * });
- */
- this.blob = null;
- }
-
- if (typeof RecordRTC !== 'undefined') {
- RecordRTC.WebAssemblyRecorder = WebAssemblyRecorder;
- }
- });
-
- class RecordRTCLoader extends Emitter {
- constructor(player) {
- super();
- this.player = player;
- this.fileName = '';
- this.fileType = player._opt.recordType || FILE_SUFFIX.webm;
- this.isRecording = false;
- this.recordingTimestamp = 0;
- this.recordingInterval = null;
- player.debug.log('Recorder', 'init');
- }
-
- destroy() {
- this._reset();
-
- this.player.debug.log('Recorder', 'destroy');
- }
-
- setFileName(fileName, fileType) {
- this.fileName = fileName;
-
- if (FILE_SUFFIX.mp4 === fileType || FILE_SUFFIX.webm === fileType) {
- this.fileType = fileType;
- }
- }
-
- get recording() {
- return this.isRecording;
- }
-
- get recordTime() {
- return this.recordingTimestamp;
- }
-
- startRecord() {
- const debug = this.player.debug;
- const options = {
- type: 'video',
- mimeType: 'video/webm;codecs=h264',
- onTimeStamp: timestamp => {
- debug.log('Recorder', 'record timestamp :' + timestamp);
- },
- disableLogs: !this.player._opt.debug
- };
-
- try {
- const stream = this.player.video.$videoElement.captureStream(25);
-
- if (this.player.audio && this.player.audio.mediaStreamAudioDestinationNode && this.player.audio.mediaStreamAudioDestinationNode.stream && !this.player.audio.isStateSuspended() && this.player.audio.hasAudio && this.player._opt.hasAudio) {
- const audioStream = this.player.audio.mediaStreamAudioDestinationNode.stream;
-
- if (audioStream.getAudioTracks().length > 0) {
- const audioTrack = audioStream.getAudioTracks()[0];
-
- if (audioTrack && audioTrack.enabled) {
- stream.addTrack(audioTrack);
- }
- }
- }
-
- this.recorder = RecordRTC_1(stream, options);
- } catch (e) {
- debug.error('Recorder', 'startRecord error', e);
- this.emit(EVENTS.recordCreateError);
- }
-
- if (this.recorder) {
- this.isRecording = true;
- this.player.emit(EVENTS.recording, true);
- this.recorder.startRecording();
- debug.log('Recorder', 'start recording');
- this.player.emit(EVENTS.recordStart);
- this.recordingInterval = window.setInterval(() => {
- this.recordingTimestamp += 1;
- this.player.emit(EVENTS.recordingTimestamp, this.recordingTimestamp);
- }, 1000);
- }
- }
-
- stopRecordAndSave() {
- if (!this.recorder || !this.isRecording) {
- return;
- }
-
- this.recorder.stopRecording(() => {
- this.player.debug.log('Recorder', 'stop recording');
- this.player.emit(EVENTS.recordEnd);
- const fileName = (this.fileName || now()) + '.' + (this.fileType || FILE_SUFFIX.webm);
- saveAs(this.recorder.getBlob(), fileName);
-
- this._reset();
-
- this.player.emit(EVENTS.recording, false);
- });
- }
-
- _reset() {
- this.isRecording = false;
- this.recordingTimestamp = 0;
-
- if (this.recorder) {
- this.recorder.destroy();
- this.recorder = null;
- }
-
- this.fileName = null;
-
- if (this.recordingInterval) {
- clearInterval(this.recordingInterval);
- }
-
- this.recordingInterval = null;
- }
-
- }
-
- class Recorder {
- constructor(player) {
- const Loader = Recorder.getLoaderFactory();
- return new Loader(player);
- }
-
- static getLoaderFactory() {
- return RecordRTCLoader;
- }
-
- }
-
- class DecoderWorker {
- constructor(player) {
- this.player = player;
- this.decoderWorker = new Worker(player._opt.decoder);
-
- this._initDecoderWorker();
-
- player.debug.log('decoderWorker', 'init');
- }
-
- destroy() {
- this.decoderWorker.postMessage({
- cmd: WORKER_SEND_TYPE.close
- });
- this.decoderWorker.terminate();
- this.decoderWorker = null;
- this.player.debug.log(`decoderWorker`, 'destroy');
- }
-
- _initDecoderWorker() {
- const {
- debug,
- events: {
- proxy
- }
- } = this.player;
-
- this.decoderWorker.onmessage = event => {
- const msg = event.data;
-
- switch (msg.cmd) {
- case WORKER_CMD_TYPE.init:
- debug.log(`decoderWorker`, 'onmessage:', WORKER_CMD_TYPE.init);
-
- if (!this.player.loaded) {
- this.player.emit(EVENTS.load);
- }
-
- this.player.emit(EVENTS.decoderWorkerInit);
-
- this._initWork();
-
- break;
-
- case WORKER_CMD_TYPE.videoCode:
- debug.log(`decoderWorker`, 'onmessage:', WORKER_CMD_TYPE.videoCode, msg.code);
-
- if (!this.player._times.decodeStart) {
- this.player._times.decodeStart = now();
- }
-
- this.player.video.updateVideoInfo({
- encTypeCode: msg.code
- });
- break;
-
- case WORKER_CMD_TYPE.audioCode:
- debug.log(`decoderWorker`, 'onmessage:', WORKER_CMD_TYPE.audioCode, msg.code);
- this.player.audio && this.player.audio.updateAudioInfo({
- encTypeCode: msg.code
- });
- break;
-
- case WORKER_CMD_TYPE.initVideo:
- debug.log(`decoderWorker`, 'onmessage:', WORKER_CMD_TYPE.initVideo, `width:${msg.w},height:${msg.h}`);
- this.player.video.updateVideoInfo({
- width: msg.w,
- height: msg.h
- });
-
- if (!this.player._opt.openWebglAlignment && !isWebglRenderSupport(msg.w)) {
- this.player.emit(EVENTS_ERROR.webglAlignmentError);
- return;
- }
-
- this.player.video.initCanvasViewSize();
- break;
-
- case WORKER_CMD_TYPE.initAudio:
- debug.log(`decoderWorker`, 'onmessage:', WORKER_CMD_TYPE.initAudio, `channels:${msg.channels},sampleRate:${msg.sampleRate}`);
-
- if (this.player.audio) {
- this.player.audio.updateAudioInfo(msg);
- this.player.audio.initScriptNode(msg);
- }
-
- break;
-
- case WORKER_CMD_TYPE.render:
- // debug.log(`decoderWorker`, 'onmessage:', WORKER_CMD_TYPE.render, `msg ts:${msg.ts}`);
- this.player.handleRender();
- this.player.video.render(msg);
- this.player.emit(EVENTS.timeUpdate, msg.ts);
- this.player.updateStats({
- fps: true,
- ts: msg.ts,
- buf: msg.delay
- });
-
- if (!this.player._times.videoStart) {
- this.player._times.videoStart = now();
- this.player.handlePlayToRenderTimes();
- }
-
- break;
-
- case WORKER_CMD_TYPE.playAudio:
- // debug.log(`decoderWorker`, 'onmessage:', WORKER_CMD_TYPE.playAudio, `msg ts:${msg.ts}`);
- // 只有在 playing 的时候。
- if (this.player.playing && this.player.audio) {
- this.player.audio.play(msg.buffer, msg.ts);
- }
-
- break;
-
- case WORKER_CMD_TYPE.wasmError:
- if (msg.message) {
- if (msg.message.indexOf(WASM_ERROR.invalidNalUnitSize) !== -1) {
- this.player.emitError(EVENTS_ERROR.wasmDecodeError);
- }
- }
-
- break;
-
- default:
- this.player[msg.cmd] && this.player[msg.cmd](msg);
- }
- };
- }
-
- _initWork() {
- const opt = {
- debug: this.player._opt.debug,
- useOffscreen: this.player._opt.useOffscreen,
- useWCS: this.player._opt.useWCS,
- videoBuffer: this.player._opt.videoBuffer,
- videoBufferDelay: this.player._opt.videoBufferDelay,
- openWebglAlignment: this.player._opt.openWebglAlignment
- };
- this.decoderWorker.postMessage({
- cmd: WORKER_SEND_TYPE.init,
- opt: JSON.stringify(opt),
- sampleRate: this.player.audio && this.player.audio.audioContext.sampleRate || 0
- });
- }
-
- decodeVideo(arrayBuffer, ts, isIFrame) {
- const options = {
- type: MEDIA_TYPE.video,
- ts: Math.max(ts, 0),
- isIFrame
- }; // this.player.debug.log('decoderWorker', 'decodeVideo', options);
-
- this.decoderWorker.postMessage({
- cmd: WORKER_SEND_TYPE.decode,
- buffer: arrayBuffer,
- options
- }, [arrayBuffer.buffer]);
- }
-
- decodeAudio(arrayBuffer, ts) {
- if (this.player._opt.useWCS) {
- this._decodeAudioNoDelay(arrayBuffer, ts);
- } else if (this.player._opt.useMSE) {
- this._decodeAudioNoDelay(arrayBuffer, ts);
- } else {
- this._decodeAudio(arrayBuffer, ts);
- }
- } //
-
-
- _decodeAudio(arrayBuffer, ts) {
- const options = {
- type: MEDIA_TYPE.audio,
- ts: Math.max(ts, 0)
- }; // this.player.debug.log('decoderWorker', 'decodeAudio',options);
-
- this.decoderWorker.postMessage({
- cmd: WORKER_SEND_TYPE.decode,
- buffer: arrayBuffer,
- options
- }, [arrayBuffer.buffer]);
- }
-
- _decodeAudioNoDelay(arrayBuffer, ts) {
- // console.log('_decodeAudioNoDelay', arrayBuffer);
- this.decoderWorker.postMessage({
- cmd: WORKER_SEND_TYPE.audioDecode,
- buffer: arrayBuffer,
- ts: Math.max(ts, 0)
- }, [arrayBuffer.buffer]);
- }
-
- updateWorkConfig(config) {
- this.decoderWorker.postMessage({
- cmd: WORKER_SEND_TYPE.updateConfig,
- key: config.key,
- value: config.value
- });
- }
-
- }
-
- class CommonLoader extends Emitter {
- constructor(player) {
- super();
- this.player = player;
- this.stopId = null;
- this.firstTimestamp = null;
- this.startTimestamp = null;
- this.delay = -1;
- this.bufferList = [];
- this.dropping = false;
- this.initInterval();
- }
-
- destroy() {
- if (this.stopId) {
- clearInterval(this.stopId);
- this.stopId = null;
- }
-
- this.firstTimestamp = null;
- this.startTimestamp = null;
- this.delay = -1;
- this.bufferList = [];
- this.dropping = false;
- this.off();
- this.player.debug.log('CommonDemux', 'destroy');
- }
-
- getDelay(timestamp) {
- if (!timestamp) {
- return -1;
- }
-
- if (!this.firstTimestamp) {
- this.firstTimestamp = timestamp;
- this.startTimestamp = Date.now();
- this.delay = -1;
- } else {
- if (timestamp) {
- const localTimestamp = Date.now() - this.startTimestamp;
- const timeTimestamp = timestamp - this.firstTimestamp;
-
- if (localTimestamp >= timeTimestamp) {
- this.delay = localTimestamp - timeTimestamp;
- } else {
- this.delay = timeTimestamp - localTimestamp;
- }
- }
- }
-
- return this.delay;
- }
-
- resetDelay() {
- this.firstTimestamp = null;
- this.startTimestamp = null;
- this.delay = -1;
- this.dropping = false;
- } //
-
-
- initInterval() {
- this.player.debug.log('common dumex', `init Interval`);
-
- let _loop = () => {
- let data;
- const videoBuffer = this.player._opt.videoBuffer;
- const videoBufferDelay = this.player._opt.videoBufferDelay;
-
- if (this.player._opt.useMSE && this.player.mseDecoder && this.player.mseDecoder.getSourceBufferUpdating()) {
- this.player.debug.warn('CommonDemux', `_loop getSourceBufferUpdating is true and bufferList length is ${this.bufferList.length}`);
- return;
- }
-
- if (this.bufferList.length) {
- if (this.dropping) {
- // this.player.debug.log('common dumex', `is dropping`);
- data = this.bufferList.shift();
-
- if (data.type === MEDIA_TYPE.audio && data.payload[1] === 0) {
- this._doDecoderDecode(data);
- }
-
- while (!data.isIFrame && this.bufferList.length) {
- data = this.bufferList.shift();
-
- if (data.type === MEDIA_TYPE.audio && data.payload[1] === 0) {
- this._doDecoderDecode(data);
- }
- } // i frame
-
-
- if (data.isIFrame && this.getDelay(data.ts) <= Math.min(videoBuffer, 200)) {
- this.dropping = false;
-
- this._doDecoderDecode(data);
- }
- } else {
- data = this.bufferList[0];
-
- if (this.getDelay(data.ts) === -1) {
- // this.player.debug.log('common dumex', `delay is -1`);
- this.bufferList.shift();
-
- this._doDecoderDecode(data);
- } else if (this.delay > videoBuffer + videoBufferDelay) {
- // this.player.debug.log('common dumex', `delay is ${this.delay}, set dropping is true`);
- this.resetDelay();
- this.dropping = true;
- } else {
- data = this.bufferList[0];
-
- if (this.getDelay(data.ts) > videoBuffer) {
- // drop frame
- this.bufferList.shift();
-
- this._doDecoderDecode(data);
- }
- }
- }
- }
- };
-
- _loop();
-
- this.stopId = setInterval(_loop, 10);
- }
-
- _doDecode(payload, type, ts, isIFrame, cts) {
- const player = this.player;
- let options = {
- ts: ts,
- cts: cts,
- type: type,
- isIFrame: false
- }; // use offscreen
-
- if (player._opt.useWCS && !player._opt.useOffscreen) {
- if (type === MEDIA_TYPE.video) {
- options.isIFrame = isIFrame;
- }
-
- this.pushBuffer(payload, options);
- } else if (player._opt.useMSE) {
- // use mse
- if (type === MEDIA_TYPE.video) {
- options.isIFrame = isIFrame;
- }
-
- this.pushBuffer(payload, options);
- } else {
- //
- if (type === MEDIA_TYPE.video) {
- player.decoderWorker && player.decoderWorker.decodeVideo(payload, ts, isIFrame);
- } else if (type === MEDIA_TYPE.audio) {
- if (player._opt.hasAudio) {
- player.decoderWorker && player.decoderWorker.decodeAudio(payload, ts);
- }
- }
- }
- }
-
- _doDecoderDecode(data) {
- const player = this.player;
- const {
- webcodecsDecoder,
- mseDecoder
- } = player;
-
- if (data.type === MEDIA_TYPE.audio) {
- if (player._opt.hasAudio) {
- player.decoderWorker && player.decoderWorker.decodeAudio(data.payload, data.ts);
- }
- } else if (data.type === MEDIA_TYPE.video) {
- if (player._opt.useWCS && !player._opt.useOffscreen) {
- webcodecsDecoder.decodeVideo(data.payload, data.ts, data.isIFrame);
- } else if (player._opt.useMSE) {
- mseDecoder.decodeVideo(data.payload, data.ts, data.isIFrame, data.cts);
- }
- }
- }
-
- pushBuffer(payload, options) {
- // 音频
- if (options.type === MEDIA_TYPE.audio) {
- this.bufferList.push({
- ts: options.ts,
- payload: payload,
- type: MEDIA_TYPE.audio
- });
- } else if (options.type === MEDIA_TYPE.video) {
- this.bufferList.push({
- ts: options.ts,
- cts: options.cts,
- payload: payload,
- type: MEDIA_TYPE.video,
- isIFrame: options.isIFrame
- });
- }
- }
-
- close() { }
-
- }
-
- class FlvLoader extends CommonLoader {
- constructor(player) {
- super(player);
- this.input = this._inputFlv();
- this.flvDemux = this.dispatchFlvData(this.input);
- player.debug.log('FlvDemux', 'init');
- }
-
- destroy() {
- super.destroy();
- this.input = null;
- this.flvDemux = null;
- this.player.debug.log('FlvDemux', 'destroy');
- }
-
- dispatch(data) {
- this.flvDemux(data);
- }
-
- *_inputFlv() {
- yield 9;
- const tmp = new ArrayBuffer(4);
- const tmp8 = new Uint8Array(tmp);
- const tmp32 = new Uint32Array(tmp);
- const player = this.player;
-
- while (true) {
- tmp8[3] = 0;
- const t = yield 15;
- const type = t[4];
- tmp8[0] = t[7];
- tmp8[1] = t[6];
- tmp8[2] = t[5];
- const length = tmp32[0];
- tmp8[0] = t[10];
- tmp8[1] = t[9];
- tmp8[2] = t[8];
- let ts = tmp32[0];
-
- if (ts === 0xFFFFFF) {
- tmp8[3] = t[11];
- ts = tmp32[0];
- }
-
- const payload = yield length;
-
- switch (type) {
- case FLV_MEDIA_TYPE.audio:
- if (player._opt.hasAudio) {
- player.updateStats({
- abps: payload.byteLength
- });
-
- if (payload.byteLength > 0) {
- this._doDecode(payload, MEDIA_TYPE.audio, ts);
- }
- }
-
- break;
-
- case FLV_MEDIA_TYPE.video:
- if (!player._times.demuxStart) {
- player._times.demuxStart = now();
- }
-
- if (player._opt.hasVideo) {
- player.updateStats({
- vbps: payload.byteLength
- });
- const isIFrame = payload[0] >> 4 === 1;
-
- if (payload.byteLength > 0) {
- tmp32[0] = payload[4];
- tmp32[1] = payload[3];
- tmp32[2] = payload[2];
- tmp32[3] = 0;
- let cts = tmp32[0];
-
- this._doDecode(payload, MEDIA_TYPE.video, ts, isIFrame, cts);
- }
- }
-
- break;
- }
- }
- }
-
- dispatchFlvData(input) {
- let need = input.next();
- let buffer = null;
- return value => {
- let data = new Uint8Array(value);
-
- if (buffer) {
- let combine = new Uint8Array(buffer.length + data.length);
- combine.set(buffer);
- combine.set(data, buffer.length);
- data = combine;
- buffer = null;
- }
-
- while (data.length >= need.value) {
- let remain = data.slice(need.value);
- need = input.next(data.slice(0, need.value));
- data = remain;
- }
-
- if (data.length > 0) {
- buffer = data;
- }
- };
- }
-
- close() {
- this.input && this.input.return(null);
- }
-
- }
-
- class M7sLoader extends CommonLoader {
- constructor(player) {
- super(player);
- player.debug.log('M7sDemux', 'init');
- }
-
- destroy() {
- super.destroy();
- this.player.debug.log('M7sDemux', 'destroy');
- this.player = null;
- }
-
- dispatch(data) {
- const player = this.player;
- const dv = new DataView(data);
- const type = dv.getUint8(0);
- const ts = dv.getUint32(1, false);
-
- switch (type) {
- case MEDIA_TYPE.audio:
- if (player._opt.hasAudio) {
- const payload = new Uint8Array(data, 5);
- player.updateStats({
- abps: payload.byteLength
- });
-
- if (payload.byteLength > 0) {
- this._doDecode(payload, type, ts);
- }
- }
-
- break;
-
- case MEDIA_TYPE.video:
- if (player._opt.hasVideo) {
- if (!player._times.demuxStart) {
- player._times.demuxStart = now();
- }
-
- if (dv.byteLength > 5) {
- const payload = new Uint8Array(data, 5);
- const isIframe = dv.getUint8(5) >> 4 === 1;
- player.updateStats({
- vbps: payload.byteLength
- });
-
- if (payload.byteLength > 0) {
- this._doDecode(payload, type, ts, isIframe);
- }
- } else {
- this.player.debug.warn('M7sDemux', 'dispatch', 'dv byteLength is', dv.byteLength);
- }
- }
-
- break;
- }
- }
-
- }
-
- class Demux {
- constructor(player) {
- const Loader = Demux.getLoaderFactory(player._opt.demuxType);
- return new Loader(player);
- }
-
- static getLoaderFactory(type) {
- if (type === DEMUX_TYPE.m7s) {
- return M7sLoader;
- } else if (type === DEMUX_TYPE.flv) {
- return FlvLoader;
- }
- }
-
- }
-
- /*
- * Copyright (C) 2016 Bilibili. All Rights Reserved.
- *
- * @author zheng qian