@besovideo/webrtc-player 0.8.96 → 0.8.97

package/README.md

@@ -62,7 +62,7 @@ const { instance } = PuPlayer({
   // (可选) 指定video如何适应容器 (fill: 填充容器 ; contain :保持视频比例适应容器)
   videoFit: "fill",
   // (可选) 指定请求url路径前缀 可使用protocol+host 如：http://192.168.88.11:9780
-  // apiPrefix: "/test_api/prefix",
+  apiPrefix: "/test_api/prefix",
 
   // (可选) 用于测试播放视频 (存在时优先使用url播放，为浏览器直接播放)
   // testUrl: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4",
@@ -254,9 +254,23 @@ instance.playerStatus : {
     exec(): void;
     // 添加事件监听，获取截图结果, 
     // cancelAutoDownload 函数，调用会取消掉下载图片
-    addEventListener(handle: ((status: {img?: Blob, cancelAutoDownload?: ()=>void})) => void)):void;
+    addEventListener(handle: ((
+        status: {
+        img?: Blob, 
+        fileName?: string, 
+        cancelAutoDownload?: ()=>{
+          download(fileName?: string): void //下载图片
+        }
+      })) => void)):void;
     // 移除事件监听
-    removeEventListener(handle: ((status: {img?: Blob, cancelAutoDownload?: ()=>void })) => void)):void;
+    removeEventListener(handle: ((
+        status: {
+        img?: Blob, 
+        fileName?: string, 
+        cancelAutoDownload?: ()=>{
+          download(fileName?: string): void //下载图片
+        }
+      })) => void)):void;
   }，
   informationGet： () => Promise<{
     //音频统计信息
@@ -361,7 +375,7 @@ const { instance } = Intercom({
   //(可选) 无法获取用户麦克风时
   onGetUserMediaFailed: () => {},
   // (可选) 指定请求url的前缀 方便代理请求
-  // apiPrefix: "/test_api/prefix",
+  apiPrefix: "/test_api/prefix",
 });
 
 // open 异步 先关闭再开始建立连接 (可选参数: protocol = type 选择协议(type = "auto" | "webrtc" | "ws-bvrtc") 不填默认为auto)

package/dist/main.browser.css

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 /* sass-plugin-1:G:\develop\bvweb-player\node_modules\.pnpm\tippy.js@6.3.7\node_modules\tippy.js\dist\tippy.css */
 .tippy-box[data-animation=fade][data-state=hidden] {
   opacity: 0;
@@ -455,6 +457,20 @@
   width: 100px;
   border-radius: 5px;
 }
+.bvplayer-recordState .blinking-element {
+  animation: blink 2s infinite;
+}
+@keyframes blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 .bvplayer-video {
   display: block;
   box-sizing: border-box;

package/dist/main.browser.js

@@ -117,7 +117,7 @@ var bvPlayerCore = (() => {
   var define_processenv_default;
   var init_define_processenv = __esm({
     "<define:processenv>"() {
-      define_processenv_default = { NODE_ENV: "production", SH_LIB_NAME: "@besovideo/webrtc-player", SH_LIB_VERSION: "0.8.96", PROJECT_NAMESPACE: "bvplayer" };
+      define_processenv_default = { NODE_ENV: "production", SH_LIB_NAME: "@besovideo/webrtc-player", SH_LIB_VERSION: "0.8.97", PROJECT_NAMESPACE: "bvplayer" };
     }
   });
 
@@ -7252,8 +7252,13 @@ If you want to allow non-zero first timestamps, set firstTimestampBehavior: 'per
       const blob = yield canvasToBlob(canvas);
       return {
         blob,
-        download() {
-          file_default.downLoadBlob(blob, fileName, "png");
+        fileName,
+        download(fileNameCaller) {
+          file_default.downLoadBlob(
+            blob,
+            fileNameCaller ? fileNameCaller : fileName,
+            "png"
+          );
         }
       };
     } catch (e) {
@@ -7286,11 +7291,7 @@ If you want to allow non-zero first timestamps, set firstTimestampBehavior: 'per
               bDownload = false;
               return downloadRecordGetter();
             };
-            holder(
-              blob,
-              metaInfo,
-              cancelAutoDownload
-            );
+            holder(blob, metaInfo, cancelAutoDownload);
             return bDownload;
           }
           return true;
@@ -12864,10 +12865,20 @@ ${event.candidate ? event.candidate.candidate : "(null)"}`
     }
     init(_container) {
       const el = this.el;
-      const svgRecord = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256" style="vertical-align: sub;" ><rect width="256" height="256" fill="none"/><circle cx="127" cy="129" r="81" fill="#dd2c2c" fill-rule="evenodd"/></svg>`;
+      const svgRecord = `<svg class='blinking-element' xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256" style="vertical-align: sub;" ><rect width="256" height="256" fill="none"/><circle cx="127" cy="129" r="81" fill="#dd2c2c" fill-rule="evenodd"/></svg>`;
       el.style.display = "none";
-      const spinEl = core_default.dom.create("span");
-      spinEl.innerHTML = `${svgRecord} 00:00:00`;
+      const spinEl = core_default.dom.create("div");
+      spinEl.innerHTML = `${svgRecord}`;
+      spinEl.style.color = "black";
+      spinEl.style.backgroundColor = "white";
+      spinEl.style.margin = "5px 5px";
+      spinEl.style.padding = "2px 5px 2px 1px";
+      spinEl.style.top = "5px";
+      spinEl.style.left = "5px";
+      spinEl.style.borderRadius = "4px";
+      const sliceSpan = document.createElement("span");
+      spinEl.appendChild(sliceSpan);
+      sliceSpan.innerHTML = "00:00:00";
       core_default.dom.append(el, spinEl);
       this.spanEle = spinEl;
       let recordStart = 0;
@@ -12882,7 +12893,7 @@ ${event.candidate ? event.candidate.candidate : "(null)"}`
         const mins = formatTime(lastTime, 60);
         const seconds = Math.floor(lastTime % 60);
         const fomatSeconds = seconds > 9 ? seconds : "0" + seconds;
-        spinEl.innerHTML = `${svgRecord} <span>${hour + mins + fomatSeconds}</span>`;
+        sliceSpan.innerHTML = `${hour + mins + fomatSeconds}`;
       }
       this.addEventListener("RecordStart", () => {
         if (this.el) {
@@ -12897,7 +12908,7 @@ ${event.candidate ? event.candidate.candidate : "(null)"}`
       });
       this.addEventListener("RecordEnd", () => {
         if (this.el) {
-          spinEl.innerHTML = `${svgRecord} <span>00:00:00</span>`;
+          sliceSpan.innerHTML = "00:00:00";
           this.el.style.display = "none";
         }
         if (this.intervalToken) {
@@ -13162,8 +13173,14 @@ ${event.candidate ? event.candidate.candidate : "(null)"}`
         let bDownload = true;
         this.dispatch("screenshot", screenshotResult && screenshotResult.blob ? {
           img: screenshotResult.blob,
+          fileName: screenshotResult.fileName,
           cancelAutoDownload() {
             bDownload = false;
+            return {
+              download(fileName) {
+                screenshotResult == null ? void 0 : screenshotResult.download(fileName);
+              }
+            };
           }
         } : void 0);
         if (bDownload && (screenshotResult == null ? void 0 : screenshotResult.download)) {
@@ -16392,6 +16409,7 @@ registerProcessor('bv-audio-processor', BVAudioProcessor);
                 return player.addEventListener("screenshot", (data) => {
                   handleUtils.dispatch({
                     img: data == null ? void 0 : data.img,
+                    fileName: data == null ? void 0 : data.fileName,
                     cancelAutoDownload: data == null ? void 0 : data.cancelAutoDownload
                   });
                 });

package/dist/main.es.css

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 /* sass-plugin-0:G:\develop\bvweb-player\node_modules\.pnpm\tippy.js@6.3.7\node_modules\tippy.js\dist\tippy.css */
 .tippy-box[data-animation=fade][data-state=hidden] {
   opacity: 0;
@@ -455,6 +457,20 @@
   width: 100px;
   border-radius: 5px;
 }
+.bvplayer-recordState .blinking-element {
+  animation: blink 2s infinite;
+}
+@keyframes blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 .bvplayer-video {
   display: block;
   box-sizing: border-box;

package/dist/main.es.js

@@ -111,7 +111,7 @@ var __async = (__this, __arguments, generator) => {
 var define_processenv_default;
 var init_define_processenv = __esm({
   "<define:processenv>"() {
-    define_processenv_default = { NODE_ENV: "production", SH_LIB_NAME: "@besovideo/webrtc-player", SH_LIB_VERSION: "0.8.96", PROJECT_NAMESPACE: "bvplayer" };
+    define_processenv_default = { NODE_ENV: "production", SH_LIB_NAME: "@besovideo/webrtc-player", SH_LIB_VERSION: "0.8.97", PROJECT_NAMESPACE: "bvplayer" };
   }
 });
 
@@ -7236,8 +7236,13 @@ var screenshotByCanvas = (_0, ..._1) => __async(void 0, [_0, ..._1], function* (
     const blob = yield canvasToBlob(canvas);
     return {
       blob,
-      download() {
-        file_default.downLoadBlob(blob, fileName, "png");
+      fileName,
+      download(fileNameCaller) {
+        file_default.downLoadBlob(
+          blob,
+          fileNameCaller ? fileNameCaller : fileName,
+          "png"
+        );
       }
     };
   } catch (e) {
@@ -7270,11 +7275,7 @@ var record = (element, stream, fileName = `record_${Date.now()}`) => {
             bDownload = false;
             return downloadRecordGetter();
           };
-          holder(
-            blob,
-            metaInfo,
-            cancelAutoDownload
-          );
+          holder(blob, metaInfo, cancelAutoDownload);
           return bDownload;
         }
         return true;
@@ -12848,10 +12849,20 @@ var RecordStatePlugin = class extends Plugin {
   }
   init(_container) {
     const el = this.el;
-    const svgRecord = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256" style="vertical-align: sub;" ><rect width="256" height="256" fill="none"/><circle cx="127" cy="129" r="81" fill="#dd2c2c" fill-rule="evenodd"/></svg>`;
+    const svgRecord = `<svg class='blinking-element' xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256" style="vertical-align: sub;" ><rect width="256" height="256" fill="none"/><circle cx="127" cy="129" r="81" fill="#dd2c2c" fill-rule="evenodd"/></svg>`;
     el.style.display = "none";
-    const spinEl = core_default.dom.create("span");
-    spinEl.innerHTML = `${svgRecord} 00:00:00`;
+    const spinEl = core_default.dom.create("div");
+    spinEl.innerHTML = `${svgRecord}`;
+    spinEl.style.color = "black";
+    spinEl.style.backgroundColor = "white";
+    spinEl.style.margin = "5px 5px";
+    spinEl.style.padding = "2px 5px 2px 1px";
+    spinEl.style.top = "5px";
+    spinEl.style.left = "5px";
+    spinEl.style.borderRadius = "4px";
+    const sliceSpan = document.createElement("span");
+    spinEl.appendChild(sliceSpan);
+    sliceSpan.innerHTML = "00:00:00";
     core_default.dom.append(el, spinEl);
     this.spanEle = spinEl;
     let recordStart = 0;
@@ -12866,7 +12877,7 @@ var RecordStatePlugin = class extends Plugin {
       const mins = formatTime(lastTime, 60);
       const seconds = Math.floor(lastTime % 60);
       const fomatSeconds = seconds > 9 ? seconds : "0" + seconds;
-      spinEl.innerHTML = `${svgRecord} <span>${hour + mins + fomatSeconds}</span>`;
+      sliceSpan.innerHTML = `${hour + mins + fomatSeconds}`;
     }
     this.addEventListener("RecordStart", () => {
       if (this.el) {
@@ -12881,7 +12892,7 @@ var RecordStatePlugin = class extends Plugin {
     });
     this.addEventListener("RecordEnd", () => {
       if (this.el) {
-        spinEl.innerHTML = `${svgRecord} <span>00:00:00</span>`;
+        sliceSpan.innerHTML = "00:00:00";
         this.el.style.display = "none";
       }
       if (this.intervalToken) {
@@ -13146,8 +13157,14 @@ var PlayerPlugin = class extends Plugin {
       let bDownload = true;
       this.dispatch("screenshot", screenshotResult && screenshotResult.blob ? {
         img: screenshotResult.blob,
+        fileName: screenshotResult.fileName,
         cancelAutoDownload() {
           bDownload = false;
+          return {
+            download(fileName) {
+              screenshotResult == null ? void 0 : screenshotResult.download(fileName);
+            }
+          };
         }
       } : void 0);
       if (bDownload && (screenshotResult == null ? void 0 : screenshotResult.download)) {
@@ -16376,6 +16393,7 @@ function CreatePlayerState(player) {
               return player.addEventListener("screenshot", (data) => {
                 handleUtils.dispatch({
                   img: data == null ? void 0 : data.img,
+                  fileName: data == null ? void 0 : data.fileName,
                   cancelAutoDownload: data == null ? void 0 : data.cancelAutoDownload
                 });
               });

package/dist/types/components/subComponent/playState.d.ts

@@ -22,15 +22,18 @@ export declare function CreatePlayerState(player: PlayerPlugin): {
     }>;
     screenshot: IDataHandle<{
         img?: Blob | undefined;
+        fileName?: string | undefined;
         cancelAutoDownload?: (() => void) | undefined;
     }> | {
         exec(): void;
         addEventListener: (handle: (data: {
             img?: Blob | undefined;
+            fileName?: string | undefined;
             cancelAutoDownload?: (() => void) | undefined;
         }) => void) => () => void;
         removeEventListener: (handle: (data: {
             img?: Blob | undefined;
+            fileName?: string | undefined;
             cancelAutoDownload?: (() => void) | undefined;
         }) => void) => void;
     };

package/dist/types/plugins/player/event.d.ts

@@ -37,7 +37,10 @@ export interface IPlayerPluginEventMap extends IPluginEventMap {
     recordStop: IRecordStopInfo;
     screenshot: undefined | {
         img: Blob;
-        cancelAutoDownload: () => void;
+        fileName: string;
+        cancelAutoDownload: () => {
+            download(fileName?: string): void;
+        };
     };
     fullscreen: boolean;
     rotate: IRotateEvent;

package/dist/types/plugins/video.d.ts

@@ -49,7 +49,8 @@ declare class VideoPlugin extends Plugin<HTMLDivElement, IVideoPluginEventMap> {
     pause(): void;
     screenshot(): Promise<{
         blob: Blob | null;
-        download(): void;
+        fileName: string;
+        download(fileNameCaller?: string | undefined): void;
     } | undefined>;
     private _genFileName;
     recordStart(): void;

package/dist/types/utils/media.d.ts

@@ -45,11 +45,13 @@ declare const media: {
     canvasToBlob: (canvas: HTMLCanvasElement) => Promise<Blob | null>;
     screenshotByCanvas: (canvas?: HTMLCanvasElement | null, fileName?: string) => Promise<{
         blob: Blob | null;
-        download(): void;
+        fileName: string;
+        download(fileNameCaller?: string): void;
     } | undefined>;
     screenshot: (videoEl?: HTMLVideoElement | null, fileName?: string) => Promise<{
         blob: Blob | null;
-        download(): void;
+        fileName: string;
+        download(fileNameCaller?: string): void;
     } | undefined>;
     record: (element: IStreamProvider, stream?: MediaStream | null, fileName?: string) => [(MediaRecorder | undefined)?, (MediaStream | undefined)?, ({
         setOnMedia(onMedia: IOnMediaRecordHandle): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@besovideo/webrtc-player",
-  "version": "0.8.96",
+  "version": "0.8.97",
   "description": "@besovideo/webrtc-player desc",
   "type": "module",
   "types": "./dist/types/main.d.ts",