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;
}
相关推荐
RTC老炮4 小时前
webrtc弱网-QualityScaler 源码分析与算法原理
人工智能·算法·webrtc
亲爱的非洲野猪21 小时前
实时语音流分段识别技术解析:基于WebRTC VAD的智能分割策略
webrtc
TransPlus2 天前
WebRTC 多媒体 SDP 示例与解析
webrtc
Antonio9154 天前
【音视频】WebRTC 开发环境搭建-Web端
前端·webrtc
Antonio9154 天前
【音视频】WebRTC-Web 音视频采集与播放
前端·音视频·webrtc
DogDaoDao4 天前
WebRTC 2025全解析:从技术原理到商业落地
音视频·webrtc·实时音视频·p2p·流媒体·编解码
却道天凉_好个秋5 天前
WebRTC(十四):WebRTC源码编译与管理
webrtc
肥or胖8 天前
【音视频协议篇】WebRTC 快速入门
ffmpeg·音视频·webrtc
守城小轩8 天前
WebRTC指纹识别——未来展望(下篇)
chrome·webrtc·chrome devtools·指纹浏览器·浏览器开发
守城小轩8 天前
WebRTC指纹——技术背景(上篇)
webrtc·chrome devtools·指纹浏览器·浏览器开发·超级浏览器