ryuujo1573 / qnweb-rtc-demo

QNWebRTC Demo

Configuration

Use pnpm (suggested).

pnpm env use --global lts # 18.14.0
pnpm i
pnpm dev

For Windows, set the shell to git bash.

pnpm config set script-shell "C:\\Program Files\\Git\\bin\\bash.exe"

qnweb-rtc-demo's Issues

直接 as const 是不是就好，satisfies 感觉没必要？

qnweb-rtc-demo/src/features/settingSlice.ts

Line 55 in 86beb8f

} as const satisfies Partial<Record<keyof Settings, string>>

[Layout] support mobile layout

[UX] provide better error reports

'哞' 修改为 ' 抱歉'

qnweb-rtc-demo/src/pages/error.tsx

Lines 9 to 10 in 2416bc7

	<Typography variant="h4">哞!</Typography>
	<Typography variant="body1">发生了预期之外的错误。</Typography>

[Feature] 无权限创建失败时缺少提示

icon 可以考虑改成 https://qiniu.staticfile.org/favicon.ico

qnweb-rtc-demo/index.html

Line 6 in 86beb8f

<link rel="icon" type="image/svg+xml" href="/vite.svg" />

如果作用很是很大的话是不是可以考虑去掉。

qnweb-rtc-demo/src/pages/layout.tsx

Lines 192 to 207 in 2416bc7

	<SectionFragment
	title="视频"
	// TODO: 支持切换清晰度、默认开启音视频
	>
	<VideoPreview />
	<ToggleButton
	value={true}
	selected={mirror}
	onChange={() => {
	dispatch(toggleMirror(!mirror))
	}}
	>
	<FlipRounded />
	</ToggleButton>
	</SectionFragment>
	<SectionFragment title="测试"></SectionFragment>

[style] unify naming conventions

qnweb-rtc-demo/src/components/DetailPanel.tsx

Line 106 in 2416bc7

const trackName = t.tag ?? `未知${t.isAudio() ? '音频' : '视频'}轨道`

[ScreenShare] Mobile not working

[UserBox] display multiple `VideoBox` properly

[Style] 浏览器自动填充字段的默认样式需要修改

[CI] 公网测试环境使用 development build

[Bug] [RTC] 连接过程中预期之外地调用了第二次 `createOffer`

[Messenger] better message indicator

[Streaming] support composed track & switch mode

[P3] Safari 16611 on Big Sur 11.2 环境下 Router Outlet 不显示

[Bug] `userId` 为空时访问 `/#/room/:roomName` 页面空白

[Bug] 连续点击(音)视频开关，会出现发布muted的轨道的情况

当前 track 生命周期

1. 创建：按需创建
2. 发布：即时发布
3. 取消发布：由用户关闭媒体触发
4. 销毁：即时销毁

用户对媒体设备的开关操作发生在2～3之间时，先setMute（设备捕获on，媒体传输off），经过防抖时间（预设500ms）后对媒体 track 进行取消发布。

优化后预期表现

用户连续点击视频的开关，可以实现视频从画面到黑幕的快速切换（setMute 的效果），并在停止连续点击时，根据当前状态决定是否取消发布

重置方法没有事件绑定。

qnweb-rtc-demo/src/components/StreamPanel.tsx

Lines 264 to 271 in 2416bc7

	<Button
	variant="outlined"
	disabled
	startIcon={<RestartAltRounded />}
	// WIP
	>
	重置
	</Button>

是否可以通过 QNRTC 回调判断状态

qnweb-rtc-demo/src/api.ts

Line 23 in 86beb8f

navigator.mediaDevices.ondevicechange = check

接口地址：https://developer.qiniu.com/rtc/9070/WebQNRTC#onCameraChanged
可以直接通过回调来实时更新设备列表，而不是通过 devicechange 来全局获取设备然后分类？

改为 `七牛 RTN Web Demo`

qnweb-rtc-demo/index.html

Line 10 in 86beb8f

<title>SDK Demo</title>

老版本忘记改了。现在 appid 应该调整为 g2m0ya7w7

qnweb-rtc-demo/src/features/settingSlice.ts

Line 28 in 2416bc7

appId: localStorage.getItem('app-id') ?? 'd8lk7l4ed', // demo only

[style] remove unused code in `api.ts`

• 使用 QNRTC 替换 api 是不是更有语意些
• 不用的注释最好删除

qnweb-rtc-demo/src/api.ts

Line 1 in 2416bc7

import api from 'qnweb-rtc'

[UX] support screen-share preview

是否可以使用 cross-env 来解决 window 平台的问题

qnweb-rtc-demo/package.json

Lines 8 to 10 in 7657acc

	"dev": "VITE_APP_BUILD_TIME=$(date +%s) VITE_APP_LATEST_COMMIT_HASH=$(git rev-parse --short HEAD) vite",
	"build": "VITE_APP_BUILD_TIME=$(date +%s) VITE_APP_LATEST_COMMIT_HASH=$(git rev-parse --short HEAD) tsc && vite build",
	"preview": "VITE_APP_BUILD_TIME=$(date +%s) VITE_APP_LATEST_COMMIT_HASH=$(git rev-parse --short HEAD) vite preview"

[UI] 手机布局下，底部工具栏隐藏倒计时不会刷新

• 在点击或按下等交互发生的时候刷新隐藏倒计时；
• 在底部工具栏中触发pop-up时保持显示；