brige/vr_player
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add webrtc stream

Browse Source
This commit is contained in:
jiegeaiai 2025-02-16 03:58:23 +08:00
parent 7d2d3973bd
commit ac89998214
7 changed files with 278 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

197
vr/package-lock.json generated
View File

@ -8,6 +8,7 @@
"name": "vr",
"version": "0.1.0",
"dependencies": {
"@eyevinn/webrtc-player": "^0.13.0",
"core-js": "^3.12.0",
"deasync": "^0.1.30",
"flv.js": "^1.5.0",
@ -22,6 +23,8 @@
"vuex": "^3.6.2"
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/preset-env": "^7.26.9",
"@vue/cli-plugin-babel": "^4.3.1",
"@vue/cli-plugin-e2e-cypress": "^4.3.1",
"@vue/cli-plugin-eslint": "^4.3.1",
@ -88,11 +91,10 @@
}
},
"node_modules/@babel/compat-data": {
"version": "7.26.5",
"resolved": "https://registry.npmmirror.com/@babel/compat-data/-/compat-data-7.26.5.tgz",
"integrity": "sha512-XvcZi1KWf88RVbF9wn8MN6tYFloU5qX8KjuF3E1PVBmJ9eypXfs4GRiJwLuTZL0iSnJUKn1BFPa5BPZZJyFzPg==",
"version": "7.26.8",
"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.8.tgz",
"integrity": "sha512-oH5UPLMWR3L2wEFLnFJ1TZXqHufiTKAiLfqw5zkhS4dKXLJ10yVztfil/twG8EDTA4F/tvVNw9nOl4ZMslB8rQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6.9.0"
}
@ -129,14 +131,13 @@
}
},
"node_modules/@babel/generator": {
"version": "7.26.5",
"resolved": "https://registry.npmmirror.com/@babel/generator/-/generator-7.26.5.tgz",
"integrity": "sha512-2caSP6fN9I7HOe6nqhtft7V4g7/V/gfDsC3Ag4W7kEzzvRGKqiv0pu0HogPiZ3KaVSoNDhUws6IJjDjpfmYIXw==",
"version": "7.26.9",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.9.tgz",
"integrity": "sha512-kEWdzjOAUMW4hAyrzJ0ZaTOu9OmpyDIQicIh0zg0EEcEkYXZb2TjtBhnHi2ViX7PKwZqF4xwqfAm299/QMP3lg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/parser": "^7.26.5",
"@babel/types": "^7.26.5",
"@babel/parser": "^7.26.9",
"@babel/types": "^7.26.9",
"@jridgewell/gen-mapping": "^0.3.5",
"@jridgewell/trace-mapping": "^0.3.25",
"jsesc": "^3.0.2"
@ -409,12 +410,11 @@
}
},
"node_modules/@babel/parser": {
"version": "7.26.7",
"resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.26.7.tgz",
"integrity": "sha512-kEvgGGgEjRUutvdVvZhbn/BxVt+5VSpwXz1j3WYXQbXDo8KzFOPNG2GQbdAiNq8g6wn1yKk7C/qrke03a84V+w==",
"license": "MIT",
"version": "7.26.9",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.9.tgz",
"integrity": "sha512-81NWa1njQblgZbQHxWHpxxCzNsa3ZwvFqpUg7P+NNUU6f3UU2jBEg4OlF/J6rl8+PQGh1q6/zWScd001YwcA5A==",
"dependencies": {
"@babel/types": "^7.26.7"
"@babel/types": "^7.26.9"
},
"bin": {
"parser": "bin/babel-parser.js"
@ -509,11 +509,10 @@
},
"node_modules/@babel/plugin-proposal-class-properties": {
"version": "7.18.6",
"resolved": "https://registry.npmmirror.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz",
"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz",
"integrity": "sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==",
"deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/helper-create-class-features-plugin": "^7.18.6",
"@babel/helper-plugin-utils": "^7.18.6"
@ -680,15 +679,14 @@
}
},
"node_modules/@babel/plugin-transform-async-generator-functions": {
"version": "7.25.9",
"resolved": "https://registry.npmmirror.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.25.9.tgz",
"integrity": "sha512-RXV6QAzTBbhDMO9fWwOmwwTuYaiPbggWQ9INdZqAYeSHyG7FzQ+nOZaUUjNwKv9pV3aE4WFqFm1Hnbci5tBCAw==",
"version": "7.26.8",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.26.8.tgz",
"integrity": "sha512-He9Ej2X7tNf2zdKMAGOsmg2MrFc+hfoAhd3po4cWfo/NWjzEAKa0oQruj1ROVUdl0e6fb6/kE/G3SSxE0lRJOg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/helper-plugin-utils": "^7.25.9",
"@babel/helper-plugin-utils": "^7.26.5",
"@babel/helper-remap-async-to-generator": "^7.25.9",
"@babel/traverse": "^7.25.9"
"@babel/traverse": "^7.26.8"
},
"engines": {
"node": ">=6.9.0"
@ -934,13 +932,12 @@
}
},
"node_modules/@babel/plugin-transform-for-of": {
"version": "7.25.9",
"resolved": "https://registry.npmmirror.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.25.9.tgz",
"integrity": "sha512-LqHxduHoaGELJl2uhImHwRQudhCM50pT46rIBNvtT/Oql3nqiS3wOwP+5ten7NpYSXrrVLgtZU3DZmPtWZo16A==",
"version": "7.26.9",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.26.9.tgz",
"integrity": "sha512-Hry8AusVm8LW5BVFgiyUReuoGzPUpdHQQqJY5bZnbbf+ngOHWuCuYFKw/BqaaWlvEUrF91HMhDtEaI1hZzNbLg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/helper-plugin-utils": "^7.25.9",
"@babel/helper-plugin-utils": "^7.26.5",
"@babel/helper-skip-transparent-expression-wrappers": "^7.25.9"
},
"engines": {
@ -1423,13 +1420,12 @@
}
},
"node_modules/@babel/plugin-transform-template-literals": {
"version": "7.25.9",
"resolved": "https://registry.npmmirror.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.25.9.tgz",
"integrity": "sha512-o97AE4syN71M/lxrCtQByzphAdlYluKPDBzDVzMmfCobUjjhAryZV0AIpRPrxN0eAkxXO6ZLEScmt+PNhj2OTw==",
"version": "7.26.8",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.26.8.tgz",
"integrity": "sha512-OmGDL5/J0CJPJZTHZbi2XpO0tyT2Ia7fzpW5GURwdtp2X3fMmN8au/ej6peC/T33/+CRiIpA8Krse8hFGVmT5Q==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/helper-plugin-utils": "^7.25.9"
"@babel/helper-plugin-utils": "^7.26.5"
},
"engines": {
"node": ">=6.9.0"
@ -1522,13 +1518,12 @@
}
},
"node_modules/@babel/preset-env": {
"version": "7.26.7",
"resolved": "https://registry.npmmirror.com/@babel/preset-env/-/preset-env-7.26.7.tgz",
"integrity": "sha512-Ycg2tnXwixaXOVb29rana8HNPgLVBof8qqtNQ9LE22IoyZboQbGSxI6ZySMdW3K5nAe6gu35IaJefUJflhUFTQ==",
"version": "7.26.9",
"resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.26.9.tgz",
"integrity": "sha512-vX3qPGE8sEKEAZCWk05k3cpTAE3/nOYca++JA+Rd0z2NCNzabmYvEiSShKzm10zdquOIAVXsy2Ei/DTW34KlKQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/compat-data": "^7.26.5",
"@babel/compat-data": "^7.26.8",
"@babel/helper-compilation-targets": "^7.26.5",
"@babel/helper-plugin-utils": "^7.26.5",
"@babel/helper-validator-option": "^7.25.9",
@ -1542,7 +1537,7 @@
"@babel/plugin-syntax-import-attributes": "^7.26.0",
"@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
"@babel/plugin-transform-arrow-functions": "^7.25.9",
"@babel/plugin-transform-async-generator-functions": "^7.25.9",
"@babel/plugin-transform-async-generator-functions": "^7.26.8",
"@babel/plugin-transform-async-to-generator": "^7.25.9",
"@babel/plugin-transform-block-scoped-functions": "^7.26.5",
"@babel/plugin-transform-block-scoping": "^7.25.9",
@ -1557,7 +1552,7 @@
"@babel/plugin-transform-dynamic-import": "^7.25.9",
"@babel/plugin-transform-exponentiation-operator": "^7.26.3",
"@babel/plugin-transform-export-namespace-from": "^7.25.9",
"@babel/plugin-transform-for-of": "^7.25.9",
"@babel/plugin-transform-for-of": "^7.26.9",
"@babel/plugin-transform-function-name": "^7.25.9",
"@babel/plugin-transform-json-strings": "^7.25.9",
"@babel/plugin-transform-literals": "^7.25.9",
@ -1585,7 +1580,7 @@
"@babel/plugin-transform-shorthand-properties": "^7.25.9",
"@babel/plugin-transform-spread": "^7.25.9",
"@babel/plugin-transform-sticky-regex": "^7.25.9",
"@babel/plugin-transform-template-literals": "^7.25.9",
"@babel/plugin-transform-template-literals": "^7.26.8",
"@babel/plugin-transform-typeof-symbol": "^7.26.7",
"@babel/plugin-transform-unicode-escapes": "^7.25.9",
"@babel/plugin-transform-unicode-property-regex": "^7.25.9",
@ -1593,9 +1588,9 @@
"@babel/plugin-transform-unicode-sets-regex": "^7.25.9",
"@babel/preset-modules": "0.1.6-no-external-plugins",
"babel-plugin-polyfill-corejs2": "^0.4.10",
"babel-plugin-polyfill-corejs3": "^0.10.6",
"babel-plugin-polyfill-corejs3": "^0.11.0",
"babel-plugin-polyfill-regenerator": "^0.6.1",
"core-js-compat": "^3.38.1",
"core-js-compat": "^3.40.0",
"semver": "^6.3.1"
},
"engines": {
@ -1605,6 +1600,19 @@
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@babel/preset-env/node_modules/babel-plugin-polyfill-corejs3": {
"version": "0.11.1",
"resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.11.1.tgz",
"integrity": "sha512-yGCqvBT4rwMczo28xkH/noxJ6MZ4nJfkVYdoDaC/utLtWrXxv27HVrzAeSbqR8SxDsp46n0YF47EbHoixy6rXQ==",
"dev": true,
"dependencies": {
"@babel/helper-define-polyfill-provider": "^0.6.3",
"core-js-compat": "^3.40.0"
},
"peerDependencies": {
"@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
}
},
"node_modules/@babel/preset-modules": {
"version": "0.1.6-no-external-plugins",
"resolved": "https://registry.npmmirror.com/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz",
@ -1633,32 +1641,30 @@
}
},
"node_modules/@babel/template": {
"version": "7.25.9",
"resolved": "https://registry.npmmirror.com/@babel/template/-/template-7.25.9.tgz",
"integrity": "sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==",
"version": "7.26.9",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.26.9.tgz",
"integrity": "sha512-qyRplbeIpNZhmzOysF/wFMuP9sctmh2cFzRAZOn1YapxBsE1i9bJIY586R/WBLfLcmcBlM8ROBiQURnnNy+zfA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/code-frame": "^7.25.9",
"@babel/parser": "^7.25.9",
"@babel/types": "^7.25.9"
"@babel/code-frame": "^7.26.2",
"@babel/parser": "^7.26.9",
"@babel/types": "^7.26.9"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/traverse": {
"version": "7.26.7",
"resolved": "https://registry.npmmirror.com/@babel/traverse/-/traverse-7.26.7.tgz",
"integrity": "sha512-1x1sgeyRLC3r5fQOM0/xtQKsYjyxmFjaOrLJNtZ81inNjyJHGIolTULPiSc/2qe1/qfpFLisLQYFnnZl7QoedA==",
"version": "7.26.9",
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.9.tgz",
"integrity": "sha512-ZYW7L+pL8ahU5fXmNbPF+iZFHCv5scFak7MZ9bwaRPLUhHh7QQEMjZUg0HevihoqCM5iSYHN61EyCoZvqC+bxg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/code-frame": "^7.26.2",
"@babel/generator": "^7.26.5",
"@babel/parser": "^7.26.7",
"@babel/template": "^7.25.9",
"@babel/types": "^7.26.7",
"@babel/generator": "^7.26.9",
"@babel/parser": "^7.26.9",
"@babel/template": "^7.26.9",
"@babel/types": "^7.26.9",
"debug": "^4.3.1",
"globals": "^11.1.0"
},
@ -1667,10 +1673,9 @@
}
},
"node_modules/@babel/types": {
"version": "7.26.7",
"resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.26.7.tgz",
"integrity": "sha512-t8kDRGrKXyp6+tjUh7hw2RLyclsW4TRoRvRHtSyAX9Bb5ldlFh+90YAYY6awRXrlB4G5G2izNeGySpATlFzmOg==",
"license": "MIT",
"version": "7.26.9",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.9.tgz",
"integrity": "sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==",
"dependencies": {
"@babel/helper-string-parser": "^7.25.9",
"@babel/helper-validator-identifier": "^7.25.9"
@ -1793,6 +1798,68 @@
"ms": "^2.1.1"
}
},
"node_modules/@dailymotion/vast-client": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/@dailymotion/vast-client/-/vast-client-4.0.1.tgz",
"integrity": "sha512-oRUCc06bWdX/1f2Eha/od5WCj+MLHiD6rgyAudgjOUyWXhCcbkUTZeejBSQsLft0nFnd+5nrDqGkBD8mrEVd/Q==",
"dependencies": {
"@xmldom/xmldom": "^0.8.3"
},
"engines": {
"node": ">=12.22.1"
}
},
"node_modules/@dailymotion/vmap": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/@dailymotion/vmap/-/vmap-3.3.2.tgz",
"integrity": "sha512-mwJfXNuVIJ18hPtXLNK9wnrh5EBIjQqdVU6Z2RNvAkfSuwdaQwCrzGod4M+PtGY9GR4Q+aaVMaB4+BkEoQOYcA==",
"engines": {
"node": ">=12.22.1"
}
},
"node_modules/@eyevinn/csai-manager": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/@eyevinn/csai-manager/-/csai-manager-0.1.2.tgz",
"integrity": "sha512-ZehCxXlSIHF5Ej1n/WZEaLa6sLIH5zrE1ZB71yyT/KbFoeDsDDoo+jw61xzzT+pKBb4vNBtKQRgaVDGZdT2L/g==",
"dependencies": {
"@dailymotion/vast-client": "^4.0.0",
"@dailymotion/vmap": "^3.3.0",
"@eyevinn/video-event-filter": "^2.0.0",
"mitt": "^3.0.0"
}
},
"node_modules/@eyevinn/video-event-filter": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@eyevinn/video-event-filter/-/video-event-filter-2.0.0.tgz",
"integrity": "sha512-S5pECmymqg7WqlAeerhtPVEFxWhLY3cz3DTuhuljZreVDLnEBV6/DlWI6SWDnKdpDJMgD6VjPfaRJssmGatNBg==",
"deprecated": "Package no longer maintained, we recommend migrating to @eyevinn/media-event-filter",
"dependencies": {
"mitt": "^2.1.0"
}
},
"node_modules/@eyevinn/video-event-filter/node_modules/mitt": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
"integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
},
"node_modules/@eyevinn/webrtc-player": {
"version": "0.13.0",
"resolved": "https://registry.npmjs.org/@eyevinn/webrtc-player/-/webrtc-player-0.13.0.tgz",
"integrity": "sha512-X5Nzznbyw9PXj85HYV7nyHSbeC0tWpTTAFEYjilnlLLWfo9EARx1tCQk5tdhmImnDST8VN50SYt6uMDudoVnWw==",
"dependencies": {
"@eyevinn/csai-manager": "^0.1.2",
"@eyevinn/whpp-client": "^0.1.2",
"events": "^3.3.0"
},
"engines": {
"node": ">=18.15.0"
}
},
"node_modules/@eyevinn/whpp-client": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/@eyevinn/whpp-client/-/whpp-client-0.1.2.tgz",
"integrity": "sha512-Mau11ykVIZudy+7Qz2tJZbV2cuj8Un7eT2QRBGFA42RPL8djfEi/RIZ+6b9C1Bc1EAppl26zoh28D8/KstFioQ=="
},
"node_modules/@hapi/address": {
"version": "2.1.4",
"resolved": "https://registry.npmmirror.com/@hapi/address/-/address-2.1.4.tgz",
@ -10209,7 +10276,6 @@
"version": "3.3.0",
"resolved": "https://registry.npmmirror.com/events/-/events-3.3.0.tgz",
"integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.8.x"
@ -17329,6 +17395,11 @@
"node": ">=4.0.0"
}
},
"node_modules/mitt": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
"integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
},
"node_modules/mixin-deep": {
"version": "1.3.2",
"resolved": "https://registry.npmmirror.com/mixin-deep/-/mixin-deep-1.3.2.tgz",

3
vr/package.json
View File

@ -10,6 +10,7 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@eyevinn/webrtc-player": "^0.13.0",
"core-js": "^3.12.0",
"deasync": "^0.1.30",
"flv.js": "^1.5.0",
@ -24,6 +25,8 @@
"vuex": "^3.6.2"
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/preset-env": "^7.26.9",
"@vue/cli-plugin-babel": "^4.3.1",
"@vue/cli-plugin-e2e-cypress": "^4.3.1",
"@vue/cli-plugin-eslint": "^4.3.1",

50
vr/src/components/VRLive/index.vue
View File

@ -71,9 +71,11 @@
</template>
<script>
import { WebRTCPlayer } from "@eyevinn/webrtc-player"
import * as THREE from 'three'
import threeOrbitControls from 'three-orbit-controls'
import flvjs from 'flv.js'
// import { WebRTCPlayer } from "@eyevinn/webrtc-player"
const OrbitControls = threeOrbitControls(THREE)
export default {
@ -93,7 +95,7 @@ export default {
controls: null,
deviceOrientationData: {},
hls: null,
player: {},
player: null,
videoContainer: '',
playVariables: {
/*
@ -252,8 +254,10 @@ export default {
case 'normal':
this.getNormalVideo(this.option.source.url, this.video)
break
case 'whep':
this.getWHEP(this.video)
break
default:
this.playVariables.error.code = 1
this.playVariables.error.msg = '未知的视频类型'
break
}
@ -345,6 +349,38 @@ export default {
return flvPlayer
}
},
getWHEP (video) {
const player = new WebRTCPlayer({
video: video,
type: "whep"
});
// Add error handling
player.on('error', (error) => {
console.error('WebRTC Player Error:', error);
});
// Load and start playing the WHEP URL
try {
console.log(this.option.source.url)
player.load(new URL(this.option.source.url))
player.on('waiting', () => {
console.error('waiting:');
});
player.on('pause', () => {
console.error('pause:');
});
player.on('timeupdate', () => {
console.error('timeupdate:');
});
player.on('error', () => {
console.error('error:');
});
} catch (error) {
console.error('Invalid URL or initialization error:', error);
}
},
onWindowResize (el) {
this.camera.aspect = el.clientWidth / el.clientHeight
this.camera.updateProjectionMatrix()
@ -418,6 +454,16 @@ export default {
control.classList.add('control-hidden')
}
}
},
play () {
if (this.video) {
this.video.play();
}
},
pause () {
if (this.video) {
this.video.pause();
}
}
// 有更好的选择 three轨道控制器
// abandoned 对接鼠标移动事件,剩余惯性尚需对接，使滑动体验更加流畅

6
vr/src/router/index.js
View File

@ -1,5 +1,6 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import WebRTCPlayer from '@/views/WebRTCPlayer.vue'
Vue.use(VueRouter)
@ -24,6 +25,11 @@ const routes = [
path: '/test',
name: 'Test',
component: () => import('../views/Test')
}, {
path: '/webrtc-player',
name: 'WebRTCPlayer',
component: WebRTCPlayer,
props: { sourceUrl: 'http://localhost:1985/rtc/v1/whep/?app=live&stream=livestream' }
}
]

6
vr/src/views/VRLive.vue
View File

@ -24,8 +24,9 @@ export default {
normal
hls
flv
whep
*/
type: 'flv',
type: 'whep',
/*
测试地址
https://www.wangwentehappy.tk/assets/video/1.mp4
@ -34,7 +35,8 @@ export default {
http://localhost:9001/live/wwt/index.m3u8
*/
// url: 'https://www.ashenone.tk/public/video/1.mp4'
url: 'http://localhost:8079/live/livestream.flv'
// url: 'http://localhost:8080/live/livestream.flv'
url: 'http://localhost:1985/rtc/v1/whep/?app=live&stream=livestream'
}
}
}

80
vr/src/views/WebRTCPlayer.vue Normal file
View File

@ -0,0 +1,80 @@
<template>
<div id="webrtcPlayerContainer" class="webrtc-player">
<video ref="videoElement" class="video-js vjs-default-skin" controls autoplay playsinline></video>
</div>
</template>
<script>
import { WebRTCPlayer } from "@eyevinn/webrtc-player"; // 引入 WebRTCPlayer
export default {
name: 'WebRTCPlayer',
props: {
sourceUrl: {
type: String,
required: true
}
},
data() {
return {
player: null,
playVariables: {
status: 'pause',
currentTime: 0,
totalTime: 0,
notice: ''
}
};
},
mounted() {
this.initPlayer();
},
beforeDestroy() {
if (this.player) {
this.player.dispose();
}
},
methods: {
initPlayer() {
// Initialize WebRTCPlayer
this.player = new WebRTCPlayer({
video: this.$refs.videoElement,
type: "whep"
});
this.player.load(new URL(this.sourceUrl)); // 使用传入的流地址
this.player.on('waiting', () => {
this.playVariables.status = 'loading';
});
this.player.on('playing', () => {
this.playVariables.status = 'playing';
});
this.player.on('pause', () => {
this.playVariables.status = 'pause';
});
this.player.on('timeupdate', () => {
this.playVariables.currentTime = this.player.currentTime();
this.playVariables.totalTime = this.player.duration();
});
this.player.on('error', () => {
this.playVariables.notice = '播放错误';
});
}
}
}
</script>
<style lang="scss" scoped>
.webrtc-player {
width: 100%;
height: 100%;
.video-js {
width: 100%;
height: 100%;
}
}
</style>

5
vr/vue.config.js
View File

@ -8,7 +8,7 @@ module.exports = {
open: true,
openPage: '',
host: '0.0.0.0',
port: 8080,
port: 8081,
https: false,
proxy: null, // 设置代理
before: app => {}
@ -42,5 +42,6 @@ module.exports = {
maxSize: 250000
}
}
}
},
transpileDependencies: ['@eyevinn/webrtc-player']
}