我有一个React应用程序,记录用户的网络摄像头,我正在实现一个功能,允许用户改变视频分辨率。当我第一次通过默认视频的宽度和高度创建Media Stream
时,它工作得很好,但是当我改变分辨率时,什么都没有发生,我仍然能够记录网络摄像头,但分辨率没有改变。下面的代码用于获取Media Stream
,width
和height
变量可以是1280x720
或640x360
。上面提到的默认值是1280x720
,我不能在创建流后将其更改为640x360
,如果我使用640x360
创建流,它可以工作。
const stream = await navigator.mediaDevices.getUserMedia({
video: {
width: {
ideal: width
},
height: {
ideal: height
},
frameRate: 25,
deviceId: { exact: videoInputId || cameraDeviceId },
aspectRatio: {
exact: width / height,
},
},
audio: audio,
});
cameraVideoRef.current.srcObject = stream;
setCameraStream(stream);
您需要在新的约束下再次调用getUsermedia()
,以从浏览器的相机获得具有新分辨率的新stream
对象。为了获得最佳效果,首先关闭旧的流对象,停止它的所有轨道。