wrplayer 1.0.0

package/adapters/vue/index.js

@@ -0,0 +1,378 @@
+import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
+import WRPlayer from '../../core/WRPlayer.js';
+
+const PTZ_EVENTS = [
+  'ptz:move', 'ptz:zoom', 'ptz:focus', 'ptz:iris', 'ptz:speed:change',
+  'ptz:preset:list', 'ptz:preset:saved', 'ptz:preset:called', 'ptz:preset:deleted',
+  'ptz:cruise:started', 'ptz:cruise:stopped', 'ptz:cruise:speed:set',
+  'ptz:scan:started', 'ptz:scan:stopped', 'ptz:scan:boundary:left', 'ptz:scan:boundary:right',
+  'ptz:request:success', 'ptz:request:error'
+];
+
+const VOICE_INTERCOM_EVENTS = [
+  'voiceIntercom:statusChange', 'voiceIntercom:modeChange', 'voiceIntercom:error',
+  'voiceIntercom:localStream', 'voiceIntercom:remoteStream'
+];
+
+/**
+ * Vue 3 Composition API for WRPlayer with PTZ and Voice Intercom support
+ * @param {Object} config - Player configuration
+ * @returns {Object} Player instance and utilities
+ */
+export function useWRPlayer(config) {
+  const elementRef = ref(null);
+  const player = ref(null);
+  const isReady = ref(false);
+  const error = ref(null);
+  const ptzAvailable = ref(false);
+  const voiceIntercomAvailable = ref(false);
+  const voiceIntercomStatus = ref(null);
+
+  const initPlayer = () => {
+    if (!elementRef.value || !config.url) return;
+
+    try {
+      const wrPlayer = new WRPlayer({
+        element: elementRef.value,
+        ...config
+      });
+
+      player.value = wrPlayer;
+      ptzAvailable.value = !!wrPlayer.ptz;
+      voiceIntercomAvailable.value = !!wrPlayer.voiceIntercom;
+
+      wrPlayer.on('ready', () => {
+        isReady.value = true;
+        error.value = null;
+      });
+
+      wrPlayer.on('error', (errorData) => {
+        error.value = errorData;
+        isReady.value = false;
+      });
+
+      if (wrPlayer.voiceIntercom) {
+        wrPlayer.on('voiceIntercom:statusChange', (data) => {
+          voiceIntercomStatus.value = data;
+        });
+      }
+
+    } catch (err) {
+      error.value = { type: 'init_error', details: err };
+    }
+  };
+
+  const destroyPlayer = () => {
+    if (player.value) {
+      player.value.stop();
+      player.value = null;
+    }
+    isReady.value = false;
+    error.value = null;
+    ptzAvailable.value = false;
+    voiceIntercomAvailable.value = false;
+    voiceIntercomStatus.value = null;
+  };
+
+  const play = () => {
+    if (player.value) {
+      player.value.play();
+    }
+  };
+
+  const pause = () => {
+    if (player.value) {
+      player.value.pause();
+    }
+  };
+
+  const stop = () => {
+    if (player.value) {
+      player.value.stop();
+    }
+  };
+
+  const ptz = computed(() => {
+    if (!ptzAvailable.value || !player.value?.ptz) return null;
+
+    return {
+      move: (direction, speed) => player.value.ptz.move(direction, speed),
+      zoom: (direction, speed) => player.value.ptz.zoom(direction, speed),
+      focus: (direction, speed) => player.value.ptz.focus(direction, speed),
+      iris: (direction, speed) => player.value.ptz.iris(direction, speed),
+      stop: () => player.value.ptz.stop(),
+      setSpeed: (speed) => player.value.ptz.setSpeed(speed),
+      getSpeed: () => player.value.ptz.getSpeed(),
+      preset: player.value.ptz.preset,
+      cruise: player.value.ptz.cruise,
+      scan: player.value.ptz.scan
+    };
+  });
+
+  const voiceIntercom = computed(() => {
+    if (!voiceIntercomAvailable.value || !player.value?.voiceIntercom) return null;
+
+    return {
+      start: (deviceId, channelId, mode) =>
+        player.value.voiceIntercom.startIntercom(deviceId, channelId, mode),
+      stop: () => player.value.voiceIntercom.stopIntercom(),
+      setMode: (mode) => player.value.voiceIntercom.setMode(mode),
+      getStatus: () => player.value.voiceIntercom.getStatus(),
+      status: voiceIntercomStatus.value
+    };
+  });
+
+  watch(
+    () => [config.url, config.type],
+    () => {
+      destroyPlayer();
+      if (config.url) {
+        initPlayer();
+      }
+    }
+  );
+
+  onMounted(() => {
+    if (config.url) {
+      initPlayer();
+    }
+  });
+
+  onUnmounted(() => {
+    destroyPlayer();
+  });
+
+  return {
+    elementRef,
+    player: computed(() => player.value),
+    isReady: computed(() => isReady.value),
+    error: computed(() => error.value),
+    ptzAvailable: computed(() => ptzAvailable.value),
+    voiceIntercomAvailable: computed(() => voiceIntercomAvailable.value),
+    voiceIntercomStatus: computed(() => voiceIntercomStatus.value),
+    play,
+    pause,
+    stop,
+    ptz,
+    voiceIntercom
+  };
+}
+
+/**
+ * Vue 3 Component for WRPlayer with PTZ and Voice Intercom support
+ */
+export const WRPlayerComponent = {
+  name: 'WRPlayer',
+  props: {
+    config: {
+      type: Object,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['ready', 'error', 'ptz-event', 'voice-intercom-event'],
+  setup(props, { emit }) {
+    const {
+      elementRef,
+      player,
+      isReady,
+      error,
+      ptzAvailable,
+      voiceIntercomAvailable,
+      voiceIntercomStatus,
+      play,
+      pause,
+      stop,
+      ptz,
+      voiceIntercom
+    } = useWRPlayer(props.config);
+
+    watch(isReady, (ready) => {
+      if (ready) {
+        emit('ready', player.value);
+      }
+    });
+
+    watch(error, (err) => {
+      if (err) {
+        emit('error', err);
+      }
+    });
+
+    watch(player, (newPlayer, oldPlayer) => {
+      if (oldPlayer) {
+        PTZ_EVENTS.forEach(event => {
+          oldPlayer.off(event);
+        });
+        VOICE_INTERCOM_EVENTS.forEach(event => {
+          oldPlayer.off(event);
+        });
+      }
+
+      if (newPlayer) {
+        PTZ_EVENTS.forEach(event => {
+          newPlayer.on(event, (data) => {
+            emit('ptz-event', { event, data });
+          });
+        });
+
+        VOICE_INTERCOM_EVENTS.forEach(event => {
+          newPlayer.on(event, (data) => {
+            emit('voice-intercom-event', { event, data });
+          });
+        });
+      }
+    });
+
+    return {
+      elementRef,
+      player,
+      isReady,
+      error,
+      ptzAvailable,
+      voiceIntercomAvailable,
+      voiceIntercomStatus,
+      play,
+      pause,
+      stop,
+      ptz,
+      voiceIntercom
+    };
+  },
+  template: `
+    <video
+      ref="elementRef"
+      :class="className"
+    />
+  `
+};
+
+// Vue 2 compatibility
+export const WRPlayerVue2 = {
+  name: 'WRPlayer',
+  props: {
+    config: {
+      type: Object,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      player: null,
+      isReady: false,
+      error: null,
+      ptzAvailable: false
+    };
+  },
+  computed: {
+    ptz() {
+      if (!this.ptzAvailable || !this.player?.ptz) return null;
+
+      return {
+        move: (direction, speed) => this.player.ptz.move(direction, speed),
+        zoom: (direction, speed) => this.player.ptz.zoom(direction, speed),
+        focus: (direction, speed) => this.player.ptz.focus(direction, speed),
+        iris: (direction, speed) => this.player.ptz.iris(direction, speed),
+        stop: () => this.player.ptz.stop(),
+        setSpeed: (speed) => this.player.ptz.setSpeed(speed),
+        getSpeed: () => this.player.ptz.getSpeed(),
+        preset: this.player.ptz.preset,
+        cruise: this.player.ptz.cruise,
+        scan: this.player.ptz.scan
+      };
+    }
+  },
+  watch: {
+    'config.url'() {
+      this.initPlayer();
+    }
+  },
+  mounted() {
+    this.initPlayer();
+  },
+  beforeDestroy() {
+    this.destroyPlayer();
+  },
+  methods: {
+    initPlayer() {
+      this.destroyPlayer();
+
+      if (!this.config.url) return;
+
+      try {
+        const player = new WRPlayer({
+          element: this.$refs.video,
+          ...this.config
+        });
+
+        this.player = player;
+        this.ptzAvailable = !!player.ptz;
+
+        player.on('ready', () => {
+          this.isReady = true;
+          this.error = null;
+          this.$emit('ready', player);
+        });
+
+        player.on('error', (errorData) => {
+          this.error = errorData;
+          this.isReady = false;
+          this.$emit('error', errorData);
+        });
+
+        PTZ_EVENTS.forEach(event => {
+          player.on(event, (data) => {
+            this.$emit('ptz-event', { event, data });
+          });
+        });
+
+      } catch (err) {
+        this.error = { type: 'init_error', details: err };
+        this.$emit('error', this.error);
+      }
+    },
+
+    destroyPlayer() {
+      if (this.player) {
+        this.player.stop();
+        this.player = null;
+      }
+      this.isReady = false;
+      this.error = null;
+      this.ptzAvailable = false;
+    },
+
+    play() {
+      if (this.player) {
+        this.player.play();
+      }
+    },
+
+    pause() {
+      if (this.player) {
+        this.player.pause();
+      }
+    },
+
+    stop() {
+      if (this.player) {
+        this.player.stop();
+      }
+    }
+  },
+  template: `
+    <video
+      ref="video"
+      :class="className"
+    />
+  `
+};
+
+export default { useWRPlayer, WRPlayerComponent, WRPlayerVue2 };