提拉提拉

.gitignore

@@ -19,3 +19,4 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw?
+.history

package-lock.json

@@ -1867,6 +1867,14 @@
       "integrity": "sha1-vxEWycdYxRt6kz0pa3LCIe2UKLY=",
       "dev": true
     },
+    "aes-decrypter": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-1.0.3.tgz",
+      "integrity": "sha1-nAa4pUNaWtCduTP4oBSvzxhMw04=",
+      "requires": {
+        "pkcs7": "^0.2.3"
+      }
+    },
     "aggregate-error": {
       "version": "3.0.1",
       "resolved": "https://registry.npm.taobao.org/aggregate-error/download/aggregate-error-3.0.1.tgz",
@@ -4164,6 +4172,11 @@
         }
       }
     },
+    "dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npm.taobao.org/domain-browser/download/domain-browser-1.2.0.tgz",
@@ -4425,6 +4438,11 @@
         "is-symbol": "^1.0.2"
       }
     },
+    "es5-shim": {
+      "version": "4.5.14",
+      "resolved": "https://registry.npmjs.org/es5-shim/-/es5-shim-4.5.14.tgz",
+      "integrity": "sha512-7SwlpL+2JpymWTt8sNLuC2zdhhc+wrfe5cMPI2j0o6WsPdfAiPwmFy2f0AocPB4RQVBOZ9kNTgi5YF7TdhkvEg=="
+    },
     "escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npm.taobao.org/escape-html/download/escape-html-1.0.3.tgz",
@@ -5922,6 +5940,22 @@
       "integrity": "sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=",
       "dev": true
     },
+    "global": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
+      "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
+      "requires": {
+        "min-document": "^2.19.0",
+        "process": "~0.5.1"
+      },
+      "dependencies": {
+        "process": {
+          "version": "0.5.2",
+          "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
+          "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8="
+        }
+      }
+    },
     "globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npm.taobao.org/globals/download/globals-11.12.0.tgz",
@@ -6452,6 +6486,11 @@
       "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
       "dev": true
     },
+    "individual": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
+      "integrity": "sha1-gzsJfa0jKU52EXqY+zjg2a1hu5c="
+    },
     "infer-owner": {
       "version": "1.0.4",
       "resolved": "https://registry.npm.taobao.org/infer-owner/download/infer-owner-1.0.4.tgz",
@@ -6787,6 +6826,11 @@
       "integrity": "sha1-8Rb4Bk/pCz94RKOJl8C3UFEmnx0=",
       "dev": true
     },
+    "is-function": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
+      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
+    },
     "is-glob": {
       "version": "4.0.1",
       "resolved": "https://registry.npm.taobao.org/is-glob/download/is-glob-4.0.1.tgz",
@@ -7465,6 +7509,11 @@
         "yallist": "^3.0.2"
       }
     },
+    "m3u8-parser": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-2.1.0.tgz",
+      "integrity": "sha1-yBcDKewc1RXQ1Yu4t2LamJbLA2g="
+    },
     "make-dir": {
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/make-dir/download/make-dir-2.1.0.tgz",
@@ -7650,6 +7699,14 @@
       "integrity": "sha1-ggyGo5M0ZA6ZUWkovQP8qIBX0CI=",
       "dev": true
     },
+    "min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
+      "requires": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "mini-css-extract-plugin": {
       "version": "0.9.0",
       "resolved": "https://registry.npm.taobao.org/mini-css-extract-plugin/download/mini-css-extract-plugin-0.9.0.tgz",
@@ -7852,6 +7909,11 @@
       "integrity": "sha1-FjDEKyJR/4HiooPelqVJfqkuXg0=",
       "dev": true
     },
+    "mux.js": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-4.3.2.tgz",
+      "integrity": "sha512-g0q6DPdvb3yYcoK7ElBGobdSSrhY/RjPt19U7uUc733aqvc5bCS/aCvL9z+448y+IoCZnYDwyZfQBBXMSmGOaQ=="
+    },
     "mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npm.taobao.org/mz/download/mz-2.7.0.tgz",
@@ -8066,8 +8128,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-copy": {
       "version": "0.1.0",
@@ -8439,6 +8500,11 @@
         "safe-buffer": "^5.1.1"
       }
     },
