MediaMTX WebRTC Reader - TypeScript/React


A TypeScript-compatible WebRTC reader for MediaMTX WHEP streams with React integration.

This is a close port of the MediaMTX's reader.js (based on v1.15.2).

Installation

``bash
pnpm add mediamtx-webrtc-react


or

npm install mediamtx-webrtc-react

or

yarn add mediamtx-webrtc-react
`

Usage

$3

`typescript
import { MediaMTXWebRTCReader } from 'mediamtx-webrtc-react';

const reader = new MediaMTXWebRTCReader({
url: "http://mediamtx-ip:8889/mystream/whep",
user: "", // optional
pass: "", // optional
token: "", // optional
onError: (err) => {
console.error(err);
},
onTrack: (evt) => {
const videoElement = document.getElementById("myvideo") as HTMLVideoElement;
videoElement.srcObject = evt.streams[0];
},
});

// Clean up when done
// reader.close();
`

$3

`tsx
import React from 'react';
import { useMediaMTXWebRTC } from 'mediamtx-webrtc-react';

function VideoPlayer() {
const {
videoRef,
connectionState,
error,
isConnecting,
isConnected,
stream
} = useMediaMTXWebRTC({
url: "http://mediamtx-ip:8889/mystream/whep",
onError: (err) => console.error(err)
});

return (



);
}
`

$3

`tsx
import React from 'react';
import { WebRTCVideo } from 'mediamtx-webrtc-react';

function App() {
return (
url="http://mediamtx-ip:8889/mystream/whep"
onError={(err) => console.error(err)}
onConnectionStateChange={(state) => console.log('State:', state)}
autoPlay
controls
style={{ width: '100%', maxWidth: '800px' }}
/>
);
}
`

$3

`tsx
import React from 'react';
import { WebRTCAudio } from 'mediamtx-webrtc-react';

function AudioPlayer() {
return (
url="http://mediamtx-ip:8889/audiostream/whep"
controls
/>
);
}
`

Migration from JavaScript

The TypeScript version maintains full backward compatibility with the original JavaScript API:

$3


`html


`

$3

`typescript
import { MediaMTXWebRTCReader } from 'mediamtx-webrtc-react';

const reader = new MediaMTXWebRTCReader({
url: "http://mediamtx-ip:8889/mystream/whep",
onTrack: (evt) => {
const video = document.getElementById("myvideo") as HTMLVideoElement;
video.srcObject = evt.streams[0];
},
});
`

API Reference

$3

`typescript
interface MediaMTXWebRTCReaderConfig {
url: string; // WHEP endpoint URL
user?: string; // Optional username
pass?: string; // Optional password
token?: string; // Optional bearer token
onError?: (err: string) => void;
onTrack?: (evt: RTCTrackEvent) => void;
}
`

$3

`typescript
const {
// Connection state
connectionState, // 'getting_codecs' | 'running' | 'restarting' | 'closed' | 'failed'
isConnecting, // boolean
isConnected, // boolean
error, // string | null
stream, // MediaStream | null
retryCount, // number
lastConnectedAt, // Date | null

// Element refs
videoRef, // RefObject
audioRef, // RefObject

// Control methods
reader, // MediaMTXWebRTCReader instance
close, // () => void
restart, // () => void
} = useMediaMTXWebRTC(config);
``

Features

- ✅ Full TypeScript support with strict typing
- ✅ React hooks for easy integration
- ✅ Automatic video/audio element handling
- ✅ Connection state management
- ✅ Error handling and retry logic
- ✅ Backward compatibility with original JavaScript API
- ✅ ESM/CommonJS support
- ✅ Tree-shakeable exports

Browser Support

- Chrome/Chromium 80+
- Firefox 74+
- Safari 13.1+
- Edge 80+