I have a question, how to render the video stream in the browser?

[zw-999]

Can @yume-chan/scrcpy-decoder-tinyh264 and @yume-chan/scrcpy-decoder-webcodecs be used separately? Since I'm not using nodejs, I'm having a problem rendering the video stream in the browser.

[yume-chan]

@yume-chan/scrcpy-decoder-tinyh264 and @yume-chan/scrcpy-decoder-webcodecs can only be used in browsers.

They only used several types in @yume-chan/scrcpy to define the input format. If you can supply your video data in a compatible format, you can use them to decode and render your own videos.

[yume-chan]

// const videoPacketStream = stream.pipeThrough(options.createMediaStreamTransformer());

This line is needed. You should pipe videoPacketStream into decoder.writable. Otherwise the code looks correct (and parseVideoStreamMetadata is working). You can also read videoPacketStream yourself instead of piping it into the decoder to check if the packets are flowing.

[zw-999]

The console reported an error after adding this line。

import { TinyH264Decoder } from "@yume-chan/scrcpy-decoder-tinyh264";
let rsp =  await fetch("http://127.0.0.1:5000/video_stream")
let video = rsp.body
import { ScrcpyOptionsLatest } from "@yume-chan/scrcpy";
const options = new ScrcpyOptionsLatest({});
const { metadata, stream } = await options.parseVideoStreamMetadata(video);
const videoPacketStream = stream.pipeThrough(options.createMediaStreamTransformer());
console.log(metadata)
console.log(stream)
const decoder = new TinyH264Decoder();

document.body.appendChild(decoder.renderer);
videoPacketStream.pipeTo(decoder.writable).catch((err) => {console.log(err)});

{deviceName: 'ELE-AL00', codec: 1748121140, width: 1080, height: 2336}    main.js:17
PushReadableStream {locked: true}    main.js:18 
TypeError: YuvBuffer.format is not a function   main.js:25
    at TinyH264Decoder.configure_fn (@yume-chan_scrcpy-decoder-tinyh264.js?v=445583b4:241:28)
    at async Object.write (@yume-chan_scrcpy-decoder-tinyh264.js?v=445583b4:184:13)

[yume-chan]

Vite can't load version 0.0.24. Try version 1.0.0 I released today.

[zw-999]

With no error after a 1.0.0 release, but no video rendering out, according to the document I tried many ways to "https://docs.tangoapp.dev/scrcpy/video/tiny-h264/" but in the end also didn't apply colours to a drawing, can you have a similar example reference? Thank you very much. This has been bothering me for a long time.
My local environment:

cpu  M1
node    v22.12.0
scrcpy 2.4

"@yume-chan/scrcpy": "^1.0.0",
"@yume-chan/scrcpy-decoder-tinyh264": "^1.0.0",
"@yume-chan/scrcpy-decoder-webcodecs": "^1.0.0",

I start the command scrcpy-server adb shell CLASSPATH=/data/local/tmp/scrcpy-server.jar app_process / com.genymobile.scrcpy.Server 2.4 scid=28971338 video_bit_rate=2000000 max_fps=30 video_codec_options=profile=1,level=2048
and my code

import { TinyH264Decoder } from "@yume-chan/scrcpy-decoder-tinyh264";
import { ScrcpyOptions2_4 } from "@yume-chan/scrcpy";

let rsp =  await fetch("http://127.0.0.1:5000/video_stream")
let video = rsp.body
const options = new ScrcpyOptions2_4({});
const { metadata, stream } = await options.parseVideoStreamMetadata(video);
const videoPacketStream = stream.pipeThrough(options.createMediaStreamTransformer());
console.log(metadata)
console.log(stream)
const decoder = new TinyH264Decoder();
videoPacketStream.pipeTo(decoder.writable).catch((e) => {console.error(e)});
document.body.appendChild(decoder.renderer);
console.log("ok")

[yume-chan]

For example, this project uses WebSocket to transfer multiple streams and render them using TinyH264 decoder: https://github.com/project-SIMPLE/simple.webplatform/blob/36cbef318e17300e5ea5400cb48a4f88a54ba8e1/src/components/WebSocketManager/VideoStreamManager.tsx#L80

When 504 happens Vite should automatically reload the page, if it didn't, or if it still returns 504 even after reloading manually, then this is an issue in Vite.