+    "parse-headers": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.3.tgz",
+      "integrity": "sha512-QhhZ+DCCit2Coi2vmAKbq5RGTRcQUOE2+REgv8vdyu7MnYx2eZztegqtTx99TZ86GTIwqiy3+4nQTWZ2tgmdCA=="
+    },
     "parse-json": {
       "version": "5.0.0",
       "resolved": "https://registry.npm.taobao.org/parse-json/download/parse-json-5.0.0.tgz",
@@ -8583,6 +8649,11 @@
         "pinkie": "^2.0.0"
       }
     },
+    "pkcs7": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-0.2.3.tgz",
+      "integrity": "sha1-ItYGZtAQZcXyRDkJjkpIMEUic74="
+    },
     "pkg-dir": {
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/pkg-dir/download/pkg-dir-3.0.0.tgz",
@@ -9313,8 +9384,7 @@
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npm.taobao.org/process/download/process-0.11.10.tgz",
-      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
-      "dev": true
+      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
     },
     "process-nextick-args": {
       "version": "2.0.1",
@@ -9870,6 +9940,12 @@
         "inherits": "^2.0.1"
       }
     },
+    "rtmp-streamer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/rtmp-streamer/-/rtmp-streamer-1.0.2.tgz",
+      "integrity": "sha1-QFb6lisPJ7lxtl5m58xPJzRq8Is=",
+      "dev": true
+    },
     "run-async": {
       "version": "2.4.0",
       "resolved": "https://registry.npm.taobao.org/run-async/download/run-async-2.4.0.tgz?cache=0&sync_timestamp=1582711719088&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Frun-async%2Fdownload%2Frun-async-2.4.0.tgz",
@@ -9888,6 +9964,14 @@
         "aproba": "^1.1.1"
       }
     },
+    "rust-result": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
+      "integrity": "sha1-NMdbLm3Dn+WHXlveyFteD5FTb3I=",
+      "requires": {
+        "individual": "^2.0.0"
+      }
+    },
     "rxjs": {
       "version": "6.5.5",
       "resolved": "https://registry.npm.taobao.org/rxjs/download/rxjs-6.5.5.tgz",
@@ -9902,6 +9986,14 @@
       "resolved": "https://registry.npm.taobao.org/safe-buffer/download/safe-buffer-5.1.2.tgz",
       "integrity": "sha1-mR7GnSluAxN0fVm9/St0XDX4go0="
     },
+    "safe-json-parse": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
+      "integrity": "sha1-fA9XjPzNEtM6ccDgVBPi7KFx6qw=",
+      "requires": {
+        "rust-result": "^1.0.0"
+      }
+    },
     "safe-regex": {
       "version": "1.1.0",
       "resolved": "https://registry.npm.taobao.org/safe-regex/download/safe-regex-1.1.0.tgz?cache=0&sync_timestamp=1571687334026&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsafe-regex%2Fdownload%2Fsafe-regex-1.1.0.tgz",
@@ -11081,6 +11173,11 @@
       "integrity": "sha1-6xXRKIJ/vuKEFUnhcfRe0zisfjU=",
       "dev": true
     },
+    "tsml": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tsml/-/tsml-1.0.1.tgz",
+      "integrity": "sha1-ifghi52eJX9H1/a1bQHFpNLGj8M="
+    },
     "tty-browserify": {
       "version": "0.0.0",
       "resolved": "https://registry.npm.taobao.org/tty-browserify/download/tty-browserify-0.0.0.tgz",
@@ -11351,6 +11448,11 @@
         "requires-port": "^1.0.0"
       }
     },
