Feat: custom header

src/components/Player.vue

@@ -17,6 +17,7 @@ interface options {
   url: string;
   isLive: boolean;
   type: string;
+  headers: Record<string, string>;
 }
 
 const Props = defineProps({
@@ -68,20 +69,18 @@ watch(
 
 const playFlv = (player: HTMLMediaElement, url: string, art: any) => {
   if (mpegts.isSupported()) {
-    let flv: mpegts.Player;
+    const Config: Record<string, Record<string, string>> = {};
     if (url.startsWith(window.location.origin) && localStorage.token) {
-      flv = mpegts.createPlayer(
-        { type: "flv", url, isLive: art.option.isLive },
-        {
-          headers: {
-            Authorization: localStorage.token
-          }
-        }
-      );
-    } else {
-      flv = mpegts.createPlayer({ type: "flv", url, isLive: art.option.isLive });
+      Config["headers"] = {
+        Authorization: localStorage.token
+      };
+    }
+    for (const key in Props.options.headers) {
+      Config["headers"][key] = Props.options.headers[key];
     }
 
+    const flv = mpegts.createPlayer({ type: "flv", url, isLive: art.option.isLive }, Config);
+
     flv.attachMediaElement(player);
     flv.load();
     art.flv = flv;
@@ -93,7 +92,12 @@ const playFlv = (player: HTMLMediaElement, url: string, art: any) => {
 
 const playMse = (player: HTMLMediaElement, url: string, art: any) => {
   if (mpegts.isSupported()) {
-    const mse = mpegts.createPlayer({ type: "mse", url });
+    const Config: Record<string, Record<string, string>> = {};
+    for (const key in Props.options.headers) {
+      Config["headers"][key] = Props.options.headers[key];
+    }
+
+    const mse = mpegts.createPlayer({ type: "mse", url, isLive: art.option.isLive }, Config);
 
     mse.attachMediaElement(player);
     mse.load();
@@ -106,7 +110,16 @@ const playMse = (player: HTMLMediaElement, url: string, art: any) => {
 
 const playMpegts = (player: HTMLMediaElement, url: string, art: any) => {
   if (mpegts.isSupported()) {
-    const mpegtsPlayer = mpegts.createPlayer({ type: "mpegts", url });
+    const Config: Record<string, Record<string, string>> = {};
+    for (const key in Props.options.headers) {
+      Config["headers"][key] = Props.options.headers[key];
+    }
+
+    const mpegtsPlayer = mpegts.createPlayer(
+      { type: "mpegts", url, isLive: art.option.isLive },
+      Config
+    );
+
     mpegtsPlayer.attachMediaElement(player);
     mpegtsPlayer.load();
     art.flv = mpegtsPlayer;
@@ -118,7 +131,12 @@ const playMpegts = (player: HTMLMediaElement, url: string, art: any) => {
 
 const playM2ts = (player: HTMLMediaElement, url: string, art: any) => {
   if (mpegts.isSupported()) {
-    const m2ts = mpegts.createPlayer({ type: "m2ts", url });
+    const Config: Record<string, Record<string, string>> = {};
+    for (const key in Props.options.headers) {
+      Config["headers"][key] = Props.options.headers[key];
+    }
+
+    const m2ts = mpegts.createPlayer({ type: "m2ts", url, isLive: art.option.isLive }, Config);
 
     m2ts.attachMediaElement(player);
     m2ts.load();
@@ -132,6 +150,11 @@ const playM2ts = (player: HTMLMediaElement, url: string, art: any) => {
 const playM3u8Config = {
   xhrSetup: function (xhr: XMLHttpRequest, url: string): void | Promise<void> {
     // xhr.open("GET", url, true);
+
+    for (const key in Props.options.headers) {
+      xhr.setRequestHeader(key, Props.options.headers[key]);
+    }
+
     if (url.startsWith(window.location.origin) && localStorage.token) {
       xhr.setRequestHeader("Authorization", localStorage.token);
     }
@@ -205,18 +228,19 @@ onMounted(() => {
   art = new Artplayer(playerOption.value);
 
   Emits("get-instance", art);
-  const needDestroy = (art: Artplayer, newOption: Option) => {
+  const needDestroy = (oldOption: options, newOption: options) => {
     return (
-      (art && art.option.isLive !== newOption.isLive) ||
-      art.option.type !== newOption.type ||
-      art.option.url !== newOption.url
+      oldOption.isLive !== newOption.isLive ||
+      oldOption.type !== newOption.type ||
+      oldOption.url !== newOption.url ||
+      oldOption.headers !== newOption.headers
     );
   };
 
   watch(
     () => Props.options,
-    () => {
-      if (needDestroy(art, playerOption.value)) {
+    (old, current) => {
+      if (needDestroy(old, current)) {
         console.log("destroy");
         art.destroy();
         const newDiv = document.createElement("div");

src/types/Movie.ts

@@ -13,15 +13,15 @@ export interface BaseMovieInfo {
   proxy: boolean;
   rtmpSource: boolean;
   type: string;
-  headers: null;
+  headers: Record<string, string>;
 }
 
 export interface EditMovieInfo {
   id: number;
   url: string;
   name: string;
   type: string;
-  headers: null;
+  headers: Record<string, string>;
 }
 
 export interface MovieStatus {

src/views/Cinema.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import type { WatchStopHandle } from "vue";
-import { useWebSocket, useWindowSize } from "@vueuse/core";
+import { useWebSocket, useWindowSize, watchOnce } from "@vueuse/core";
 import Player from "@/components/Player.vue";
 import ArtPlayer from "artplayer";
 import { roomStore } from "@/stores/room";
@@ -242,7 +242,7 @@ let newMovieInfo = ref<BaseMovieInfo>({
   url: "",
   rtmpSource: false,
   type: "",
-  headers: null
+  headers: {}
 });
 
 // 直播相关
@@ -352,7 +352,7 @@ let cMovieInfo = ref<EditMovieInfo>({
   url: "",
   name: "",
   type: "",
-  headers: null
+  headers: {}
 });
 
 // 打开编辑对话框
@@ -451,11 +451,9 @@ const swapMovie = async () => {
 };
 
 // 设置当前正在播放的影片
-const playerLoaded = ref(true);
 
 const { execute: reqChangeCurrentMovieApi } = changeCurrentMovieApi();
 const changeCurrentMovie = async (id: number) => {
-  // playerLoaded.value = false;
   try {
     await reqChangeCurrentMovieApi({
       data: {
@@ -468,8 +466,6 @@ const changeCurrentMovie = async (id: number) => {
       title: "设置成功",
       type: "success"
     });
-
-    // playerLoaded.value = true;
   } catch (err: any) {
     console.error(err);
     ElNotification({
@@ -622,12 +618,6 @@ const sendText = () => {
   devLog("sended:" + msg);
 };
 
-const playerOptions = ref({
-  url: "",
-  isLive: false,
-  type: ""
-});
-
 const playerMounted = ref(false);
 
 let player: ArtPlayer;
@@ -650,35 +640,11 @@ const parseVideoType = (movie: MovieInfo) => {
   return getFileExtension(movie.url);
 };
 
-const syncCurrent = () => {
-  watchers.push(
-    watch(
-      () => room.currentMovie,
-      () => {
-        const jsonData = room.currentMovie;
-        if (jsonData.pullKey !== "") {
-          jsonData.url = `${window.location.origin}/api/movie/live/${jsonData.pullKey}.flv`;
-          // jsonData.url = `${window.location.origin}/api/movie/live/${jsonData.pullKey}.m3u8`;
-        }
-        console.log(jsonData);
-        playerOptions.value = {
-          url: jsonData.url,
-          isLive: jsonData.live,
-          type: parseVideoType(jsonData)
-        };
-      }
-    )
-  );
-};
-
-watchers.push(
-  watch(
-    () => playerMounted.value,
-    () => {
-      syncCurrent();
-      getMovieList();
-    }
-  )
+watchOnce(
+  () => playerMounted.value,
+  () => {
+    getMovieList();
+  }
 );
 
 // 设置聊天框高度
@@ -700,6 +666,17 @@ onMounted(() => {
 onBeforeUnmount(() => {
   close();
 });
+
+const playerOption = computed(() => {
+  return {
+    url: room.currentMovie.pullKey
+      ? `${window.location.origin}/api/movie/live/${room.currentMovie.pullKey}.flv`
+      : room.currentMovie.url,
+    isLive: room.currentMovie.live,
+    type: parseVideoType(room.currentMovie),
+    headers: room.currentMovie.headers
+  };
+});
 </script>
 
 <template>
@@ -718,9 +695,9 @@ onBeforeUnmount(() => {
             >👁‍🗨 {{ room.peopleNum }}
           </small>
         </div>
-        <div class="card-body max-sm:p-0" ref="playArea" v-if="playerLoaded">
+        <div class="card-body max-sm:p-0" ref="playArea" v-if="true">
           <div class="art-player">
-            <Player @get-instance="getPlayerInstance" :options="playerOptions"></Player>
+            <Player @get-instance="getPlayerInstance" :options="playerOption"></Player>
           </div>
         </div>
         <div class="card-body max-sm:pb-3 max-sm:px-3" ref="noPlayArea" v-else>