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.

[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.

[yume-chan]

Update: It's a Vite bug vitejs/vite#8427