add webrtc stream

vr/package-lock.json

@@ -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",
+      "version": "7.26.8",
-      "resolved": "https://registry.npmmirror.com/@babel/compat-data/-/compat-data-7.26.5.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.8.tgz",
-      "integrity": "sha512-XvcZi1KWf88RVbF9wn8MN6tYFloU5qX8KjuF3E1PVBmJ9eypXfs4GRiJwLuTZL0iSnJUKn1BFPa5BPZZJyFzPg==",
+      "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",
+      "version": "7.26.9",
-      "resolved": "https://registry.npmmirror.com/@babel/generator/-/generator-7.26.5.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.9.tgz",
-      "integrity": "sha512-2caSP6fN9I7HOe6nqhtft7V4g7/V/gfDsC3Ag4W7kEzzvRGKqiv0pu0HogPiZ3KaVSoNDhUws6IJjDjpfmYIXw==",
+      "integrity": "sha512-kEWdzjOAUMW4hAyrzJ0ZaTOu9OmpyDIQicIh0zg0EEcEkYXZb2TjtBhnHi2ViX7PKwZqF4xwqfAm299/QMP3lg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.26.5",
+        "@babel/parser": "^7.26.9",
-        "@babel/types": "^7.26.5",
+        "@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",
+      "version": "7.26.9",
-      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.26.7.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.9.tgz",
-      "integrity": "sha512-kEvgGGgEjRUutvdVvZhbn/BxVt+5VSpwXz1j3WYXQbXDo8KzFOPNG2GQbdAiNq8g6wn1yKk7C/qrke03a84V+w==",
+      "integrity": "sha512-81NWa1njQblgZbQHxWHpxxCzNsa3ZwvFqpUg7P+NNUU6f3UU2jBEg4OlF/J6rl8+PQGh1q6/zWScd001YwcA5A==",
-      "license": "MIT",
       "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",
+      "version": "7.26.8",
-      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.25.9.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.26.8.tgz",
-      "integrity": "sha512-RXV6QAzTBbhDMO9fWwOmwwTuYaiPbggWQ9INdZqAYeSHyG7FzQ+nOZaUUjNwKv9pV3aE4WFqFm1Hnbci5tBCAw==",
+      "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",
+      "version": "7.26.9",
-      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.25.9.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.26.9.tgz",
-      "integrity": "sha512-LqHxduHoaGELJl2uhImHwRQudhCM50pT46rIBNvtT/Oql3nqiS3wOwP+5ten7NpYSXrrVLgtZU3DZmPtWZo16A==",
+      "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",
+      "version": "7.26.8",
-      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.25.9.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.26.8.tgz",
-      "integrity": "sha512-o97AE4syN71M/lxrCtQByzphAdlYluKPDBzDVzMmfCobUjjhAryZV0AIpRPrxN0eAkxXO6ZLEScmt+PNhj2OTw==",
+      "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",
+      "version": "7.26.9",
-      "resolved": "https://registry.npmmirror.com/@babel/preset-env/-/preset-env-7.26.7.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.26.9.tgz",
-      "integrity": "sha512-Ycg2tnXwixaXOVb29rana8HNPgLVBof8qqtNQ9LE22IoyZboQbGSxI6ZySMdW3K5nAe6gu35IaJefUJflhUFTQ==",
+      "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",
+      "version": "7.26.9",
-      "resolved": "https://registry.npmmirror.com/@babel/template/-/template-7.25.9.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.26.9.tgz",
-      "integrity": "sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==",
+      "integrity": "sha512-qyRplbeIpNZhmzOysF/wFMuP9sctmh2cFzRAZOn1YapxBsE1i9bJIY586R/WBLfLcmcBlM8ROBiQURnnNy+zfA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.25.9",
+        "@babel/code-frame": "^7.26.2",
-        "@babel/parser": "^7.25.9",
+        "@babel/parser": "^7.26.9",
-        "@babel/types": "^7.25.9"
+        "@babel/types": "^7.26.9"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.26.7",
+      "version": "7.26.9",
-      "resolved": "https://registry.npmmirror.com/@babel/traverse/-/traverse-7.26.7.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.9.tgz",
-      "integrity": "sha512-1x1sgeyRLC3r5fQOM0/xtQKsYjyxmFjaOrLJNtZ81inNjyJHGIolTULPiSc/2qe1/qfpFLisLQYFnnZl7QoedA==",
+      "integrity": "sha512-ZYW7L+pL8ahU5fXmNbPF+iZFHCv5scFak7MZ9bwaRPLUhHh7QQEMjZUg0HevihoqCM5iSYHN61EyCoZvqC+bxg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.26.2",
-        "@babel/generator": "^7.26.5",
+        "@babel/generator": "^7.26.9",
-        "@babel/parser": "^7.26.7",
+        "@babel/parser": "^7.26.9",
-        "@babel/template": "^7.25.9",
+        "@babel/template": "^7.26.9",
-        "@babel/types": "^7.26.7",
+        "@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",
+      "version": "7.26.9",
-      "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.26.7.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.9.tgz",
-      "integrity": "sha512-t8kDRGrKXyp6+tjUh7hw2RLyclsW4TRoRvRHtSyAX9Bb5ldlFh+90YAYY6awRXrlB4G5G2izNeGySpATlFzmOg==",
+      "integrity": "sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==",
-      "license": "MIT",
       "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",

vr/package.json

@@ -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",

vr/src/components/VRLive/index.vue

@@ -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 对接鼠标移动事件,剩余惯性尚需对接，使滑动体验更加流畅

vr/src/router/index.js

@@ -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' }
   }
 ]
 

vr/src/views/VRLive.vue

@@ -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'
         }
       }
     }

vr/src/views/WebRTCPlayer.vue

@@ -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>

vr/vue.config.js

@@ -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']
 }