webRtc之指定摄像头设备绿屏问题

摘要:最近发现,在使用navigator.mediaDevices.getUserMedia({ deviceId: 'xxx'}),指定设备的时候,video播放总是绿屏,发现关闭浏览器硬件加速不会出现,但显然这不是一个最好的方案;

播放后张这样
修复后
上代码

指定采集宽度高度后就不会出现这个绿屏问题

typescript 复制代码
// js
navigator.mediaDevices.getUserMedia({
	video: {
		deviceId: devId,
		// 指定采集尺寸
		width: { ideal: 1280 },
		height: { ideal: 720 },
	}
}).then((stream) => {
     const elm: HTMLVideoElement | any = document.getElementById('devDetectionVideoRef');
     if (elm) {
         elm.srcObject = stream;
     }
}).catch((error) => {
})
// html
<video id="devDetectionVideoRef" className={style.video_element}
	autoPlay
	playsInline
	webkit-playsinline='true'
></video>
// css
.video_element{
	width: 640px;
	height: 480px;
	background-color: #233149;
}
相关推荐
等风来不如迎风去2 天前
Jetson Xavier NX 与 NVIDIA RTX 4070 (12GB)
udp·webrtc·cmake·clion
Antonio9155 天前
【音视频】WebRTC 一对一通话 peerconnection_client 分析
音视频·webrtc
RTC老炮11 天前
webrtc弱网-QualityRampUpExperimentHelper类源码分析与算法原理
webrtc
RTC老炮14 天前
webrtc弱网-BandwidthQualityScaler 源码分析与算法原理
webrtc
lqg_zone17 天前
基于 Socket.IO 实现 WebRTC 音视频通话与实时聊天系统(Spring Boot 后端实现)
spring boot·音视频·webrtc
圆心角19 天前
webrtc的核心原理
前端·webrtc
Antonio91519 天前
【音视频】WebRTC 一对一通话-信令服
c++·websocket·音视频·webrtc
Antonio91519 天前
【音视频】WebRTC 一对一通话-Web端
前端·音视频·webrtc
DogDaoDao19 天前
WebRTC音视频编码模块深度解析:从编解码器到自适应码率控制(2025技术实践)
音视频·webrtc·实时音视频·视频编解码·h264·vp9·svc编码
Antonio91520 天前
【音视频】WebRTC 一对一通话-实现概述
音视频·webrtc