+    "url-toolkit": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.0.tgz",
+      "integrity": "sha512-Rde0c9S4fJK3FaHim3DSgdQ8IFrSXcZCpAJo9T7/FA+BoQGhK0ow3mpwGQLJCPYsNn6TstpW7/7DzMpSpz9F9w=="
+    },
     "use": {
       "version": "3.1.1",
       "resolved": "https://registry.npm.taobao.org/use/download/use-3.1.1.tgz",
@@ -11449,6 +11551,99 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "video.js": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/video.js/-/video.js-6.13.0.tgz",
+      "integrity": "sha512-36/JR/GhPQSZj0o+GNbhcEYv/b0SkV9SQsjlodAnzMQYN0TA7VhmqrKPYMCi1NGRYu7S9W3OaFCFoUxkYfSVlg==",
+      "requires": {
+        "babel-runtime": "^6.9.2",
+        "global": "4.3.2",
+        "safe-json-parse": "4.0.0",
+        "tsml": "1.0.1",
+        "videojs-font": "2.1.0",
+        "videojs-ie8": "1.1.2",
+        "videojs-vtt.js": "0.12.6",
+        "xhr": "2.4.0"
+      }
+    },
+    "videojs-contrib-hls": {
+      "version": "5.15.0",
+      "resolved": "https://registry.npmjs.org/videojs-contrib-hls/-/videojs-contrib-hls-5.15.0.tgz",
+      "integrity": "sha512-18zbMYZ0XRBKTPEayA9bFTWWrqhT9b4G8+zf0czJLD7Epe5PcK1I/3dflTHQeQ5rwlWir+/XnFU3sMg/B2MMcw==",
+      "requires": {
+        "aes-decrypter": "1.0.3",
+        "global": "^4.3.0",
+        "m3u8-parser": "2.1.0",
+        "mux.js": "4.3.2",
+        "url-toolkit": "^2.1.3",
+        "video.js": "^5.19.1 || ^6.2.0",
+        "videojs-contrib-media-sources": "4.7.2",
+        "webwackify": "0.1.6"
+      }
+    },
+    "videojs-contrib-media-sources": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/videojs-contrib-media-sources/-/videojs-contrib-media-sources-4.7.2.tgz",
+      "integrity": "sha512-e6iCHWBFuV05EGo7v+pS9iepObXnJ9joms467gzi8ZjpKVb3ifha9M0Ja24Rd8JfvYpzjltsgDVtGFDvIg4hQQ==",
+      "requires": {
+        "global": "^4.3.0",
+        "mux.js": "4.3.2",
+        "video.js": "^5.17.0 || ^6.2.0",
+        "webwackify": "0.1.6"
+      }
+    },
+    "videojs-flash": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/videojs-flash/-/videojs-flash-2.2.1.tgz",
+      "integrity": "sha512-mHu6TD12EKkxMvr8tg4AcfV/DuVLff427nneoZom3N9Dd2bv0sJOWwdLPQH1v5BCuAuXAVuAOba56ovTl+G3tQ==",
+      "requires": {
+        "global": "^4.4.0",
+        "video.js": "^6 || ^7",
+        "videojs-swf": "5.4.2"
+      },
+      "dependencies": {
+        "global": {
+          "version": "4.4.0",
+          "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+          "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+          "requires": {
+            "min-document": "^2.19.0",
+            "process": "^0.11.10"
+          }
+        }
+      }
+    },
+    "videojs-font": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-2.1.0.tgz",
+      "integrity": "sha1-olkwpn9snPvyu4jay4xrRR8JM3k="
+    },
+    "videojs-hotkeys": {
+      "version": "0.2.25",
+      "resolved": "https://registry.npmjs.org/videojs-hotkeys/-/videojs-hotkeys-0.2.25.tgz",
+      "integrity": "sha512-XgMjWiqGlmAjuHtpP529A2voVh++z46FSD0XeSy+65yeuTZOd+w2CJmfrL4jPpGm+MME5l9lOLfVpoEeDaBa1Q=="
+    },
+    "videojs-ie8": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/videojs-ie8/-/videojs-ie8-1.1.2.tgz",
+      "integrity": "sha1-oj09hgitcZK2nGB3/E64SJmNNdk=",
+      "requires": {
+        "es5-shim": "^4.5.1"
+      }
+    },
+    "videojs-swf": {
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/videojs-swf/-/videojs-swf-5.4.2.tgz",
+      "integrity": "sha512-FGg+Csioa8/A/EacvFefBdb9Z0rSiMlheHDunZnN3xXfUF43jvjawcWFQnZvrv1Cs1nE1LBrHyUZjF7j2mKOLw=="
+    },
+    "videojs-vtt.js": {
+      "version": "0.12.6",
+      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.12.6.tgz",
+      "integrity": "sha512-XFXeGBQiljnElMhwCcZst0RDbZn2n8LU7ZScXryd3a00OaZsHAjdZu/7/RdSr7Z1jHphd45FnOvOQkGK4YrWCQ==",
+      "requires": {
+        "global": "^4.3.1"
+      }
+    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz?cache=0&sync_timestamp=1572870776965&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvm-browserify%2Fdownload%2Fvm-browserify-1.1.2.tgz",
@@ -11567,6 +11762,18 @@
       "integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
       "dev": true
     },
