|
|
|
|
@ -623,7 +623,6 @@ export default { |
|
|
|
|
|
|
|
|
|
// ==================== 【4】采集卡设备 ==================== |
|
|
|
|
async switchCaptureCard(deviceId) { |
|
|
|
|
// 1. 彻底清理旧资源(防止残留) |
|
|
|
|
if (this.captureCheckTimer) clearTimeout(this.captureCheckTimer); |
|
|
|
|
this.closeCaptureCard(); |
|
|
|
|
|
|
|
|
|
@ -637,8 +636,6 @@ export default { |
|
|
|
|
await this.$nextTick(); |
|
|
|
|
const videoEl = this.$refs.shareVideo; |
|
|
|
|
|
|
|
|
|
// 2. 强制重置 Video 标签状态(防止 CSS 缓存黑屏) |
|
|
|
|
// 强制重置 Video 标签状态 |
|
|
|
|
if (videoEl) { |
|
|
|
|
videoEl.srcObject = null; |
|
|
|
|
videoEl.load(); |
|
|
|
|
@ -646,51 +643,38 @@ export default { |
|
|
|
|
videoEl.style.height = "100%"; |
|
|
|
|
videoEl.style.objectFit = "contain"; |
|
|
|
|
videoEl.style.background = "#000"; |
|
|
|
|
videoEl.muted = false; // ✅ 允许播放声音 |
|
|
|
|
videoEl.muted = false; |
|
|
|
|
videoEl.volume = 1; // ✅ 强制音量 |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
try { |
|
|
|
|
console.log("正在执行最终修复方案:强制30帧 + 无分辨率限制..."); |
|
|
|
|
|
|
|
|
|
// 3. 发起请求(核心修改点) |
|
|
|
|
const stream = await navigator.mediaDevices.getUserMedia({ |
|
|
|
|
video: { |
|
|
|
|
deviceId: { exact: deviceId }, |
|
|
|
|
// 核心修复 A:强制帧率 30,这是绿联 USB 2.0 采集卡的“生命线” |
|
|
|
|
frameRate: { exact: 30 }, |
|
|
|
|
// 核心修复 B:强制 MJPEG,绕过 USB 2.0 带宽瓶颈 |
|
|
|
|
advanced: [{ chromegfx: "mjpeg" }], |
|
|
|
|
// 注意:这里绝对不要写 width/height,让它默认输出 640x480 |
|
|
|
|
}, |
|
|
|
|
audio: true, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
console.log( |
|
|
|
|
"采集成功!实际设置:", |
|
|
|
|
stream.getVideoTracks()[0].getSettings() |
|
|
|
|
); |
|
|
|
|
// ✅ 强制开启音频 |
|
|
|
|
stream.getAudioTracks().forEach((track) => (track.enabled = true)); |
|
|
|
|
|
|
|
|
|
// 4. 绑定流 |
|
|
|
|
if (videoEl) { |
|
|
|
|
videoEl.srcObject = stream; |
|
|
|
|
|
|
|
|
|
// 核心修复 C:确保播放 |
|
|
|
|
const playPromise = videoEl.play(); |
|
|
|
|
if (playPromise !== undefined) { |
|
|
|
|
playPromise |
|
|
|
|
.then(() => { |
|
|
|
|
console.log("视频播放已成功启动"); |
|
|
|
|
this.$message.success("采集卡已连接 (强制30帧/MJPEG)"); |
|
|
|
|
console.log("采集卡音视频播放成功"); |
|
|
|
|
this.$message.success("采集卡已连接(带声音)"); |
|
|
|
|
}) |
|
|
|
|
.catch((error) => { |
|
|
|
|
console.error("自动播放被拦截:", error); |
|
|
|
|
this.$message.error("播放被拦截,请尝试点击页面任意位置"); |
|
|
|
|
}); |
|
|
|
|
.catch((err) => {}); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} catch (err) { |
|
|
|
|
console.error("最终方案失败:", err); |
|
|
|
|
this.$message.error("连接失败: " + err.message); |
|
|
|
|
console.error("采集卡失败", err); |
|
|
|
|
this.$message.error("采集卡失败:" + err.message); |
|
|
|
|
this.isSharing = false; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|