Browse Source

分拆,优化pushStream方法

gemercheung 3 years ago
parent
commit
17c3e747ce
3 changed files with 339 additions and 410 deletions
  1. 235 261
      src/scene/scene.service.ts
  2. 5 1
      src/scene/stream/stream.d.ts
  3. 99 148
      src/scene/stream/stream.service.ts

+ 235 - 261
src/scene/scene.service.ts

@@ -12,6 +12,65 @@ import { ActionType } from './actionType';
 import { CacheService } from 'src/cache/cache.service';
 import { StreamService } from './stream/stream.service';
 
+const frameMetaReply = {
+  traceIds: [],
+  vehicle: null,
+  newUserStates: [
+    {
+      userId: 'a2aaaed1fffe6',
+      playerState: {
+        roomTypeId: '',
+        person: 0,
+        avatarId: '',
+        skinId: '',
+        roomId: '',
+        isHost: false,
+        isFollowHost: false,
+        skinDataVersion: '',
+        avatarComponents: '',
+        nickName: '',
+        movingMode: 0,
+        attitude: '',
+        areaName: '',
+        pathName: '',
+        pathId: '',
+        avatarSize: 1,
+        extra: '',
+        prioritySync: false,
+        player: {
+          position: { x: -755, y: -1450, z: -34 },
+          angle: { pitch: 0, yaw: 0, roll: 0 },
+        },
+        camera: {
+          position: { x: -1075, y: -1450, z: 86 },
+          angle: { pitch: 0, yaw: 0, roll: 0 },
+        },
+        cameraCenter: { x: -755, y: -1450, z: -34 },
+      },
+      renderInfo: {
+        renderType: 0,
+        videoFrame: null,
+        cameraStateType: 0,
+        isMoving: 0,
+        needIfr: 0,
+        isVideo: 0,
+        stillFrame: 0,
+        isRotating: 0,
+        isFollowing: 0,
+        clientPanoTitlesBitmap: [],
+        clientPanoTreceId: '',
+        prefetchVideoId: '',
+        noMedia: false,
+      },
+      event: null,
+      relation: 1,
+    },
+  ],
+  actionResponses: [],
+  getStateType: 0,
+  code: 0,
+  msg: 'OK',
+};
 @Injectable()
 export class SceneService implements OnModuleInit {
   constructor(
@@ -68,6 +127,13 @@ export class SceneService implements OnModuleInit {
     reply.subscribe((res) => {
       console.log('rotate-reply', res);
     });
+    // console.log('this.frameCnt', this.frameCnt);
+    // const stream: StreamFrameType = {
+    //   frame: this.frameCnt,
+    //   clipPath: path.join(__dirname, '../ws/video/254.h264'),
+    //   metaData: JSON.stringify(frameMetaReply),
+    // };
+    // this.streamService.pushFrameToSteam(stream);
   }
 
   joystick(request: JoystickRequest) {
@@ -118,11 +184,6 @@ export class SceneService implements OnModuleInit {
       track: false,
     };
     this.streamService.pushNormalDataToStream(reply);
-    // if (this.channel && this.channel.isOpen()) {
-    //   const replyBin = JSON.stringify(reply).replace(/\s/g, '');
-    //   const buff = Buffer.from(replyBin, 'utf-8');
-    //   this.channel.sendMessageBinary(buff);
-    // }
   }
 
   updateUserStatus() {
@@ -203,113 +264,26 @@ export class SceneService implements OnModuleInit {
     this._frameInteval = setInterval(async () => {
       this.frameCnt += 1;
       try {
-        // console.log()
-        // const data = await this.cacheService.get(
-        //   'updateFrameMetadata:2f60ea15cbd5a2',
-        // );
-        // console.log('test-data', data);
-
         if (this.frameCnt === 1) {
-          this.pushTheFirstFrame();
+          // this.pushTheFirstFrame();
+          const stream: StreamFrameType = {
+            frame: 1,
+            clipPath: path.join(__dirname, '../ws/video/254.h264'),
+            metaData: JSON.stringify(frameMetaReply),
+          };
+          this.streamService.pushFrameToSteam(stream);
         }
 
         // console.log('11', await this.redisService.get('test'));
         // console.log('data', data);
         if (this.frameCnt > 1) {
-          const reply = {
-            traceIds: [],
-            vehicle: null,
-            newUserStates: [
-              {
-                userId: 'a2aaaed1fffe6',
-                playerState: {
-                  roomTypeId: '',
-                  person: 0,
-                  avatarId: '',
-                  skinId: '',
-                  roomId: '',
-                  isHost: false,
-                  isFollowHost: false,
-                  skinDataVersion: '',
-                  avatarComponents: '',
-                  nickName: '',
-                  movingMode: 0,
-                  attitude: '',
-                  areaName: '',
-                  pathName: '',
-                  pathId: '',
-                  avatarSize: 1,
-                  extra: '',
-                  prioritySync: false,
-                  player: {
-                    position: { x: -755, y: -1450, z: -34 },
-                    angle: { pitch: 0, yaw: 0, roll: 0 },
-                  },
-                  camera: {
-                    position: { x: -1075, y: -1450, z: 86 },
-                    angle: { pitch: 0, yaw: 0, roll: 0 },
-                  },
-                  cameraCenter: { x: -755, y: -1450, z: -34 },
-                },
-                renderInfo: {
-                  renderType: 0,
-                  videoFrame: null,
-                  cameraStateType: 0,
-                  isMoving: 0,
-                  needIfr: 0,
-                  isVideo: 0,
-                  stillFrame: 0,
-                  isRotating: 0,
-                  isFollowing: 0,
-                  clientPanoTitlesBitmap: [],
-                  clientPanoTreceId: '',
-                  prefetchVideoId: '',
-                  noMedia: false,
-                },
-                event: null,
-                relation: 1,
-              },
-            ],
-            actionResponses: [],
-            getStateType: 0,
-            code: 0,
-            msg: 'OK',
+          const streamMeta: StreamMetaType = {
+            frame: this.frameCnt,
+            metaData: JSON.stringify(frameMetaReply),
           };
-          const demo = JSON.stringify(reply).replace(/\s/g, '');
-          const buff = Buffer.from(demo, 'utf-8');
-
-          const block = 36;
-          const blockBuff = Buffer.alloc(block);
-          // const packArrayBuffer = new ArrayBuffer(buff.byteLength + block);
-          const packBuffer = Buffer.concat([blockBuff, buff]);
-
-          const statusPack = new DataView(
-            packBuffer.buffer.slice(
-              packBuffer.byteOffset,
-              packBuffer.byteOffset + packBuffer.byteLength,
-            ),
-          );
-
-          statusPack.setUint32(0, 1437227610);
-          // 16 bit slot
-          statusPack.setUint16(6, block);
-          statusPack.setUint16(8, this.frameCnt);
-          statusPack.setUint16(10, 1);
-          statusPack.setUint16(24, 0);
-          statusPack.setUint16(26, 0);
-
-          // 32 bit slot
-          statusPack.setUint32(12, buff.byteLength);
-          statusPack.setUint32(16, 0);
-          // statusPack.setUint32(20, 0);
-          statusPack.setUint32(24, 0);
-          statusPack.setUint32(28, 0);
-          statusPack.setUint32(32, 0);
-
-          if (this.channel && this.channel.isOpen()) {
-            this.channel.sendMessageBinary(Buffer.from(statusPack.buffer));
-          }
+          this.streamService.pushMetaDataToSteam(streamMeta);
         }
+
       } catch (error) {
         console.log('error', error);
       }
@@ -321,161 +295,161 @@ export class SceneService implements OnModuleInit {
     this.frameCnt = -1;
   }
   // 首屏渲染
-  pushTheFirstFrame() {
-    const chunk_size = 16000;
-    const block = 36;
-    console.log('首屏--数据');
-    const paths = path.join(__dirname, '../ws/video');
-    // const clipPath = paths + `/1.v2.h264`;
-    const testClipPath = paths + `/2.h264`;
-    const metaData = {
-      traceIds: [],
-      vehicle: null,
-      newUserStates: [
-        {
-          userId: '1e3fa84d5c29a',
-          playerState: {
-            roomTypeId: '',
-            person: 0,
-            avatarId: 'KGe_Boy',
-            skinId: '10089',
-            roomId: '',
-            isHost: false,
-            isFollowHost: false,
-            skinDataVersion: '1008900008',
-            avatarComponents: '',
-            nickName: '1e3fa84d5c29a',
-            movingMode: 0,
-            attitude: 'walk',
-            areaName: 'LQC',
-            pathName: 'thirdwalk',
-            pathId: 'thirdwalk',
-            avatarSize: 1,
-            extra: '{"removeWhenDisconnected":true}',
-            prioritySync: false,
-            player: {
-              position: { x: -755, y: -1450, z: -34 },
-              angle: { pitch: 0, yaw: 0, roll: 0 },
-            },
-            camera: {
-              position: { x: -1075, y: -1450, z: 86 },
-              angle: { pitch: 0, yaw: 0, roll: 0 },
-            },
-            cameraCenter: null,
-          },
-          renderInfo: {
-            renderType: 0,
-            videoFrame: null,
-            cameraStateType: 0,
-            isMoving: 0,
-            needIfr: 0,
-            isVideo: 0,
-            stillFrame: 0,
-            isRotating: 0,
-            isFollowing: 0,
-            clientPanoTitlesBitmap: [],
-            clientPanoTreceId: '',
-            prefetchVideoId: '',
-            noMedia: false,
-          },
-          event: {
-            id: '',
-            type: 0,
-            points: [],
-            rotateEvent: null,
-            removeVisitorEvent: null,
-          },
-          relation: 1,
-        },
-      ],
-      actionResponses: [],
-      getStateType: 0,
-      code: 0,
-      msg: 'OK',
-    };
-    const metaDataString = JSON.stringify(metaData).replace(/\s/g, '');
-
-    const coordBuff = Buffer.from(metaDataString, 'utf-8');
-
-    console.warn('coordBuff', coordBuff.byteLength);
-
-    // const steamStat = statSync(clipPath);
-
-    // const steamTotalSize = metaData.length + steamStat.size;
-    const clipBuffer = readFileSync(testClipPath);
-    // console.log('clipBuffer', clipBuffer);
-    // const fullBufferList = Buffer.concat([coordBuff, clipBuffer]);
-
-    // const steam = createReadStream(clipPath, {
-    //   highWaterMark: chunk_size - block,
-    // });
-
-    // console.log('fullBufferList', fullBufferList);
-
-    // const steam1 = createReadStream(fullBufferList.toString(), {
-    //   highWaterMark: chunk_size - block,
-    // });
-    const steam = new streamBuffers.ReadableStreamBuffer({
-      frequency: 1, // in milliseconds.
-      chunkSize: chunk_size - block, // in bytes.
-    });
-    steam.put(coordBuff);
-    steam.put(clipBuffer);
-
-    let steamByteLength = 0;
-
-    steam.on('data', (data: Buffer) => {
-      // console.log('data', data, data.byteLength);
-      // console.log('data-size', data);
-      const blockBuffStart = Buffer.alloc(block);
-
-      const packBuffer = Buffer.concat([blockBuffStart, data]);
-
-      // const isLastFrame = packBuffer.byteLength - chunk_size < 0;
-      // console.log('packBuffer', packBuffer.byteLength);
-      // if (isLastFrame) {
-      //   // last frame
-      //   packBuffer = Buffer.concat([packBuffer, coordBuff]);
-      //   console.log('last frame', packBuffer.byteLength);
-      // }
-
-      const framePack = new DataView(
-        packBuffer.buffer.slice(
-          packBuffer.byteOffset,
-          packBuffer.byteOffset + packBuffer.byteLength,
-        ),
-      );
-
-      // 16 bit slot
-      // framePack.setUint32(4)
-      framePack.setUint16(6, block);
-      framePack.setUint16(8, 1); // first render cnt
-      framePack.setUint16(10, 1); // isDIR
-      framePack.setUint16(24, 0);
-      framePack.setUint16(26, 0);
-
-      // 32 bit slot
-      // statusPack.setUint32(12, buff.byteLength);
-      // console.log('metaLen', coordBuff.byteLength);
-      // console.log('metaLen', clipBuffer.byteLength);
-
-      framePack.setUint32(0, 1437227610);
-      framePack.setUint32(12, coordBuff.byteLength); // metaLen
-      framePack.setUint32(16, clipBuffer.byteLength); // mediaLen
-      framePack.setUint32(20, 754871824); //server_time
-      framePack.setUint32(24, 0);
-      framePack.setUint32(28, 0);
-      framePack.setUint32(block - 4, steamByteLength);
-
-      // console.log('statusPack', statusPack);
-      if (this.channel && this.channel.isOpen()) {
-        this.channel.sendMessageBinary(Buffer.from(framePack.buffer));
-      }
-      steamByteLength += data.byteLength;
-    });
-    steam.on('end', () => {
-      steamByteLength = 0;
-      // this.onSteaming = false;
-    });
-  }
+  // pushTheFirstFrame() {
+  //   const chunk_size = 16000;
+  //   const block = 36;
+  //   console.log('首屏--数据');
+  //   const paths = path.join(__dirname, '../ws/video');
+  //   // const clipPath = paths + `/1.v2.h264`;
+  //   const testClipPath = paths + `/2.h264`;
+  //   const metaData = {
+  //     traceIds: [],
+  //     vehicle: null,
+  //     newUserStates: [
+  //       {
+  //         userId: '1e3fa84d5c29a',
+  //         playerState: {
+  //           roomTypeId: '',
+  //           person: 0,
+  //           avatarId: 'KGe_Boy',
+  //           skinId: '10089',
+  //           roomId: '',
+  //           isHost: false,
+  //           isFollowHost: false,
+  //           skinDataVersion: '1008900008',
+  //           avatarComponents: '',
+  //           nickName: '1e3fa84d5c29a',
+  //           movingMode: 0,
+  //           attitude: 'walk',
+  //           areaName: 'LQC',
+  //           pathName: 'thirdwalk',
+  //           pathId: 'thirdwalk',
+  //           avatarSize: 1,
+  //           extra: '{"removeWhenDisconnected":true}',
+  //           prioritySync: false,
+  //           player: {
+  //             position: { x: -755, y: -1450, z: -34 },
+  //             angle: { pitch: 0, yaw: 0, roll: 0 },
+  //           },
+  //           camera: {
+  //             position: { x: -1075, y: -1450, z: 86 },
+  //             angle: { pitch: 0, yaw: 0, roll: 0 },
+  //           },
+  //           cameraCenter: null,
+  //         },
+  //         renderInfo: {
+  //           renderType: 0,
+  //           videoFrame: null,
+  //           cameraStateType: 0,
+  //           isMoving: 0,
+  //           needIfr: 0,
+  //           isVideo: 0,
+  //           stillFrame: 0,
+  //           isRotating: 0,
+  //           isFollowing: 0,
+  //           clientPanoTitlesBitmap: [],
+  //           clientPanoTreceId: '',
+  //           prefetchVideoId: '',
+  //           noMedia: false,
+  //         },
+  //         event: {
+  //           id: '',
+  //           type: 0,
+  //           points: [],
+  //           rotateEvent: null,
+  //           removeVisitorEvent: null,
+  //         },
+  //         relation: 1,
+  //       },
+  //     ],
+  //     actionResponses: [],
+  //     getStateType: 0,
+  //     code: 0,
+  //     msg: 'OK',
+  //   };
+  //   const metaDataString = JSON.stringify(metaData).replace(/\s/g, '');
+
+  //   const coordBuff = Buffer.from(metaDataString, 'utf-8');
+
+  //   console.warn('coordBuff', coordBuff.byteLength);
+
+  //   // const steamStat = statSync(clipPath);
+
+  //   // const steamTotalSize = metaData.length + steamStat.size;
+  //   const clipBuffer = readFileSync(testClipPath);
+  //   // console.log('clipBuffer', clipBuffer);
+  //   // const fullBufferList = Buffer.concat([coordBuff, clipBuffer]);
+
+  //   // const steam = createReadStream(clipPath, {
+  //   //   highWaterMark: chunk_size - block,
+  //   // });
+
+  //   // console.log('fullBufferList', fullBufferList);
+
+  //   // const steam1 = createReadStream(fullBufferList.toString(), {
+  //   //   highWaterMark: chunk_size - block,
+  //   // });
+  //   const steam = new streamBuffers.ReadableStreamBuffer({
+  //     frequency: 1, // in milliseconds.
+  //     chunkSize: chunk_size - block, // in bytes.
+  //   });
+  //   steam.put(coordBuff);
+  //   steam.put(clipBuffer);
+
+  //   let steamByteLength = 0;
+
+  //   steam.on('data', (data: Buffer) => {
+  //     // console.log('data', data, data.byteLength);
+  //     // console.log('data-size', data);
+  //     const blockBuffStart = Buffer.alloc(block);
+
+  //     const packBuffer = Buffer.concat([blockBuffStart, data]);
+
+  //     // const isLastFrame = packBuffer.byteLength - chunk_size < 0;
+  //     // console.log('packBuffer', packBuffer.byteLength);
+  //     // if (isLastFrame) {
+  //     //   // last frame
+  //     //   packBuffer = Buffer.concat([packBuffer, coordBuff]);
+  //     //   console.log('last frame', packBuffer.byteLength);
+  //     // }
+
+  //     const framePack = new DataView(
+  //       packBuffer.buffer.slice(
+  //         packBuffer.byteOffset,
+  //         packBuffer.byteOffset + packBuffer.byteLength,
+  //       ),
+  //     );
+
+  //     // 16 bit slot
+  //     // framePack.setUint32(4)
+  //     framePack.setUint16(6, block);
+  //     framePack.setUint16(8, 1); // first render cnt
+  //     framePack.setUint16(10, 1); // isDIR
+  //     framePack.setUint16(24, 0);
+  //     framePack.setUint16(26, 0);
+
+  //     // 32 bit slot
+  //     // statusPack.setUint32(12, buff.byteLength);
+  //     // console.log('metaLen', coordBuff.byteLength);
+  //     // console.log('metaLen', clipBuffer.byteLength);
+
+  //     framePack.setUint32(0, 1437227610);
+  //     framePack.setUint32(12, coordBuff.byteLength); // metaLen
+  //     framePack.setUint32(16, clipBuffer.byteLength); // mediaLen
+  //     framePack.setUint32(20, 754871824); //server_time
+  //     framePack.setUint32(24, 0);
+  //     framePack.setUint32(28, 0);
+  //     framePack.setUint32(block - 4, steamByteLength);
+
+  //     // console.log('statusPack', statusPack);
+  //     if (this.channel && this.channel.isOpen()) {
+  //       this.channel.sendMessageBinary(Buffer.from(framePack.buffer));
+  //     }
+  //     steamByteLength += data.byteLength;
+  //   });
+  //   steam.on('end', () => {
+  //     steamByteLength = 0;
+  //     // this.onSteaming = false;
+  //   });
+  // }
 }

+ 5 - 1
src/scene/stream/stream.d.ts

@@ -1,5 +1,9 @@
 interface StreamFrameType {
   frame: number;
   clipPath: string;
-  mediaLen: string;
+  metaData: string;
+}
+interface StreamMetaType {
+  frame: number;
+  metaData: string;
 }

+ 99 - 148
src/scene/stream/stream.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@nestjs/common';
+import { Injectable, Logger } from '@nestjs/common';
 import { DataChannel } from 'node-datachannel';
 import * as path from 'path';
 import { readFileSync } from 'fs';
@@ -8,6 +8,7 @@ export class StreamService {
   private channel: DataChannel;
   private readonly chunk_size = 16000;
   private readonly block = 36;
+  private logger: Logger = new Logger('StreamService');
 
   setChannel(channel: DataChannel) {
     this.channel = channel;
@@ -24,163 +25,113 @@ export class StreamService {
     }
   }
 
-  pushFrameToSteam(stream: StreamFrameType) {}
-
-  pushTheFirstFrame() {
-    const chunk_size = 16000;
-    const block = 36;
-    console.log('首屏--数据');
-    const paths = path.join(__dirname, '../ws/video');
-    // const clipPath = paths + `/1.v2.h264`;
-    const testClipPath = paths + `/2.h264`;
-    const metaData = {
-      traceIds: [],
-      vehicle: null,
-      newUserStates: [
-        {
-          userId: '1e3fa84d5c29a',
-          playerState: {
-            roomTypeId: '',
-            person: 0,
-            avatarId: 'KGe_Boy',
-            skinId: '10089',
-            roomId: '',
-            isHost: false,
-            isFollowHost: false,
-            skinDataVersion: '1008900008',
-            avatarComponents: '',
-            nickName: '1e3fa84d5c29a',
-            movingMode: 0,
-            attitude: 'walk',
-            areaName: 'LQC',
-            pathName: 'thirdwalk',
-            pathId: 'thirdwalk',
-            avatarSize: 1,
-            extra: '{"removeWhenDisconnected":true}',
-            prioritySync: false,
-            player: {
-              position: { x: -755, y: -1450, z: -34 },
-              angle: { pitch: 0, yaw: 0, roll: 0 },
-            },
-            camera: {
-              position: { x: -1075, y: -1450, z: 86 },
-              angle: { pitch: 0, yaw: 0, roll: 0 },
-            },
-            cameraCenter: null,
-          },
-          renderInfo: {
-            renderType: 0,
-            videoFrame: null,
-            cameraStateType: 0,
-            isMoving: 0,
-            needIfr: 0,
-            isVideo: 0,
-            stillFrame: 0,
-            isRotating: 0,
-            isFollowing: 0,
-            clientPanoTitlesBitmap: [],
-            clientPanoTreceId: '',
-            prefetchVideoId: '',
-            noMedia: false,
-          },
-          event: {
-            id: '',
-            type: 0,
-            points: [],
-            rotateEvent: null,
-            removeVisitorEvent: null,
-          },
-          relation: 1,
-        },
-      ],
-      actionResponses: [],
-      getStateType: 0,
-      code: 0,
-      msg: 'OK',
-    };
-    const metaDataString = JSON.stringify(metaData).replace(/\s/g, '');
-
-    const coordBuff = Buffer.from(metaDataString, 'utf-8');
-
-    console.warn('coordBuff', coordBuff.byteLength);
-
-    // const steamStat = statSync(clipPath);
-
-    // const steamTotalSize = metaData.length + steamStat.size;
-    const clipBuffer = readFileSync(testClipPath);
-    // console.log('clipBuffer', clipBuffer);
-    // const fullBufferList = Buffer.concat([coordBuff, clipBuffer]);
-
-    // const steam = createReadStream(clipPath, {
-    //   highWaterMark: chunk_size - block,
-    // });
-
-    // console.log('fullBufferList', fullBufferList);
-
-    // const steam1 = createReadStream(fullBufferList.toString(), {
-    //   highWaterMark: chunk_size - block,
-    // });
-    const steam = new streamBuffers.ReadableStreamBuffer({
-      frequency: 1, // in milliseconds.
-      chunkSize: chunk_size - block, // in bytes.
-    });
-    steam.put(coordBuff);
-    steam.put(clipBuffer);
-
-    let steamByteLength = 0;
-
-    steam.on('data', (data: Buffer) => {
-      // console.log('data', data, data.byteLength);
-      // console.log('data-size', data);
-      const blockBuffStart = Buffer.alloc(block);
-
-      const packBuffer = Buffer.concat([blockBuffStart, data]);
-
-      // const isLastFrame = packBuffer.byteLength - chunk_size < 0;
-      // console.log('packBuffer', packBuffer.byteLength);
-      // if (isLastFrame) {
-      //   // last frame
-      //   packBuffer = Buffer.concat([packBuffer, coordBuff]);
-      //   console.log('last frame', packBuffer.byteLength);
-      // }
-
-      const framePack = new DataView(
+  pushMetaDataToSteam(stream: StreamMetaType) {
+    try {
+      const metaData = stream.metaData;
+      const frame = stream.frame;
+      const metaDataBin = metaData.replace(/\s/g, '');
+      const buff = Buffer.from(metaDataBin, 'utf-8');
+
+      // const block = 36;
+      const blockBuff = Buffer.alloc(this.block);
+      const packBuffer = Buffer.concat([blockBuff, buff]);
+
+      const statusPack = new DataView(
         packBuffer.buffer.slice(
           packBuffer.byteOffset,
           packBuffer.byteOffset + packBuffer.byteLength,
         ),
       );
 
+      statusPack.setUint32(0, 1437227610);
       // 16 bit slot
-      // framePack.setUint32(4)
-      framePack.setUint16(6, block);
-      framePack.setUint16(8, 1); // first render cnt
-      framePack.setUint16(10, 1); // isDIR
-      framePack.setUint16(24, 0);
-      framePack.setUint16(26, 0);
+      statusPack.setUint16(6, this.block);
+      statusPack.setUint16(8, frame);
+      statusPack.setUint16(10, 1);
+      statusPack.setUint16(24, 0);
+      statusPack.setUint16(26, 0);
 
       // 32 bit slot
-      // statusPack.setUint32(12, buff.byteLength);
-      // console.log('metaLen', coordBuff.byteLength);
-      // console.log('metaLen', clipBuffer.byteLength);
-
-      framePack.setUint32(0, 1437227610);
-      framePack.setUint32(12, coordBuff.byteLength); // metaLen
-      framePack.setUint32(16, clipBuffer.byteLength); // mediaLen
-      framePack.setUint32(20, 754871824); //server_time
-      framePack.setUint32(24, 0);
-      framePack.setUint32(28, 0);
-      framePack.setUint32(block - 4, steamByteLength);
-
-      // console.log('statusPack', statusPack);
+      statusPack.setUint32(12, buff.byteLength);
+      statusPack.setUint32(16, 0);
+      // statusPack.setUint32(20, 0);
+      statusPack.setUint32(24, 0);
+      statusPack.setUint32(28, 0);
+      statusPack.setUint32(32, 0);
+
       if (this.channel && this.channel.isOpen()) {
-        this.channel.sendMessageBinary(Buffer.from(framePack.buffer));
+        this.channel.sendMessageBinary(Buffer.from(statusPack.buffer));
       }
-      steamByteLength += data.byteLength;
-    });
-    steam.on('end', () => {
-      steamByteLength = 0;
-      // this.onSteaming = false;
-    });
+    } catch (error) {
+      this.logger.error(error);
+    }
+  }
+
+  pushFrameToSteam(stream: StreamFrameType) {
+    try {
+      const clipPath = stream.clipPath;
+      const metaData = stream.metaData;
+      const frame = stream.frame;
+      const metaDataString = metaData.replace(/\s/g, '');
+      const coordBuff = Buffer.from(metaDataString, 'utf-8');
+      console.warn('coordBuff', coordBuff.byteLength);
+      // const steamStat = statSync(clipPath);
+      // const steamTotalSize = metaData.length + steamStat.size;
+      const clipBuffer = readFileSync(clipPath);
+      const steam = new streamBuffers.ReadableStreamBuffer({
+        frequency: 1, // in milliseconds.
+        chunkSize: this.chunk_size - this.block, // in bytes.
+      });
+      steam.put(coordBuff);
+      steam.put(clipBuffer);
+
+      let steamByteLength = 0;
+
+      steam.on('data', (data: Buffer) => {
+        // console.log('data', data, data.byteLength);
+        const blockBuffStart = Buffer.alloc(this.block);
+        const packBuffer = Buffer.concat([blockBuffStart, data]);
+
+        const framePack = new DataView(
+          packBuffer.buffer.slice(
+            packBuffer.byteOffset,
+            packBuffer.byteOffset + packBuffer.byteLength,
+          ),
+        );
+
+        // 16 bit slot
+        // framePack.setUint32(4)
+        framePack.setUint16(6, this.block);
+        framePack.setUint16(8, frame); // first render cnt
+        framePack.setUint16(10, 1); // isDIR
+        framePack.setUint16(24, 0);
+        framePack.setUint16(26, 0);
+
+        // 32 bit slot
+        // statusPack.setUint32(12, buff.byteLength);
+        // console.log('metaLen', coordBuff.byteLength);
+        // console.log('metaLen', clipBuffer.byteLength);
+
+        framePack.setUint32(0, 1437227610);
+        framePack.setUint32(12, coordBuff.byteLength); // metaLen
+        framePack.setUint32(16, clipBuffer.byteLength); // mediaLen
+        framePack.setUint32(20, 754871824); //server_time
+        framePack.setUint32(24, 0);
+        framePack.setUint32(28, 0);
+        framePack.setUint32(this.block - 4, steamByteLength);
+
+        // console.log('statusPack', statusPack);
+        if (this.channel && this.channel.isOpen()) {
+          this.channel.sendMessageBinary(Buffer.from(framePack.buffer));
+        }
+        steamByteLength += data.byteLength;
+      });
+      steam.on('end', () => {
+        steamByteLength = 0;
+        // this.onSteaming = false;
+      });
+    } catch (error) {
+      this.logger.error(error);
+    }
   }
 }