Skip to content

Commit

Permalink
Merge pull request #3 from canwdev/dev-kvm
Browse files Browse the repository at this point in the history
optimize ui
  • Loading branch information
canwdev authored Dec 27, 2024
2 parents 71967d9 + 4166b7d commit 75004f7
Show file tree
Hide file tree
Showing 21 changed files with 835 additions and 335 deletions.
8 changes: 4 additions & 4 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
root: true,
'extends': [
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-typescript',
'@vue/eslint-config-prettier'
'@vue/eslint-config-prettier',
],
parserOptions: {
ecmaVersion: 'latest'
}
ecmaVersion: 'latest',
},
}
51 changes: 51 additions & 0 deletions README-en.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
## Web MediaDevices Player

A web application for playing system [video/audio] input devices using the [Media Capture and Streams API](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) technology.

- Web version: https://canwdev.github.io/web-mediadevices-player/
- Tauri packaged client: [Releases](https://github.com/canwdev/web-mediadevices-player/releases)
- [Chinese Readme](./README.md)

Main purposes:
- View HDMI to USB capture card
- Play webcam videos, desktop screen recording
- Capture screenshots and record in webm format
- v1.1.5 New features
- [CH9329](https://one-kvm.mofeng.run/ch9329_hid/) KVM keyboard and mouse control, ref: [webusbkvm](https://github.com/kkocdko/kblog/blob/master/source/toys/webusbkvm/README.md)
- Supports relative mouse, absolute mouse, hotkeys, and ASCII text sending.
- Video screen QR code scanning

![screenshot](docs/screenshot-2.jpg)
![screenshot](docs/screenshot-3.jpg)
![screenshot](docs/screenshot.png)

Tips:
- The first time you use it, it will request camera and microphone permissions. You can reject microphone permissions if not needed. After requesting, it will wait a few seconds to load the devices.
- This page must run in https or localhost environments. Other environments (such as: filesystem) do not have access to devices.
- There may be issues with dragging the progress bar of the recorded webm video. Manually transcoding it to mp4 can solve the problem.

## Development

> Contributions are welcome
```sh
# Install dependencies
yarn install

# Development mode
yarn dev

# Build the Web version
yarn build

# Build Tauri App
yarn build:tauri
```

---

## Star History

- Thanks for your stars https://www.ruanyifeng.com/blog/2024/06/weekly-issue-303.html

[![Star History Chart](https://api.star-history.com/svg?repos=canwdev/web-mediadevices-player&type=Date)](https://star-history.com/#canwdev/web-mediadevices-player&Date)
51 changes: 7 additions & 44 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

- 网页版:https://canwdev.github.io/web-mediadevices-player/
- Tauri 打包的客户端:[Releases](https://github.com/canwdev/web-mediadevices-player/releases)
- [English Readme](https://github.com/canwdev/web-mediadevices-player/tree/master?tab=readme-ov-file#english)
- [English Readme](./README-en.md)

主要用途:
- HDMI to USB 采集卡查看
Expand All @@ -15,9 +15,9 @@
- 支持相对鼠标、绝对鼠标、快捷键、ASCII文本发送
- 视频画面二维码扫描

![screenshot](screenshot-2.jpg)
![screenshot](screenshot-3.jpg)
![screenshot](screenshot.png)
![screenshot](docs/screenshot-2.jpg)
![screenshot](docs/screenshot-3.jpg)
![screenshot](docs/screenshot.png)

提示:
- 首次使用会请求摄像头和麦克风权限,如果不需要麦克风权限可以拒绝,请求过后会等待几秒钟加载设备。
Expand Down Expand Up @@ -46,45 +46,8 @@ yarn build:tauri

---

## English
## Star History

A web application for playing system [video/audio] input devices using the [Media Capture and Streams API](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) technology.
- Thanks for your stars https://www.ruanyifeng.com/blog/2024/06/weekly-issue-303.html

- Web version: https://canwdev.github.io/web-mediadevices-player/
- Tauri packaged client: [Releases](https://github.com/canwdev/web-mediadevices-player/releases)

Main purposes:
- View HDMI to USB capture card
- Play webcam videos, desktop screen recording
- Capture screenshots and record in webm format
- v1.1.5 New features
- [CH9329](https://one-kvm.mofeng.run/ch9329_hid/) KVM keyboard and mouse control, ref: [webusbkvm](https://github.com/kkocdko/kblog/blob/master/source/toys/webusbkvm/README.md)
- Supports relative mouse, absolute mouse, hotkeys, and ASCII text sending.
- Video screen QR code scanning

![screenshot](screenshot-2.jpg)
![screenshot](screenshot-3.jpg)
![screenshot](screenshot.png)

Tips:
- The first time you use it, it will request camera and microphone permissions. You can reject microphone permissions if not needed. After requesting, it will wait a few seconds to load the devices.
- This page must run in https or localhost environments. Other environments (such as: filesystem) do not have access to devices.
- There may be issues with dragging the progress bar of the recorded webm video. Manually transcoding it to mp4 can solve the problem.

## Development

> Contributions are welcome
```sh
# Install dependencies
yarn install

# Development mode
yarn dev

# Build the Web version
yarn build

# Build Tauri App
yarn build:tauri
```
[![Star History Chart](https://api.star-history.com/svg?repos=canwdev/web-mediadevices-player&type=Date)](https://star-history.com/#canwdev/web-mediadevices-player&Date)
File renamed without changes
File renamed without changes
File renamed without changes
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "web-mediadevices-player",
"version": "1.1.5",
"version": "1.1.6",
"private": true,
"type": "module",
"scripts": {
Expand All @@ -15,6 +15,7 @@
"build:tauri": "tauri build"
},
"dependencies": {
"@mdi/font": "^7.4.47",
"@tauri-apps/api": "^1.5.3",
"@vueuse/core": "^10.10.0",
"jsqr": "^1.4.0",
Expand Down
2 changes: 1 addition & 1 deletion src-tauri/tauri.conf.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
},
"package": {
"productName": "web-mediadevices-player",
"version": "1.1.5"
"version": "1.1.6"
},
"tauri": {
"allowlist": {
Expand Down
14 changes: 14 additions & 0 deletions src/assets/common.scss
Original file line number Diff line number Diff line change
Expand Up @@ -164,3 +164,17 @@
.fadeMove-leave-active {
position: absolute;
}


// animation: linear blink-animation 3s infinite;
@keyframes blink-animation {
0% {
opacity: 0.5;
}
50% {
opacity: 1;
}
100% {
opacity: 0.5;
}
}
Loading

0 comments on commit 75004f7

Please sign in to comment.