@shijiu/jsview-vue 2.3.0 → 2.3.728-alpha.0

package/utils/JsViewPlugin/JsvPlayer/{BrowserJsvPlayer.vue → JsvPlayerBrowser-wasm.vue}

@@ -1,4 +1,5 @@
 <script>
+/* eslint-disable */ 
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
 import { AckEventDefine } from "./AckEventDefine.ts";
 import playerExMethods from "./JsvMediaBrowserInterface.js";
@@ -7,6 +8,24 @@ import { JsvNativeSharedDiv } from "jsview";
 
 let logDebug = console.log;
 
+async function loadM3U8(src, videoHandler) {
+  const {
+    isSupported:hlsIsSupported,
+    Hls
+  }  = await import("https://cdn.release.qcast.cn/JsViewTest/wasm/resources/hls.light.mjs");
+
+  if(hlsIsSupported()) {
+    console.log('BrowserJsvPlayer: m3u8->hls.');
+    const hls = new Hls();
+    hls.loadSource(src);
+    hls.attachMedia(videoHandler);
+    hls.on(Hls.Events.MANIFEST_PARSED, () => videoHandler.play());
+  }else{
+    console.log('BrowserJsvPlayer: m3u8->hls failed, fallback to standard.');
+    videoHandler.src = src;
+  }
+}
+
 export default {
   props: {
     /**
@@ -258,6 +277,15 @@ export default {
         return {};
       },
     },
+    /**
+		 * 回调函数，当流播放错误时，重试的时候发送此事件，用于上报log使用。
+		 */
+		onStreamChanged: {
+      type: Function, 
+      default: ()=>{
+        return{}
+      }
+    },
     /**
      * 属性，Object类型，设置窗口属性，同其他组件的style设置。
      */
@@ -273,10 +301,10 @@ export default {
      */
     active: { type: Boolean, default: true },
 
-    /**
-     * 属性，Number，视频播放窗的圆角设置
-     */
-    corner: { type: Number, default: 0 },
+		/**
+		 * 属性，int类型，设置圆角属性。
+		 */
+     cornerRadius: {type: Number, default: 0},
   },
   components: {
     JsvNativeSharedDiv,
@@ -287,7 +315,7 @@ export default {
       if (this.video) {
         if (newValue) {
           this.registerEvent();
-          // this.video.setHoleID?.(this.holeId);
+          // this.video.setHoleID(this.holeId);
           this.holeStyle = {
             left: 0,
             top: 0,
@@ -373,25 +401,30 @@ export default {
     if (!this.video) {
       // 创建PC版本的video标签
       this.video = window.originDocument.createElement("video");
+      this.video.crossOrigin = "anonymous"
       this.video.style.position = "absolute";
       this.video.style.zIndex = -100;
       this._extendsApi(this.video);
-
+      
       const appElement = window.originDocument.getElementById("app");
       document.body.insertBefore(this.video, appElement);
 
+
       // 跟踪视频显示位置
       let _this = this;
       this.positionAckFunc = (event_json) => {
         // 跟踪JsvNativeShared的位置变化
         let new_pos = JSON.parse(event_json);
+
         this.video.style.left =
           window.JsvCoreApi.WasmExt.measurePosition(new_pos.x) + "px";
+
         this.video.style.top =
           window.JsvCoreApi.WasmExt.measurePosition(new_pos.y) + "px";
 
         this.video.style.width =
           window.JsvCoreApi.WasmExt.measurePosition(new_pos.width) + "px";
+          
         this.video.style.height =
           window.JsvCoreApi.WasmExt.measurePosition(new_pos.height) + "px";
       };
@@ -412,7 +445,10 @@ export default {
         this.registerEvent();
 
         //if(first_create){
-        if (this.src && this.src !== "") this.video.src = this.src;
+        if (this.src && this.src !== "") {
+          window.jsvVideo = this.video;
+          this.video.setSrc(this.src, undefined, undefined);
+        }
 
         if (this.currentTime !== 0) this.video.currentTime = this.currentTime;
 
@@ -455,7 +491,9 @@ export default {
     }
   },
 
-  unmounted() {
+  beforeUnmount() {
+  // unmounted() {
+    console.log("JsvPlayer beforeUnmount");
     if (this.video != null) {
       // 清理video标签
       document.body.removeChild(this.video);
@@ -476,7 +514,7 @@ export default {
     },
     registerEvent() {
       if (this.video && this.active) {
-        this.video.addEventListener("end", this.onEnded);
+        this.video.addEventListener("ended", this.onEnded);
         this.video.addEventListener("error", this.onError);
         //this.video.addEventListener("abort", this.onAbort);
         this.video.addEventListener("timeupdate", this.onTimeUpdate);
@@ -493,7 +531,7 @@ export default {
         this.video.addEventListener("canplaythrough", this.onCanPlayThrough);
         this.video.addEventListener("progress", this.onProgress);
         this.video.addEventListener("loadedmetadata", this.onLoadedMetaData);
-        this.video.addEventListener("load", this.onLoad);
+        this.video.addEventListener("loadeddata", this.onLoad);
         this.video.addEventListener("durationchange", this.onDurationChange);
         this.video.addEventListener("seeking", this.onSeeking);
         this.video.addEventListener("seeked", this.onSeeked);
@@ -506,6 +544,7 @@ export default {
         this.video.addEventListener("timeshifted", this.onTimeShifted);
         this.video.addEventListener("backlive", this.onBackLive);
         this.video.addEventListener("backlived", this.onBackLived);
+        this.video.addEventListener("streamchanged", this.onStreamChanged);
       }
     },
     _extendsApi(videoRef) {
@@ -513,6 +552,17 @@ export default {
       for (let method_name in playerExMethods) {
         videoRef[method_name] = playerExMethods[method_name].bind(videoRef);
       }
+
+      videoRef["setSrc"] = (url, head, type) => {
+        const url_parsed = new URL(url);
+        if(url_parsed.pathname.endsWith('.m3u8')){
+          console.log(`PC simulate setSrc(m3u8) url=${url} head=${head} type=${type}`);
+          loadM3U8(url, videoRef);
+        }else{
+          console.log(`PC simulate setSrc(standard) url=${url} head=${head} type=${type}`);
+          videoRef.src = url;
+        }
+      }
     },
   },
 };
@@ -528,7 +578,7 @@ export default {
       top: this.style.top,
     }"
     :getId="getHoleId"
-    :corner="corner"
+    :corner="cornerRadius"
   />
 </template>
 

package/utils/JsViewPlugin/JsvPlayer/JsvPlayerBrowser.vue

@@ -0,0 +1,511 @@
+<script>
+/* eslint-disable */ 
+import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
+import playerExMethods from "./JsvMediaBrowserInterface.js";
+import { shallowRef } from "vue";
+
+let logDebug = console.log;
+
+export default {
+  props: {
+    /**
+     * 回调函数，播放器对象通知接口
+     * @param {Object} video对象，可以通过此video对象调用video相关属性和方法，具体属性和方法定义见JsvMedia.js文件里相关说明。
+     */
+    onRef: { type: Function, default: () => {} },
+    /**
+     * 属性，Boolean类型，true表示自动播放，默认false。
+     */
+    autoplay: { type: Boolean, default: false },
+    /**
+     * 属性，String类型，播放器实例索引，同样的key使用同一个播放器实例。
+     */
+    playerKey: { type: String, default: null },
+    /**
+     *  属性，String类型，播放器窗口模式，默认resizable模式。
+     *                  full：观影模式，全屏方式，不建议修改w/h/l/t，视频清晰度/流畅度最佳；
+     *                  resizable：可变窗口模式，可以随意修改w/h/l/t，支持动画效果，视频清晰度/流畅度表现可能不如full模式；
+     *                  pip：画中画模式，只在支持多路硬解的情况下使用，用户画中画的小窗播放，对清晰度/流畅度要求较差，可能会有反交错问题。
+     */
+    windowMode: { type: String, default: "resizable" },
+    /**
+     * 属性，int类型，底层使用的播放器类型。1：系统播放器；2:jsv播放器。默认2。
+     */
+    playerType: { type: Number, default: 2 },
+    /**
+     * 属性，int类型，播放器解码方式。0：根据硬件能力自动匹配；1:硬解码；2:软解码。默认0（根据芯片能力自动匹配）。
+     */
+    decodeType: { type: Number, default: 0 },
+    /**
+     * 属性，Boolean类型，层级关系，true表示在界面的下面，false表示在界面上面，默认true。
+     */
+    background: { type: Boolean, default: true },
+    /**
+     * 属性，Boolean类型，true表示静音，默认false。
+     */
+    muted: { type: Boolean, default: false },
+    /**
+     * 属性，Boolean类型，true表示循环播放，默认false。
+     */
+    loop: { type: Boolean, default: false },
+    /**
+     * 属性，String类型，播放地址。
+     */
+    src: { type: String, default: "" },
+    /**
+     * 属性，Double类型，起播时间，0-duration。
+     */
+    currentTime: { type: Number, default: 0 },
+    /**
+     * 属性，Boolean类型，是否保留最后一帧，true保留，false不保留。
+     */
+    keepLastFrame: { type: Boolean, default: true },
+    /**
+     * 属性，String类型，视频显示比例，origin原始比例显示，full全屏显示，x:y按照指定比例显示。
+     */
+    videoAspectRatio: { type: String, default: "origin" },
+    /**
+     * 属性，JSON Object类型，色度抠像参数，包含color，colorDistance，edgeDistance，greenOffset四个参数，
+     * 参考格式：{color: 0x30FF30, colorDistance: 0.15, edgeDistance: 0.4, greenOffset: 0.05}
+     *          color，色值，int类型，为抠图色值范围的中心点，格式为0xRRGGBB。
+     *          colorDistance，float类型，色域范围，范围0-1.0。
+     *          edgeDistance，float类型，alpha透明度距离，范围colorDistance-1.0，从colorDistance到edgeDistance的alpha值从1.0-0线性递减。
+     *          greenOffset，float类型，红蓝差值，范围0-1.0。
+     * 目前只支持扣绿。
+     */
+    chromaKey: { type: Object, default: null },
+    /**
+     * 回调函数，播放结束时通过此回调接口通知。
+     */
+    onEnded: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，播放错误时通过此接口通知。
+     * @param {int} 错误类型，当前定义了四种错误。1是异常中断；2是网络错误；3是解码错误；4是格式不支持。
+     */
+    onError: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    // onAbort: {type: Function, default: ()=>{return{}}},
+    /**
+     * 回调函数，当正常播放时，每0.5秒上报一次，回调接口里会带上当前时间，也可以使用video对象的currentTime属性去获取当前时间。
+     * @param {Long} 当前播放时间，单位秒。
+     */
+    onTimeUpdate: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，开始加载，设置完播放地址后，上报此事件。
+     */
+    onLoadStart: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，开始正常播放，同一个播放地址仅触发一次。
+     */
+    onCanPlayThrough: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，正常下载，duration不变的情况下只触发一次。
+     */
+    onProgress: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，视频准备好后触发。
+     */
+    onLoadedMetaData: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，视频准备好后触发，这个时候可以正常seek。
+     */
+    onLoad: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，视频准备好后触发，这个时候可以获取duration。
+     */
+    onDurationChange: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，视频准备好后，seek（修改currentTime）会出发此事件。
+     */
+    onSeeking: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，seek完成后触发此事件。
+     */
+    onSeeked: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，缓冲时触发。
+     */
+    onStalled: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，正常播放后触发。
+     */
+    onPlaying: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，正常显示后触发此事件。
+     */
+    onCanPlay: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，音频失去焦点后触发此事件，可能会导致pause（点播）或者离开频道（直播）。
+     */
+    onAudioFocusLoss: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，音频获取焦点后触发此事件，可能会触发resume（点播）或者加入频道（直播）。
+     */
+    onAudioFocusGain: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，直播进入时移状态时，触发此事件。
+     */
+    onTimeShift: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，直播进入时移状态时，成功播放触发此事件。
+     */
+    onTimeShifted: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，时移回到直播状态，触发此事件。
+     */
+    onBackLive: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，时移回到直播状态时，成功播放触发此事件。
+     */
+    onBackLived: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+		 * 回调函数，当流播放错误时，重试的时候发送此事件，用于上报log使用。
+		 */
+		onStreamChanged: {
+      type: Function, 
+      default: ()=>{
+        return{}
+      }
+    },
+    /**
+     * 属性，Object类型，设置窗口属性，同其他组件的style设置。
+     */
+    style: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 属性，Boolean类型，活跃状态，当多个JsvPlayer组件指向一个video对象时，只能有一个处于活跃状态。
+     * 视频显示在活跃JsvPlayer设置的显示区域内，事件通知也只会送给活跃的JsvPlayer组件注册的回调函数。
+     */
+    active: { type: Boolean, default: true },
+  },
+  components: {},
+  watch: {
+    active(newValue) {
+      console.log("LudlDebug active newValue: " + newValue);
+      if (this.video) {
+        if (newValue) {
+          this.registerEvent();
+          this.video.setHoleID(this.holeId);
+          this.holeStyle = {
+            left: 0,
+            top: 0,
+            width: this.style.width,
+            height: this.style.height,
+          };
+        } else {
+          this.holeStyle = {
+            left: 0,
+            top: 0,
+            width: 0,
+            height: 0,
+          };
+        }
+      }
+    },
+    style(newValue) {
+      logDebug(
+        "holeStyle newValue: left=" +
+          newValue.left +
+          ", top=" +
+          newValue.top +
+          ", width=" +
+          newValue.width +
+          ", height=" +
+          newValue.height
+      );
+      if (this.active) {
+        this.holeStyle = {
+          left: 0,
+          top: 0,
+          width: newValue.width,
+          height: newValue.height,
+        };
+      }
+    },
+    keepLastFrame(newValue) {
+      logDebug("keepLastFrame newValue: " + newValue);
+      if (this.video && this.active) {
+        this.video.keepLastFrame = this.keepLastFrame;
+      }
+    },
+  },
+
+  setup() {
+    return {
+      video: null,
+      holeId: "",
+      jsvMainView: shallowRef(null),
+      innerViewId: shallowRef(-1),
+    };
+  },
+
+  data() {
+    return {
+      holeStyle: {},
+    };
+  },
+  created() {},
+  beforeUnmount() {
+    logDebug("JsvPlayer:", this.style);
+
+    let key = "Jsv_" + Math.floor(Math.random() * 10000);
+    if (this.playerKey) {
+      key = this.playerKey;
+    }
+    logDebug("player key:" + key);
+
+    let player_type = 1;
+    if (this.playerType) player_type = this.playerType;
+
+    let background = true;
+    if (!this.background) background = this.background;
+
+    logDebug("JsvPlayer background:" + background);
+
+    const designMap = window.Forge.DesignMap();
+    logDebug("JsvPlayer:", this.holeId);
+
+    // this.video = findMediaObjectByKey(key);
+    // TODO: 后续支持共享MediaId ?
+    let first_create = true;
+
+    if (!this.video) {
+      // 创建PC版本的video标签
+      this.video = window.originDocument.createElement("video");
+      this._extendsApi(this.video);
+    } else {
+      this.video.setRef();
+      first_create = false;
+    }
+
+    if (this.video != null) {
+      if (this.active) {
+        this.registerEvent();
+
+        //if(first_create){
+        if (this.src && this.src !== "") this.video.src = this.src;
+
+        if (this.currentTime !== 0) this.video.currentTime = this.currentTime;
+
+        if (this.autoplay) {
+          this.video.autoplay = this.autoplay;
+        }
+
+        if (this.muted) {
+          this.video.muted = this.muted;
+        }
+
+        if (this.loop) {
+          this.video.loop = this.loop;
+        }
+
+        if (!this.keepLastFrame) {
+          this.video.keepLastFrame = this.keepLastFrame;
+        }
+
+        if (this.videoAspectRatio !== "origin") {
+          this.video.videoAspectRatio = this.videoAspectRatio;
+        }
+
+        if (this.chromaKey && this.chromaKey !== "") {
+          this.video.setChromaKey(this.chromaKey);
+        }
+        //}else{
+        if (!first_create) {
+          this.video.setHoleID(this.holeId);
+          this.holeStyle = {
+            left: 0,
+            top: 0,
+            width: this.style.width,
+            height: this.style.height,
+          };
+        }
+      }
+
+      // 创建挂载的VideoView
+      this.jsvMainView = new Forge.VideoView(this.video, null);
+      this.innerViewId = Forge.sViewStore.add(
+        new Forge.ViewInfo(this.jsvMainView)
+      );
+
+      this.onRef?.(this.video);
+    }
+  },
+
+  unmounted() {
+    if (this.video != null) {
+      // 清理View管理缓存
+      if (this.innerViewId !== -1) {
+        Forge.sViewStore.remove(this.innerViewId);
+        this.innerViewId = -1;
+        this.jsvMainView = null;
+      }
+      this.onRef?.(null);
+    }
+  },
+
+  methods: {
+    getHoleId(id) {
+      logDebug("getHoleId:", id);
+      this.holeId = id;
+    },
+    registerEvent() {
+      if (this.video && this.active) {
+        this.video.addEventListener("ended", this.onEnded);
+        this.video.addEventListener("error", this.onError);
+        //this.video.addEventListener("abort", this.onAbort);
+        this.video.addEventListener("timeupdate", this.onTimeUpdate);
+        this.video.addEventListener("loadstart", () => {
+          logDebug("JsvPlayer received loadstart event.");
+          this.holeStyle = {
+            left: 0,
+            top: 0,
+            width: this.style.width,
+            height: this.style.height,
+          };
+          this.onLoadStart();
+        });
+        this.video.addEventListener("canplaythrough", this.onCanPlayThrough);
+        this.video.addEventListener("progress", this.onProgress);
+        this.video.addEventListener("loadedmetadata", this.onLoadedMetaData);
+        this.video.addEventListener("load", this.onLoad);
+        this.video.addEventListener("durationchange", this.onDurationChange);
+        this.video.addEventListener("seeking", this.onSeeking);
+        this.video.addEventListener("seeked", this.onSeeked);
+        this.video.addEventListener("stalled", this.onStalled);
+        this.video.addEventListener("playing", this.onPlaying);
+        this.video.addEventListener("canplay", this.onCanPlay);
+        this.video.addEventListener("audiofocusloss", this.onAudioFocusLoss);
+        this.video.addEventListener("audiofocusgain", this.onAudioFocusGain);
+        this.video.addEventListener("timeshift", this.onTimeShift);
+        this.video.addEventListener("timeshifted", this.onTimeShifted);
+        this.video.addEventListener("backlive", this.onBackLive);
+        this.video.addEventListener("backlived", this.onBackLived);
+        this.video.addEventListener("streamchanged", this.onStreamChanged);
+      }
+    },
+    _extendsApi(videoRef) {
+      // 补充插件扩展出来的接口
+      for (let method_name in playerExMethods) {
+        videoRef[method_name] = playerExMethods[method_name].bind(videoRef);
+      }
+    },
+  },
+};
+
+//export default JsvPlayer;
+</script>
+
+<template>
+  <div :style="style" backgroundColor="rgba(0,0,0,1)">
+    <div
+      :style="holeStyle"
+      :data-jsv-vw-innerview="innerViewId"
+    />
+  </div>
+</template>
+
+<style scoped></style>