Camera组件因改严格模式，页面statechange会导致画面闪烁，添加设备ID缓存，只有真正修改设备才执行重置操作#8261
Closed
kkxkx wants to merge 5 commits into
Closed
Camera组件因改严格模式，页面statechange会导致画面闪烁，添加设备ID缓存，只有真正修改设备才执行重置操作#8261kkxkx wants to merge 5 commits into
kkxkx wants to merge 5 commits into
Conversation
修改了Camera组件在Edge浏览器不能切换多个摄像头画面的问题deviceId: { exact: deviceId }，严格匹配模式
Signed-off-by: kkxkx <63846879+kkxkx@users.noreply.github.com>
增加设备ID缓存，解决因严格模式ID改变 重启启停硬件导致UI闪屏问题 Signed-off-by: kkxkx <63846879+kkxkx@users.noreply.github.com>
Contributor
Reviewer's GuideCamera component JS logic is refactored to avoid unnecessary device resets on state changes by caching the last-used device ID, making play/update async, and only reopening the media stream when the device actually changes. Sequence diagram for updated Camera update/play device-switch logicsequenceDiagram
actor Page
participant CameraJS as CameraJS
participant MediaDevices as navigator.mediaDevices
participant VideoElement as video_element
participant DotNetInvoker as invoke
Page->>CameraJS: update(id)
CameraJS->>CameraJS: Data.get(id)
CameraJS->>CameraJS: domDeviceId = el.getAttribute(data-device-id)
CameraJS-->>Page: [if lastUsedDeviceId === domDeviceId] return
alt camera.video exists
CameraJS->>CameraJS: stopDevice(camera)
CameraJS->>CameraJS: setTimeout(350ms)
CameraJS->>CameraJS: openDevice(camera)
CameraJS->>MediaDevices: getUserMedia(constrains)
MediaDevices-->>CameraJS: stream
CameraJS->>VideoElement: srcObject = stream
CameraJS->>VideoElement: play()
VideoElement-->>CameraJS: playback_started
CameraJS->>CameraJS: lastUsedDeviceId = option.video.deviceId
CameraJS->>DotNetInvoker: TriggerOpen()
else camera.video does not exist
CameraJS->>CameraJS: autoStart = el.getAttribute(data-auto-start)
CameraJS-->>Page: [if !autoStart] return
CameraJS->>CameraJS: openDevice(camera)
CameraJS->>MediaDevices: getUserMedia(constrains)
MediaDevices-->>CameraJS: stream
CameraJS->>VideoElement: srcObject = stream
CameraJS->>VideoElement: play()
VideoElement-->>CameraJS: playback_started
CameraJS->>CameraJS: lastUsedDeviceId = option.video.deviceId
CameraJS->>DotNetInvoker: TriggerOpen()
end
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Hey - I've found 1 issue, and left some high level feedback:
- In
play, accessingoption.video.deviceIdandoption.video.deviceId.exactwithout guarding can throw ifoption.videooroption.video.deviceIdis missing; consider defaulting or short‑circuiting before using those properties. - The 350ms delay between
stopDeviceandopenDeviceinupdateis a magic number; consider extracting it into a named constant or tying it to documented behavior so future changes don’t inadvertently break the sequencing assumptions.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- In `play`, accessing `option.video.deviceId` and `option.video.deviceId.exact` without guarding can throw if `option.video` or `option.video.deviceId` is missing; consider defaulting or short‑circuiting before using those properties.
- The 350ms delay between `stopDevice` and `openDevice` in `update` is a magic number; consider extracting it into a named constant or tying it to documented behavior so future changes don’t inadvertently break the sequencing assumptions.
## Individual Comments
### Comment 1
<location path="src/BootstrapBlazor/Components/Camera/Camera.razor.js" line_range="82" />
<code_context>
- }
- else {
+ stopDevice(camera)
+ await new Promise(r => setTimeout(r, 350));
+ await openDevice(camera)
+ } else {
</code_context>
<issue_to_address>
**suggestion:** Consider extracting the 350ms delay into a named constant or configuration.
This hard-coded timeout is a magic number and likely tied to hardware or UX behavior. Defining it as a shared constant (e.g., `DEVICE_SWITCH_DELAY_MS`) makes its intent clear and ensures any future adjustments stay consistent across the codebase.
Suggested implementation:
```javascript
stopDevice(camera)
await new Promise(r => setTimeout(r, DEVICE_SWITCH_DELAY_MS));
await openDevice(camera)
```
To fully implement this change, also:
1. Define a named constant near the top of `Camera.razor.js`, for example:
`const DEVICE_SWITCH_DELAY_MS = 350;`
2. If there is an existing configuration or constants section in this file or a related module, prefer adding `DEVICE_SWITCH_DELAY_MS` there to keep all such values centralized.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
| } | ||
| else { | ||
| stopDevice(camera) | ||
| await new Promise(r => setTimeout(r, 350)); |
Contributor
There was a problem hiding this comment.
suggestion: Consider extracting the 350ms delay into a named constant or configuration.
This hard-coded timeout is a magic number and likely tied to hardware or UX behavior. Defining it as a shared constant (e.g., DEVICE_SWITCH_DELAY_MS) makes its intent clear and ensures any future adjustments stay consistent across the codebase.
Suggested implementation:
stopDevice(camera)
await new Promise(r => setTimeout(r, DEVICE_SWITCH_DELAY_MS));
await openDevice(camera)To fully implement this change, also:
- Define a named constant near the top of
Camera.razor.js, for example:
const DEVICE_SWITCH_DELAY_MS = 350; - If there is an existing configuration or constants section in this file or a related module, prefer adding
DEVICE_SWITCH_DELAY_MSthere to keep all such values centralized.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8261 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 769 769
Lines 34436 34436
=========================================
Hits 34436 34436
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Camera组件因改严格模式，页面statechange会导致画面闪烁，添加设备ID缓存，只有真正修改设备才执行重置操作
Summary by Sourcery
Prevent unnecessary camera device resets on state changes by caching the active device ID and only restarting the hardware when the selected device actually changes.
Enhancements: