@besovideo/webrtc-player 0.8.95 → 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",
@@ -171,9 +171,49 @@ instance.playerStatus : {
     // 设置录像状态
     Set(status: {type: "recordStart" | "recordStop"}): void;
     // 添加事件监听, type == "recordStop" recordInfo 才有值
-    addEventListener(handle: ((status: {type: "recordStart" | "recordStop", recordInfo?: { data: Blob, cancelAutoDownload: () => void} }) => void)):void;
+    addEventListener(handle: ((status: {
+      type: "recordStart" | "recordStop", 
+      recordInfo?: { 
+        data: Blob;        // 数据
+        startTime: number; // 录像开始时间 utc ms
+        endTime: number;   // 录像结束时间 utc ms
+        duration: number;  // 录像时长 ms
+        fileName: string;  // 文件名
+        puOptions: {
+          id: string;       // 设备名称
+          index: number;    // 通道ID
+          name?: string;          //设备名称，用于内部UI显示
+          indexName?: string;     //通道名称，用于内部UI显示
+        },
+        //调用将取消自动下载，返回下载函数
+        cancelAutoDownload: () => {
+          //调用该接口，浏览器下载文件， filename 不填为默认的文件名，否则为[filename].webm
+          download(filename?: string): void;
+        }
+      }
+     }) => void)):void;
     // 移除事件监听
-    removeEventListener(handle: ((status: {type: "recordStart" | "recordStop", recordInfo?: {data: Blob, cancelAutoDownload: () => void} }) => void)):void;
+    removeEventListener(handle: ((status: {
+      type: "recordStart" | "recordStop", 
+      recordInfo?: { 
+        data: Blob;        // 数据
+        startTime: number; // 录像开始时间 utc ms
+        endTime: number;   // 录像结束时间 utc ms
+        duration: number;  // 录像时长 ms
+        fileName: string;  // 文件名
+        puOptions: {
+          id: string;       // 设备名称
+          index: number;    // 通道ID
+          name?: string;          //设备名称，用于内部UI显示
+          indexName?: string;     //通道名称，用于内部UI显示
+        },
+        //调用将取消自动下载，返回下载函数
+        cancelAutoDownload: () => {
+          //调用该接口，浏览器下载文件， filename 不填为默认的文件名，否则为[filename].webm
+          download(filename?: string): void;
+        }
+      }
+     }) => void)):void;
   },
   rotate: {
     // 获取旋转状态，顺时针方向
@@ -214,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<{
     //音频统计信息
@@ -321,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.95", PROJECT_NAMESPACE: "bvplayer" };
+      define_processenv_default = { NODE_ENV: "production", SH_LIB_NAME: "@besovideo/webrtc-player", SH_LIB_VERSION: "0.8.97", PROJECT_NAMESPACE: "bvplayer" };
     }
   });
 
@@ -7125,6 +7125,7 @@ If you want to allow non-zero first timestamps, set firstTimestampBehavior: 'per
           description: audioCodecPrivate
         }
       } : void 0;
+      let maxTimestamp = -1;
       handleEle((timestamp, data, bVideo, bKeyFrame) => {
         if (bVideo) {
           muxer.addVideoChunkRaw(data, bKeyFrame ? "key" : "delta", timestamp);
@@ -7133,9 +7134,15 @@ If you want to allow non-zero first timestamps, set firstTimestampBehavior: 'per
             muxer.addAudioChunkRaw(data, "key", timestamp, config);
           }
         }
+        if (maxTimestamp < timestamp) {
+          maxTimestamp = timestamp;
+        }
       });
       muxer.finalize();
