https://github.com/unyt-org/example-video-call
Example project that shows how to create a basic video call application with UIX
https://github.com/unyt-org/example-video-call
datex uix uix-example unyt unyt-org video-streaming webrtc
Last synced: 18 days ago
JSON representation
Example project that shows how to create a basic video call application with UIX
- Host: GitHub
- URL: https://github.com/unyt-org/example-video-call
- Owner: unyt-org
- Created: 2024-03-01T17:29:40.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-16T18:19:15.000Z (over 1 year ago)
- Last Synced: 2025-03-07T17:22:29.110Z (about 1 year ago)
- Topics: datex, uix, uix-example, unyt, unyt-org, video-streaming, webrtc
- Language: CSS
- Homepage: https://video.example.unyt.org
- Size: 81.1 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# UIX Video Call Example Project
This is a example project demonstrating how to create a basic video call
application with UIX. Encrypted end-to-end video calls are established via DATEX
and transmitted over a WebRTC connection.
## Project structure
This project consists of a single TypeScript module
([`frontend/entrypoint.tsx`](frontend/entrypoint.tsx)) containing the UI and
video call logic. Additionally, CSS styles are defined in
[`frontend/entrypoint.css`](frontend/entrypoint.css).
## Streaming video and audio
Establishing a video call happens in four steps:
First, a video stream for the current device is requested using the navigator
media API:
```ts
const ownMediaStream = await navigator.mediaDevices.getUserMedia({
video: true,
audio: true,
}).catch(console.error);
```
When the "Call" button is clicked, this media stream is sent to another endpoint
by calling `CallManager.call` on the remote endpoint:
```ts
await CallManager.call.to(remoteEndpoint.val)(ownMediaStream);
```
On the remote endpoint, inside the `CallManager.call` function, the passed media
stream is displayed in the remote video view:
```ts
remoteVideo.srcObject = mediaStream;
```
The remote endpoint also returns its own media stream from the
`CallManager.call` function, which is then again displayed in the local
endpoint's remote video view:
```ts
remoteVideo.srcObject = await CallManager.call.to(remoteEndpoint.val)(
ownMediaStream,
);
```
---
© unyt 2025 • [unyt.org](https://unyt.org)