+    "vue-video-player": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/vue-video-player/-/vue-video-player-5.0.2.tgz",
+      "integrity": "sha512-IZXeRGGSX4YIp54G0Q5cB7iqh6Ok6Dpa2jRkjdyvMWw7MShJuh54/d5QNb1CZ+CvZUzX/TH7osnpir7mBNcFvQ==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "video.js": "^6.6.0",
+        "videojs-contrib-hls": "^5.12.2",
+        "videojs-flash": "^2.1.0",
+        "videojs-hotkeys": "^0.2.20"
+      }
+    },
     "vuex": {
       "version": "3.3.0",
       "resolved": "https://registry.npm.taobao.org/vuex/download/vuex-3.3.0.tgz",
@@ -12029,6 +12236,11 @@
       "integrity": "sha1-XS/yKXcAPsaHpLhwc9+7rBRszyk=",
       "dev": true
     },
+    "webwackify": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/webwackify/-/webwackify-0.1.6.tgz",
+      "integrity": "sha512-pGcw1T3HpNnM/UTRQqqRkkkzythSLts05mB+7Gr00B+0VbL0m39dFL5g20rSIEUt9Wrpw+/8k+snxRlUFHhcqA=="
+    },
     "which": {
       "version": "1.3.1",
       "resolved": "https://registry.npm.taobao.org/which/download/which-1.3.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwhich%2Fdownload%2Fwhich-1.3.1.tgz",
@@ -12126,11 +12338,21 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "xhr": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/xhr/-/xhr-2.4.0.tgz",
+      "integrity": "sha1-4W5mpF+GmGHu76tBbV7/ci3ECZM=",
+      "requires": {
+        "global": "~4.3.0",
+        "is-function": "^1.0.1",
+        "parse-headers": "^2.0.0",
+        "xtend": "^4.0.0"
+      }
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npm.taobao.org/xtend/download/xtend-4.0.2.tgz",
-      "integrity": "sha1-u3J3n1+kZRhrH0OPZ0+jR/2121Q=",
-      "dev": true
+      "integrity": "sha1-u3J3n1+kZRhrH0OPZ0+jR/2121Q="
     },
     "y18n": {
       "version": "4.0.0",

package.json

@@ -19,9 +19,12 @@
     "moment": "^2.25.3",
     "naf-core": "^0.1.2",
     "stomp": "^0.1.1",
+    "videojs-contrib-hls": "^5.15.0",
+    "videojs-flash": "^2.2.1",
     "vue": "^2.6.11",
     "vue-meta": "^2.3.3",
     "vue-router": "^3.1.6",
+    "vue-video-player": "^5.0.2",
     "vuex": "^3.1.3",
     "wangeditor": "^3.1.1"
   },
@@ -39,6 +42,7 @@
     "less": "^3.11.1",
     "less-loader": "^5.0.0",
     "prettier": "^1.19.1",
