I sent the buffer via socket, how can I pass the buffer array to @yume-chan/scrcpy-decoder-webcodecs for decoding?

[hlovingness]

import { ScrcpyVideoCodecId } from "@yume-chan/scrcpy"
import { WritableStream } from "@yume-chan/stream-extra"
import {
  InsertableStreamWebCodecsDecoderRenderer,
  WebGLWebCodecsDecoderRenderer,
  BitmapWebCodecsDecoderRenderer,
  WebCodecsVideoDecoder,
} from "@yume-chan/scrcpy-decoder-webcodecs"

function createWebCodecsRenderer() {
  if (InsertableStreamWebCodecsDecoderRenderer.isSupported) {
    const renderer = new InsertableStreamWebCodecsDecoderRenderer();
    return { renderer, element: renderer.element };
  }

  if (WebGLWebCodecsDecoderRenderer.isSupported) {
    const renderer = new WebGLWebCodecsDecoderRenderer();
    return { renderer, element: renderer.canvas };
  }

  const renderer = new BitmapWebCodecsDecoderRenderer();
  return { renderer, element: renderer.canvas };
}

const { renderer, element } = createWebCodecsRenderer();
console.log(renderer, element)
document.body.appendChild(element);

const decoder = new WebCodecsVideoDecoder({
  codec: ScrcpyVideoCodecId.H264,
  renderer: renderer,
});


// for buffer
const dataArray = new Uint8Array(data.data);
console.log(dataArray)
await decoder.writable.getWriter().write(dataArray)
writer.releaseLock()

[yume-chan]

decoder.writable requires ScrcpyMediaStreamPackets.

If you already parsed the video stream on server side, you need to create ScrcpyMediaStreamPackets yourself. If not, you can use parseVideoStreamMetadata and createMediaStreamTransformer to convert the stream to ScrcpyMediaStreamPackets

[hlovingness]

My scrcpy stream has removed device information and similar data. How can I create ScrcpyMediaStreamPacket and then pass it to decoder.writable?

[hlovingness]

Since what I have is a buffer array, I’m thinking of passing it directly to WebCodecsVideoDecoder for decoding and display.