-      return new Blob([muxer.target.buffer]);
+      return {
+        blob: new Blob([muxer.target.buffer]),
+        maxTimestamp
+      };
     });
   }
   var createMediaRecorder = (mediaStream, done, mediaRecorderPartner) => {
@@ -7173,6 +7180,7 @@ If you want to allow non-zero first timestamps, set firstTimestampBehavior: 'per
     return mediaRecorder;
   };
   var createRecord = (_mediaStream, fileName, isDownload) => {
+    const startTime = Date.now();
     const tempMediaStreams = _mediaStream.getTracks().map((item) => {
       const mediaStream2 = new MediaStream([item]);
       item.addEventListener("ended", () => {
@@ -7189,14 +7197,30 @@ If you want to allow non-zero first timestamps, set firstTimestampBehavior: 'per
     const szWebM = [];
     function done(e) {
       return __async(this, null, function* () {
+        let maxTimestamp = -1;
         szWebM.push(e.data);
         if (szWebM.length == mediaStreams.length) {
-          recordedChunks.push(yield combinaWebM(...szWebM));
+          const { blob: blobWebM, maxTimestamp: _maxTimestamp } = yield combinaWebM(
+            ...szWebM
+          );
+          recordedChunks.push(blobWebM);
+          if (_maxTimestamp > maxTimestamp) {
+            maxTimestamp = _maxTimestamp;
+          }
           const blob = new Blob(recordedChunks, {
             type: "video/webm"
           });
-          if (yield isDownload(blob)) {
-            file_default.downLoadBlob(blob, fileName, "webm");
+          const downloadFile = (inFileName) => {
+            file_default.downLoadBlob(blob, inFileName ? inFileName : fileName, "webm");
+          };
+          if (isDownload(blob, { duration: maxTimestamp / 1e3, startTime, endTime: startTime + maxTimestamp / 1e3, fileName }, () => {
+            return {
+              download(file2) {
+                downloadFile(file2);
+              }
+            };
+          })) {
+            downloadFile(fileName);
           }
           recordedChunks = [];
         }
@@ -7228,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) {
@@ -7250,19 +7279,24 @@ If you want to allow non-zero first timestamps, set firstTimestampBehavior: 'per
     try {
       const mediaStream = stream || element.captureStream(25);
       let gOnMediaHolder = void 0;
-      const mediaRecorder = createRecord(mediaStream, fileName, (blob) => __async(void 0, null, function* () {
-        if (gOnMediaHolder) {
-          const holder = gOnMediaHolder;
-          gOnMediaHolder = void 0;
-          let bDownload = true;
-          const cancelAutoDownload = () => {
-            bDownload = false;
-          };
-          yield holder(blob, cancelAutoDownload);
-          return bDownload;
+      const mediaRecorder = createRecord(
+        mediaStream,
+        fileName,
+        (blob, metaInfo, downloadRecordGetter) => {
+          if (gOnMediaHolder) {
+            const holder = gOnMediaHolder;
+            gOnMediaHolder = void 0;
+            let bDownload = true;
+            const cancelAutoDownload = () => {
+              bDownload = false;
+              return downloadRecordGetter();
+            };
+            holder(blob, metaInfo, cancelAutoDownload);
+            return bDownload;
+          }
+          return true;
         }
-        return true;
-      }));
+      );
       logger_default.info("\u5F55\u5236\u5B9E\u4F8B", mediaRecorder);
       return [
         mediaRecorder,
@@ -12831,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;
@@ -12849,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) {
@@ -12864,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) {
@@ -12914,6 +12958,7 @@ ${event.candidate ? event.candidate.candidate : "(null)"}`
       this._video = new video_default({
         puOptions: options == null ? void 0 : options.puOptions
       });
+      this._puOptions = options == null ? void 0 : options.puOptions;
       this._spinner = new spinner_default({ spin: false });
       this._toast = new toast_default();
       this._mask = new mask_default({ visible: false });
@@ -13128,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)) {
@@ -13189,12 +13240,15 @@ ${event.candidate ? event.candidate.candidate : "(null)"}`
         if ((_a = this._panel) == null ? void 0 : _a.controller.RecordButton) {
           (_b = this._panel) == null ? void 0 : _b.controller.RecordButton.dispatch("click");
         } else {
-          this._video.recordStop((blob, cancelAutoDownload) => {
-            this.dispatch("recordStop", {
+          this._video.recordStop((blob, mataInfo, cancelAutoDownload) => {
+            this.dispatch("recordStop", __spreadProps(__spreadValues({
+              puOptions: this._puOptions
+            }, mataInfo), {
               data: blob,
               cancelAutoDownload
-            });
+            }));
             this._recordState.dispatch("RecordEnd");
+            return false;
           });
         }
       }
@@ -13260,12 +13314,15 @@ ${event.candidate ? event.candidate.candidate : "(null)"}`
         this._recordState.dispatch("RecordStart");
       });
       panel.controller.addEventListener("recordStop", () => {
-        this._video.recordStop((blob, cancelAutoDownload) => {
-          this.dispatch("recordStop", {
+        this._video.recordStop((blob, metaInfo, cancelAutoDownload) => {
+          this.dispatch("recordStop", __spreadProps(__spreadValues({
+            puOptions: this._puOptions
+          }, metaInfo), {
             data: blob,
             cancelAutoDownload
-          });
+          }));
           this._recordState.dispatch("RecordEnd");
+          return false;
         });
       });
       panel.controller.addEventListener("rotate", () => {
@@ -13573,6 +13630,7 @@ ${event.candidate ? event.candidate.candidate : "(null)"}`
     // smooth: 播放平滑度。[1,7]，值越小越实时。
     // algokey: 加解密算法:密钥。格式：算法:base64(密钥)。例如: SM4:MTIzNDU2Nzg=
     constructor() {
+      console.log("================== bvrtc version: 1.0.1 20241028 ==================");
       this.hplayer = 0;
       this.canvas = null;
       this.dialogid = "";
@@ -14501,6 +14559,20 @@ ${event.candidate ? event.candidate.candidate : "(null)"}`
     this.audioCtx.close();
     this.audioCtx = null;
   };
+  var woker_str = `
+class BVAudioProcessor extends AudioWorkletProcessor {
+    process(inputs, outputs, parameters) {
+        const inputdata = inputs[0][0];
+        this.port.postMessage(inputdata);
+        return true;
+    }
+}
+registerProcessor('bv-audio-processor', BVAudioProcessor);
+`;
+  var audioProcessorBolb = new Blob([woker_str], {
+    type: "application/javascript"
+  });
+  var audioProcessorUrl = URL.createObjectURL(audioProcessorBolb);
   function BVPcmRecorder(config, cb) {
     if (!config) {
       config = {
@@ -14512,7 +14584,7 @@ ${event.candidate ? event.candidate.candidate : "(null)"}`
       };
     }
     this.config = config;
-    this.sampleRate = new (window.AudioContext || window.webkitAudioContext)().sampleRate;
+    this.sampleRate = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: this.config.sampleRate }).sampleRate;
     this.fftSize = 512;
     this.analyser = null;
     this.audioInput = null;
@@ -14522,20 +14594,23 @@ ${event.candidate ? event.candidate.candidate : "(null)"}`
     this.audioData = null;
     this.audioSize = 0;
     this.cb = cb;
-    this.init();
     console.log("sampleRate " + this.sampleRate);
   }
   BVPcmRecorder.prototype.start = function() {
-    navigator.mediaDevices.getUserMedia({
-      audio: true
-    }).then((stream) => {
-      this.audioInput = this.context.createMediaStreamSource(stream);
-    }, (error2) => {
-      console.error(error2);
-    }).then(() => {
-      this.audioInput.connect(this.analyser);
-      this.analyser.connect(this.recorder);
-      this.recorder.connect(this.context.destination);
+    return __async(this, null, function* () {
+      yield this.init();
+      navigator.mediaDevices.getUserMedia({
+        audio: true,
+        sampleRate: this.config.sampleRate
+      }).then((stream) => {
+        this.audioInput = this.context.createMediaStreamSource(stream);
+      }, (error2) => {
+        console.error(error2);
+      }).then(() => {
+        this.audioInput.connect(this.analyser);
+        this.analyser.connect(this.recorder);
+        this.recorder.connect(this.context.destination);
+      });
     });
   };
   BVPcmRecorder.prototype.stop = function() {
@@ -14543,23 +14618,21 @@ ${event.candidate ? event.candidate.candidate : "(null)"}`
       this.audioInput.disconnect();
     if (this.recorder)
       this.recorder.disconnect();
+    if (this.context)
+      this.context.close();
   };
   BVPcmRecorder.prototype.init = function() {
-    this.context = new (window.AudioContext || window.webkitAudioContext)();
-    this.analyser = this.context.createAnalyser();
-    this.analyser.fftSize = this.fftSize;
-    const createScript = this.context.createScriptProcessor || this.context.createJavaScriptNode;
-    this.recorder = createScript.apply(
-      this.context,
-      [this.fftSize, this.config.numberChannels, this.config.numberChannels]
-    );
-    this.recorder.onaudioprocess = this.onaudioprocess.bind(this);
-  };
-  BVPcmRecorder.prototype.onaudioprocess = function(e) {
-    if (this.config.numberChannels === 1) {
-      const data = e.inputBuffer.getChannelData(0);
-      this.handlePcm(new Float32Array(data));
-    }
+    return __async(this, null, function* () {
+      this.context = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: this.config.sampleRate });
+      this.analyser = this.context.createAnalyser();
+      this.analyser.fftSize = this.fftSize;
+      yield this.context.audioWorklet.addModule(audioProcessorUrl);
+      this.recorder = new AudioWorkletNode(this.context, "bv-audio-processor");
+      this.recorder.port.onmessage = (e) => {
+        if (e.data)
+          this.handlePcm(e.data);
+      };
+    });
   };
   BVPcmRecorder.prototype.handlePcm = function(bytes) {
     if (bytes[0] === 0 && bytes[1] === 0)
@@ -16336,6 +16409,7 @@ ${event.candidate ? event.candidate.candidate : "(null)"}`
                 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.95", PROJECT_NAMESPACE: "bvplayer" };
+    define_processenv_default = { NODE_ENV: "production", SH_LIB_NAME: "@besovideo/webrtc-player", SH_LIB_VERSION: "0.8.97", PROJECT_NAMESPACE: "bvplayer" };
   }
 });
 
@@ -7109,6 +7109,7 @@ function combinaWebM(webM1, webM2) {
         description: audioCodecPrivate
       }
     } : void 0;
+    let maxTimestamp = -1;
     handleEle((timestamp, data, bVideo, bKeyFrame) => {
       if (bVideo) {
         muxer.addVideoChunkRaw(data, bKeyFrame ? "key" : "delta", timestamp);
@@ -7117,9 +7118,15 @@ function combinaWebM(webM1, webM2) {
           muxer.addAudioChunkRaw(data, "key", timestamp, config);
         }
       }
+      if (maxTimestamp < timestamp) {
+        maxTimestamp = timestamp;
+      }
     });
     muxer.finalize();
-    return new Blob([muxer.target.buffer]);
+    return {
+      blob: new Blob([muxer.target.buffer]),
+      maxTimestamp
+    };
   });
 }
 var createMediaRecorder = (mediaStream, done, mediaRecorderPartner) => {
@@ -7157,6 +7164,7 @@ var createMediaRecorder = (mediaStream, done, mediaRecorderPartner) => {
   return mediaRecorder;
 };
 var createRecord = (_mediaStream, fileName, isDownload) => {
+  const startTime = Date.now();
   const tempMediaStreams = _mediaStream.getTracks().map((item) => {
     const mediaStream2 = new MediaStream([item]);
     item.addEventListener("ended", () => {
@@ -7173,14 +7181,30 @@ var createRecord = (_mediaStream, fileName, isDownload) => {
   const szWebM = [];
   function done(e) {
     return __async(this, null, function* () {
+      let maxTimestamp = -1;
       szWebM.push(e.data);
       if (szWebM.length == mediaStreams.length) {
-        recordedChunks.push(yield combinaWebM(...szWebM));
+        const { blob: blobWebM, maxTimestamp: _maxTimestamp } = yield combinaWebM(
+          ...szWebM
+        );
+        recordedChunks.push(blobWebM);
+        if (_maxTimestamp > maxTimestamp) {
+          maxTimestamp = _maxTimestamp;
+        }
         const blob = new Blob(recordedChunks, {
           type: "video/webm"
         });
-        if (yield isDownload(blob)) {
-          file_default.downLoadBlob(blob, fileName, "webm");
+        const downloadFile = (inFileName) => {
+          file_default.downLoadBlob(blob, inFileName ? inFileName : fileName, "webm");
+        };
+        if (isDownload(blob, { duration: maxTimestamp / 1e3, startTime, endTime: startTime + maxTimestamp / 1e3, fileName }, () => {
+          return {
+            download(file2) {
+              downloadFile(file2);
+            }
+          };
+        })) {
+          downloadFile(fileName);
         }
         recordedChunks = [];
       }
@@ -7212,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) {
@@ -7234,19 +7263,24 @@ var record = (element, stream, fileName = `record_${Date.now()}`) => {
   try {
     const mediaStream = stream || element.captureStream(25);
     let gOnMediaHolder = void 0;
-    const mediaRecorder = createRecord(mediaStream, fileName, (blob) => __async(void 0, null, function* () {
-      if (gOnMediaHolder) {
-        const holder = gOnMediaHolder;
-        gOnMediaHolder = void 0;
-        let bDownload = true;
-        const cancelAutoDownload = () => {
-          bDownload = false;
-        };
-        yield holder(blob, cancelAutoDownload);
-        return bDownload;
+    const mediaRecorder = createRecord(
+      mediaStream,
+      fileName,
+      (blob, metaInfo, downloadRecordGetter) => {
+        if (gOnMediaHolder) {
+          const holder = gOnMediaHolder;
+          gOnMediaHolder = void 0;
+          let bDownload = true;
+          const cancelAutoDownload = () => {
+            bDownload = false;
+            return downloadRecordGetter();
+          };
+          holder(blob, metaInfo, cancelAutoDownload);
+          return bDownload;
+        }
+        return true;
       }
-      return true;
-    }));
+    );
     logger_default.info("\u5F55\u5236\u5B9E\u4F8B", mediaRecorder);
     return [
       mediaRecorder,
@@ -12815,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;
@@ -12833,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) {
@@ -12848,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) {
@@ -12898,6 +12942,7 @@ var PlayerPlugin = class extends Plugin {
     this._video = new video_default({
       puOptions: options == null ? void 0 : options.puOptions
     });
+    this._puOptions = options == null ? void 0 : options.puOptions;
     this._spinner = new spinner_default({ spin: false });
     this._toast = new toast_default();
     this._mask = new mask_default({ visible: false });
@@ -13112,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)) {
@@ -13173,12 +13224,15 @@ var PlayerPlugin = class extends Plugin {
       if ((_a = this._panel) == null ? void 0 : _a.controller.RecordButton) {
         (_b = this._panel) == null ? void 0 : _b.controller.RecordButton.dispatch("click");
       } else {
-        this._video.recordStop((blob, cancelAutoDownload) => {
-          this.dispatch("recordStop", {
+        this._video.recordStop((blob, mataInfo, cancelAutoDownload) => {
+          this.dispatch("recordStop", __spreadProps(__spreadValues({
+            puOptions: this._puOptions
+          }, mataInfo), {
             data: blob,
             cancelAutoDownload
-          });
+          }));
           this._recordState.dispatch("RecordEnd");
+          return false;
         });
       }
     }
@@ -13244,12 +13298,15 @@ var PlayerPlugin = class extends Plugin {
       this._recordState.dispatch("RecordStart");
     });
     panel.controller.addEventListener("recordStop", () => {
-      this._video.recordStop((blob, cancelAutoDownload) => {
-        this.dispatch("recordStop", {
+      this._video.recordStop((blob, metaInfo, cancelAutoDownload) => {
+        this.dispatch("recordStop", __spreadProps(__spreadValues({
+          puOptions: this._puOptions
+        }, metaInfo), {
           data: blob,
           cancelAutoDownload
-        });
+        }));
         this._recordState.dispatch("RecordEnd");
+        return false;
       });
     });
     panel.controller.addEventListener("rotate", () => {
@@ -13557,6 +13614,7 @@ var BVMedia = class {
   // smooth: 播放平滑度。[1,7]，值越小越实时。
   // algokey: 加解密算法:密钥。格式：算法:base64(密钥)。例如: SM4:MTIzNDU2Nzg=
   constructor() {
+    console.log("================== bvrtc version: 1.0.1 20241028 ==================");
     this.hplayer = 0;
     this.canvas = null;
     this.dialogid = "";
@@ -14485,6 +14543,20 @@ BVPCMPlayer.prototype.destroy = function() {
   this.audioCtx.close();
   this.audioCtx = null;
 };
+var woker_str = `
+class BVAudioProcessor extends AudioWorkletProcessor {
+    process(inputs, outputs, parameters) {
+        const inputdata = inputs[0][0];
+        this.port.postMessage(inputdata);
+        return true;
+    }
+}
+registerProcessor('bv-audio-processor', BVAudioProcessor);
+`;
+var audioProcessorBolb = new Blob([woker_str], {
+  type: "application/javascript"
+});
+var audioProcessorUrl = URL.createObjectURL(audioProcessorBolb);
 function BVPcmRecorder(config, cb) {
   if (!config) {
     config = {
@@ -14496,7 +14568,7 @@ function BVPcmRecorder(config, cb) {
     };
   }
   this.config = config;
-  this.sampleRate = new (window.AudioContext || window.webkitAudioContext)().sampleRate;
+  this.sampleRate = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: this.config.sampleRate }).sampleRate;
   this.fftSize = 512;
   this.analyser = null;
   this.audioInput = null;
@@ -14506,20 +14578,23 @@ function BVPcmRecorder(config, cb) {
   this.audioData = null;
   this.audioSize = 0;
   this.cb = cb;
-  this.init();
   console.log("sampleRate " + this.sampleRate);
 }
 BVPcmRecorder.prototype.start = function() {
-  navigator.mediaDevices.getUserMedia({
-    audio: true
-  }).then((stream) => {
-    this.audioInput = this.context.createMediaStreamSource(stream);
-  }, (error2) => {
-    console.error(error2);
-  }).then(() => {
-    this.audioInput.connect(this.analyser);
-    this.analyser.connect(this.recorder);
-    this.recorder.connect(this.context.destination);
+  return __async(this, null, function* () {
+    yield this.init();
+    navigator.mediaDevices.getUserMedia({
+      audio: true,
+      sampleRate: this.config.sampleRate
+    }).then((stream) => {
+      this.audioInput = this.context.createMediaStreamSource(stream);
+    }, (error2) => {
+      console.error(error2);
+    }).then(() => {
+      this.audioInput.connect(this.analyser);
+      this.analyser.connect(this.recorder);
+      this.recorder.connect(this.context.destination);
+    });
   });
 };
 BVPcmRecorder.prototype.stop = function() {
@@ -14527,23 +14602,21 @@ BVPcmRecorder.prototype.stop = function() {
     this.audioInput.disconnect();
   if (this.recorder)
     this.recorder.disconnect();
+  if (this.context)
+    this.context.close();
 };
 BVPcmRecorder.prototype.init = function() {
-  this.context = new (window.AudioContext || window.webkitAudioContext)();
-  this.analyser = this.context.createAnalyser();
-  this.analyser.fftSize = this.fftSize;
-  const createScript = this.context.createScriptProcessor || this.context.createJavaScriptNode;
-  this.recorder = createScript.apply(
-    this.context,
-    [this.fftSize, this.config.numberChannels, this.config.numberChannels]
-  );
-  this.recorder.onaudioprocess = this.onaudioprocess.bind(this);
-};
-BVPcmRecorder.prototype.onaudioprocess = function(e) {
-  if (this.config.numberChannels === 1) {
-    const data = e.inputBuffer.getChannelData(0);
-    this.handlePcm(new Float32Array(data));
-  }
+  return __async(this, null, function* () {
+    this.context = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: this.config.sampleRate });
+    this.analyser = this.context.createAnalyser();
+    this.analyser.fftSize = this.fftSize;
+    yield this.context.audioWorklet.addModule(audioProcessorUrl);
+    this.recorder = new AudioWorkletNode(this.context, "bv-audio-processor");
+    this.recorder.port.onmessage = (e) => {
+      if (e.data)
+        this.handlePcm(e.data);
+    };
+  });
 };
 BVPcmRecorder.prototype.handlePcm = function(bytes) {
   if (bytes[0] === 0 && bytes[1] === 0)
@@ -16320,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

@@ -1,5 +1,6 @@
 import PlayerPlugin from "../../plugins/player";
 import { IDataHandle } from "src/core/events";
+import { IRecordStopInfo } from "src/plugins/player/event";
 type EnumRotate = "Rotate0" | "Rotate90" | "Rotate180" | "Rotate270";
 export type IPlayerState = ReturnType<typeof CreatePlayerState>;
 export declare function CreatePlayerState(player: PlayerPlugin): {
@@ -8,10 +9,7 @@ export declare function CreatePlayerState(player: PlayerPlugin): {
     information: IDataHandle<boolean>;
     record: IDataHandle<{
         type: "recordStart" | "recordStop";
-        recordInfo?: {
-            data: Blob;
-            cancelAutoDownload: () => void;
-        } | undefined;
+        recordInfo?: IRecordStopInfo | undefined;
     }>;
     rotate: IDataHandle<{
         type: EnumRotate;
@@ -24,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

@@ -1,3 +1,4 @@
+import { IPuOption } from "src/main";
 import { IPluginEvent, IPluginEventMap } from "../../plugins/types";
 import PlayerPlugin, { PLAYER_MODES } from "./index";
 interface IPlayerEvent extends IPluginEvent {
@@ -15,6 +16,17 @@ interface IRotateEvent extends IPlayerEvent {
     name: "rotateEvent";
     rotateDeg: number;
 }
+export interface IRecordStopInfo {
+    data: Blob;
+    startTime: number;
+    endTime: number;
+    duration: number;
+    puOptions: IPuOption;
+    fileName: string;
+    cancelAutoDownload: () => {
+        download(filename?: string): void;
+    };
+}
 export interface IPlayerPluginEventMap extends IPluginEventMap {
     init: IInitEvent;
     closeWebrtc: ICloseWebrtcEvent;
@@ -22,13 +34,13 @@ export interface IPlayerPluginEventMap extends IPluginEventMap {
     close: IPlayerEvent;
     contextmenu: Event;
     recordStart: undefined;
-    recordStop: {
-        data: Blob;
-        cancelAutoDownload: () => void;
-    };
+    recordStop: IRecordStopInfo;
     screenshot: undefined | {
         img: Blob;
-        cancelAutoDownload: () => void;
+        fileName: string;
+        cancelAutoDownload: () => {
+            download(fileName?: string): void;
+        };
     };
     fullscreen: boolean;
     rotate: IRotateEvent;

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

@@ -56,6 +56,7 @@ declare class PlayerPlugin extends Plugin<HTMLDivElement, IPlayerPluginEventMap>
     private _videoOption?;
     private _pluginOption?;
     private _playerConfig;
+    private _puOptions?;
     private _video;
     private _spinner;
     private _toast;

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

@@ -1,3 +1,4 @@
+import { IOnMediaRecordHandle } from "src/utils/media";
 import { IPluginEvent, IPluginEventMap, Plugin } from "./types";
 import { IPuOption } from "src/main";
 interface IVideoPluginEvent extends IPluginEvent {
@@ -48,11 +49,12 @@ 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;
-    recordStop(onRecordInfo?: (data: Blob, cancelAutoDownload: () => void) => void): void;
+    recordStop(onRecordInfo?: IOnMediaRecordHandle): void;
     rotate(degStep: number): void;
     beforeDestroy(): void;
 }

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

@@ -1,6 +1,16 @@
 interface IStreamProvider {
     captureStream(frameRate?: number): MediaStream;
 }
+export interface IOnMediaRecordHandle {
+    (blob: Blob, metaInfo: {
+        duration: number;
+        startTime: number;
+        endTime: number;
+        fileName: string;
+    }, cancelAutoDownload: () => {
+        download(fileName?: string): void;
+    }): boolean;
+}
 interface IMediaOption {
     video?: boolean;
     audio?: boolean;
@@ -35,14 +45,16 @@ 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: (blob: Blob, cancelAutoDownload: () => void) => Promise<void> | void): void;
+        setOnMedia(onMedia: IOnMediaRecordHandle): void;
     } | undefined)?];
     getMediaDir: (option: IMediaOption) => number;
     video2Canvas: (video: HTMLVideoElement, opts: IVideo2CanvasOptions) => ICanvasControl;

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

@@ -1 +1,2 @@
-export declare const createRecord: (_mediaStream: MediaStream, fileName: string, isDownload: (blob: Blob) => Promise<boolean>) => MediaRecorder;
+import { IOnMediaRecordHandle } from "./media";
+export declare const createRecord: (_mediaStream: MediaStream, fileName: string, isDownload: IOnMediaRecordHandle) => MediaRecorder;

package/package.json

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