+    "rtmp-streamer": "^1.0.2",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {

src/layout/direct/directVideo.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="video-js">
+    <div v-if="videoSrc === ''" class="no-video">
+      暂未播放视频
+    </div>
+    <video-player v-else class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"> </video-player>
+  </div>
+</template>
+
+<script>
+import videojs from 'video.js';
+import 'video.js/dist/video-js.css';
+import 'vue-video-player/src/custom-theme.css';
+import { videoPlayer } from 'vue-video-player';
+import 'videojs-flash';
+import SWF_URL from 'videojs-swf/dist/video-js.swf';
+
+videojs.options.flash.swf = SWF_URL; // 设置flash路径，Video.js会在不支持html5的浏览中使用flash播放视频文件
+export default {
+  name: 'videojs',
+  components: {
+    videoPlayer,
+  },
+  data() {
+    return {
+      videoSrc: '',
+      playerOptions: {
+        live: true,
+        autoplay: true, // 如果true，浏览器准备好时开始播放
+        muted: false, // 默认情况下将会消除任何音频
+        loop: false, // 是否视频一结束就重新开始
+        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+        controlBar: {
+          timeDivider: false,
+          durationDisplay: false,
+          remainingTimeDisplay: false,
+          currentTimeDisplay: false, // 当前时间
+          volumeControl: false, // 声音控制键
+          playToggle: false, // 暂停和播放键
+          progressControl: false, // 进度条
+          fullscreenToggle: true, // 全屏按钮
+        },
+        techOrder: ['flash'], // 兼容顺序
+        flash: {
+          hls: {
+            withCredentials: false,
+          },
+          swf: SWF_URL,
+        },
+        sources: [
+          {
+            type: 'rtmp/flv',
+            src: '', // 视频地址-改变它的值播放的视频会改变
+          },
+        ],
+        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
+      },
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+.video-js {
+  width: 100%;
+  height: 100%;
+  .no-video {
+    display: flex;
+    height: 100%;
+    font-size: 14px;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+  }
+}
+</style>

src/router/index.js

@@ -306,6 +306,24 @@ const live = [
     meta: { title: '个人中心', subSite: true },
     component: () => import('../views/userCenter/index.vue'),
   },
+  {
+    path: '/tltest',
+    meta: { title: '推流测试', subSite: true },
+    name: 'tlcs1',
+    component: () => import('../views/tltest.vue'),
+  }, //测试页
+  {
+    path: '/tllltest',
+    meta: { title: '拉流测试', subSite: true },
+    name: 'llcs1',
+    component: () => import('../views/tllltest.vue'),
+  }, //测试页
+  {
+    path: '/tltest2',
+    meta: { title: '推流测试2', subSite: true },
+    name: 'tlcs2',
+    component: () => import('../views/tltest2.vue'),
+  }, //测试页
 ];
 const routes = [...live];
 

src/views/direct.vue

@@ -46,15 +46,16 @@
         <div class="w_1200">
           <el-col :span="24" class="livemain">
             <el-col :span="24" class="livevideo">
-              <el-col :span="24" class="left" @click.native="btnDirectDetail">
-                <el-col :span="24" class="title">
+              <el-col :span="24" class="left">
+                <el-col :span="24" class="title" @click.native="btnDirectDetail">
                   <span style="color: rgb(255, 132, 0);">现场</span>
                   <span>直播</span>
                 </el-col>
                 <el-col :span="24" class="video">
-                  <video :src="file_path" controls="controls" style="height: 395px; width: 100%;">
+                  <!-- <video :src="file_path" controls="controls" style="height: 395px; width: 100%;">
                     您的浏览器不支持 video 标签。
-                  </video>
+                  </video> -->
+                  <videoPlayer ref="videoPlayer" :options="videoOptions" class="vjs-custom-skin videoPlayer" :playsinline="true" />
                 </el-col>
               </el-col>
               <el-col :span="24" class="right">
@@ -94,6 +95,9 @@
                         </ul>
                       </el-col>
                     </el-tab-pane>
+                    <el-tab-pane label="推流测试" name="four"> </el-tab-pane>
+                    <el-tab-pane label="拉流测试" name="five"> </el-tab-pane>
+                    <el-tab-pane label="推流测试2" name="six"> </el-tab-pane>
                   </el-tabs>
                 </el-col>
                 <!-- -->
@@ -295,6 +299,11 @@
 </template>
 
 <script>
+import 'video.js/dist/video-js.css';
+import 'vue-video-player/src/custom-theme.css';
+import { videoPlayer } from 'vue-video-player';
+import 'videojs-flash';
+
 import liveFoot from '@/layout/live/foot.vue';
 import chat from '@/components/parts/chat.vue';
 import directDetail from '@/layout/direct/directDetail.vue';
@@ -326,6 +335,7 @@ export default {
     liveFoot,
     directDetail, //技术，产品，服务详情
     exportDetail, //专家详情
+    videoPlayer,
   },
   data: () => ({
     activeName: 'second',
@@ -469,6 +479,35 @@ export default {
     chengguo: '',
     qiatan: '',
     dacheng: '',
+    videoSrc: '',
+    videoOptions: {
+      playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
+      autoplay: false, //如果true,浏览器准备好时开始回放。
+      muted: false, // 默认情况下将会消除任何音频。
+      loop: false, // 导致视频一结束就重新开始。
+      preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+      language: 'zh-CN',
+      aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+      techOrder: ['flash', 'html5'], // 兼容顺序
+      fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+      sources: [
+        {
+          // 流配置，数组形式，会根据兼容顺序自动切换
+          type: 'rtmp/hls',
+          src: 'rtmp://58.200.131.2:1935/livetv/hunantv',
+          // src: 'rtmp://play.liaoningdoupo.com/live/1',
+        },
+      ],
+      poster: '', //你的封面地址
+      // width: document.documentElement.clientWidth,
+      notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
+      controlBar: {
+        timeDivider: true,
+        durationDisplay: true,
+        remainingTimeDisplay: false,
+        fullscreenToggle: true, //全屏按钮
+      },
+    },
   }),
   created() {
     this.searchInfo();
@@ -636,7 +675,13 @@ export default {
       this.$router.push({ path: '/live/hall/dock/zhanjiaduijie', query: { id: data.id, dockid: this.id } });
     },
     handleClicks(tab, event) {
-      console.log(tab, event);
+      if (tab.name == 'four') {
+        this.$router.push('/tltest');
+      } else if (tab.name == 'five') {
+        this.$router.push('/tllltest');
+      } else if (tab.name == 'six') {
+        this.$router.push('/tltest2');
+      }
     },
 
     // 关闭专家详情

src/views/tllltest.vue

@@ -0,0 +1,56 @@
+<template>
+  <section class="video-box">
+    <videoPlayer ref="videoPlayer" :options="videoOptions" class="vjs-custom-skin videoPlayer" :playsinline="true" />
+  </section>
+</template>
+<script>
+import 'video.js/dist/video-js.css';
+import 'vue-video-player/src/custom-theme.css';
+import { videoPlayer } from 'vue-video-player';
+import 'videojs-flash';
+export default {
+  components: {
+    videoPlayer,
+  },
+  data() {
+    return {
+      videoSrc: '',
+      // 视频播放
+      videoOptions: {
+        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
+        autoplay: false, //如果true,浏览器准备好时开始回放。
+        muted: false, // 默认情况下将会消除任何音频。
+        loop: false, // 导致视频一结束就重新开始。
+        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+        language: 'zh-CN',
+        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+        techOrder: ['flash', 'html5'], // 兼容顺序
+        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+        sources: [
+          {
+            // 流配置，数组形式，会根据兼容顺序自动切换
+            type: 'rtmp/hls',
+            src: 'rtmp://58.200.131.2:1935/livetv/hunantv',
+            // src: 'rtmp://play.liaoningdoupo.com/live/1',
+          },
+        ],
+        poster: '', //你的封面地址
+        // width: document.documentElement.clientWidth,
+        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
+        controlBar: {
+          timeDivider: true,
+          durationDisplay: true,
+          remainingTimeDisplay: false,
+          fullscreenToggle: true, //全屏按钮
+        },
+      },
+    };
+  },
+};
+</script>
+<style scoped>
+.video-box {
+  width: 1000px;
+  padding: 20px;
+}
+</style>

src/views/tltest.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <br />
+    <div id="pusher" style="width:300px;height:400px;background-color:#000000;margin:auto"></div>
+    <br />
+    <div style="text-align:center; margin:auto;">
+      <input id="path" type="text" value="" placeholder="请输入直播服务器地址(rtmp)" />
+      <button id="pp" v-on:click="ppPusher()">开始</button>
+    </div>
+    <div class="button" v-on:click="switchCamera()">切换摄像头</div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      bstart: false,
+      pusher: null,
+    };
+  },
+  created() {
+    document.addEventListener('plusready', this.plusReady, false);
+  },
+  methods: {
+    switchCamera() {
+      this.pusher.switchCamera();
+    },
+    plusReady() {
+      // 创建直播推流控件
+      this.pusher = new plus.video.LivePusher('pusher', {
+        url: 'rtmp://live.liaoningdoupo.com/live/',
+      });
+      // 监听状态变化事件
+      this.pusher.addEventListener(
+        'statechange',
+        function(e) {
+          console.log('statechange: ' + JSON.stringify(e));
+        },
+        false
+      );
+    },
+    ppPusher() {
+      if (this.bstart) {
+        this.pusher.stop();
+        this.bstart = false;
+      } else {
+        var path = document.getElementById('path').value;
+        if (path && path.length > 0) {
+          this.pusher.setOptions({ url: path });
+          this.pusher.start();
+          this.bstart = true;
+        } else {
+          plus.nativeUI.toast('请输入直播服务器地址');
+        }
+      }
+      var pp = document.getElementById('pp');
+      pp.innerText = this.bstart ? '停止' : '开始';
+    },
+  },
+};
+</script>
+<style scoped>
+input {
+  width: 70%;
+  font-size: 16px;
+  padding: 0.2em 0.2em;
+  border: 1px solid #00b100;
+  -webkit-user-select: text;
+}
+.button,
+button {
+  width: 20%;
+  margin: 6px 0 6px 6px;
+  font-size: 16px;
+  color: #fff;
+  background-color: #00cc00;
+  border: 1px solid #00b100;
+  padding: 0.2em 0em;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+}
+</style>

src/views/tltest2.vue

@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <!-- <video ref="video" width="320" height="240" controls></video> -->
+    <video ref="video" width="320" height="240" controls></video>
+    <!-- <video ref="video1" width="320" height="240" controls></video> -->
+    <canvas ref="canvas" width="320px" height="240px"></canvas>
+    <button type="button" class="btn btn-info" @click="camera('environment')">Back Camera</button>
+    <button type="button" class="btn btn-info" @click="camera('user')">front Camera</button>
+  </div>
+</template>
+
+<script>
+/**
+ * 摄像头控制 demo
+ */
+export default {
+  data: () => ({
+    video: {},
+    localstream: undefined,
+  }),
+  methods: {
+    camera(face) {
+      // this.stop();
+      // this.gumScern(face);
+      // this.gumCamera(face);
+      this.start();
+    },
+    stop() {
+      return this.video.srcObject && this.video.srcObject.getTracks().map(t => t.stop());
+    },
+
+    start() {
+      navigator.mediaDevices.getUserMedia({ video: true }).then(
+        stream => {
+          // video.srcObject = stream; // 将流赋值给video标签 用于播放
+          this.$refs.video.srcObject = stream;
+          this.$refs.video.play();
+          this.$refs.video.publish('rtmp://live.liaoningdoupo.com/live/', 'zb001?txSecret=ff6a0cc52d12c6ff8e904c220a8dfec6&txTime=5ED6777F');
+          // video.onloadedmetadata = e => video.play();
+          const recorder = new MediaRecorder(stream); // 用于视频保存
+          recorder.ondataavailable = e => {
+            let herf = 'F:/test';
+            download.href = URL.createObjectURL(herf);
+          };
+          recorder.start();
+          console.log('-----------------------stream');
+          console.log(stream);
+          // let pause = this.$refs.video;
+          // pause.onclick = function() {
+          //   video.pause();
+          //   recorder.stop();
+          // };
+        },
+        error => console.log(error)
+      );
+    },
+    gumScern(face) {
+      return navigator.mediaDevices
+        .getDisplayMedia({ audio: true, video: true })
+        .then(stream => {
+          console.log('--------------------------getDisplayMedia');
+          console.log(stream);
+          this.$refs.video.srcObject = stream;
+          this.$refs.video.play();
+        })
+        .catch(() => {
+          navigator.mediaDevices.getDisplayMedia({ audio: false, video: true }).then(stream => {
+            console.log('error--------------------------getUserMedia');
+            console.log(stream);
+            this.$refs.video.srcObject = stream;
+            this.$refs.video.play();
+          });
+        });
+    },
+    gumCamera(face) {
+      return navigator.mediaDevices
+        .getUserMedia({ audio: false, video: true })
+        .then(stream => {
+          console.log('--------------------------getUserMedia');
+          console.log(stream);
+          // 将值保存到本地
+          let herf = 'rtmp://live.liaoningdoupo.com/live/zb001?txSecret=ff6a0cc52d12c6ff8e904c220a8dfec6&txTime=5ED6777F';
+          this.recorder = new MediaRecorder(stream);
+          this.recorder.ondataavailable = e => {
+            herf = e.data;
+            download.href = URL.createObjectURL(herf);
+          };
+          console.log('--------------------------start');
+          this.recorder.start();
+
+          this.$refs.video.srcObject = stream;
+          this.$refs.video.play();
+          console.log('--------------------------end');
+        })
+        .catch(() => {
+          navigator.mediaDevices.getUserMedia({ audio: false, video: true }).then(stream => {
+            console.log('error--------------------------getUserMedia');
+            console.log(stream);
+            this.$refs.video.srcObject = stream;
+            this.$refs.video.play();
+          });
+        });
+    },
+  },
+  mounted() {
+    this.camera('environment');
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>