javascript - navigator.mediaDevices.getUserMedia在chrome获取视频流分辨率低(640*480),但是在Safari就是1280*720,是浏览器的问题吗?

Question

获取摄像头stream的分辨率谷歌浏览器分辨率一直是640480很模糊,切OBS则是1280720,在Safari摄像头stream则是正常的1280*720,电脑摄像头分辨率很高并不是摄像头的问题,请大佬们给点思路吧

navigator.mediaDevices.getUserMedia({  video: {    width: { ideal: 1280 },    height: { ideal: 720 }  }}).then(function(stream) {  const videoTrack = stream.getVideoTracks()[0];  const settings = videoTrack.getSettings();  console.log('Actual video resolution: ' + settings.width + 'x' + settings.height);}).catch(function(error) {  console.log("getUserMedia error: ", error);});

Answer 1

navigator.mediaDevices.getUserMedia({ video: true })

.then(function (stream) {    const track = stream.getVideoTracks()[0];    const capabilities = track.getCapabilities();    // 检查是否支持指定的分辨率    if (capabilities.width && capabilities.height) {        const constraints = {            width: { ideal: 1280 },            height: { ideal: 720 }        };        // 应用分辨率约束        track.applyConstraints(constraints)            .then(function () {                // 分辨率应用成功，可以继续处理视频流            })            .catch(function (error) {                console.error('Error applying constraints:', error);            });    } else {        console.error('Video track does not support setting custom resolutions.');    }}).catch(function (error) {    console.error('Error accessing user media:', error);});

这样能行么？

Answer 2

从你的描述来看，这是一个典型的在不同浏览器中获取 WebRTC 视频流分辨率的问题。你的代码已经足够正确，你正在使用 navigator.mediaDevices.getUserMedia() 方法来请求视频流，并设置理想的宽度和高度为 1280x720。然后你获取视频流并打印实际的分辨率。

这个问题可能是由于 Chrome 浏览器在处理 WebRTC 视频流时的默认行为导致的。Chrome 浏览器可能为了节省带宽和处理器资源，会降低默认的分辨率。

以下是一些可能的解决方案：

1. 使用 OBS 等软件进行分辨率调整：如果你可以在 OBS 等软件中手动调整分辨率，这可能是一个可行的解决方案。但是这需要用户手动操作，可能并不方便。
2. 使用适应不同浏览器的代码：你可以检查当前浏览器的名称或版本，并根据不同的浏览器使用不同的代码。例如，如果当前浏览器是 Chrome，你可以请求更低的分辨率。如果当前浏览器是 Safari，你可以请求更高的分辨率。但是这可能会使你的代码变得复杂且难以维护。
3. 使用第三方库：有一些第三方库（如 SimplePeer.js）可能可以帮助你更好地控制 WebRTC 视频流的分辨率。但是这可能会增加你的代码的复杂性。
4. 更新浏览器：如果你的用户使用的 Chrome 浏览器版本较老，那么更新到新版本可能会解决这个问题。因为随着时间的推移，浏览器可能会改进对 WebRTC 的支持。
5. 检查设备的摄像头和硬件：如果设备有多个摄像头或硬件问题可能导致这个问题，你可能需要检查并更新摄像头驱动或硬件设备。
6. 在服务器端进行分辨率调整：如果你的应用有服务器端，你可以在服务器端获取视频流，然后进行分辨率调整。但是这可能会增加你的服务器的负载。

总的来说，这个问题可能涉及到多个因素，需要你根据实际情况选择最合适的解决方案。