如何在 iOS 版 Chrome 中使用 getUserMedia

Posted 2023-02-23

【中文标题】如何在 iOS 版 Chrome 中使用 getUserMedia

【英文标题】：How to use getUserMedia in Chrome for iOS

【发布时间】：2015-03-20 06:38:46

【问题描述】：

我正在开发一个简单的应用程序，在此我尝试使用getUserMedia 访问摄像头和麦克风。它在桌面 Chrome 和 android Chrome 中对我来说工作正常，但在 iPhone 和 iPad Chrome 中不起作用。

navigator.getUserMedia = navigator.getUserMedia
        || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
var constraints = "";
if (mediaType === "audio,video") 
    constraints = 
        audio : true,
        video : true
    ;
 else 
    constraints = 
        audio : true,
        video : false
    ;

navigator.getUserMedia(constraints, successCallback, errorCallback);

【问题讨论】：

请澄清：您是在编写 Chrome 应用程序并使用移动 Chrome 应用程序工具链部署它，还是在构建网络应用程序？在后一种情况下，请将标签修复为google-chrome

我正在构建网络应用程序..

【参考方案1】：

...但它不适用于 iPhone 和 iPad Chrome。

您 iPhone 或 iPad 上的 chrome 应用未运行“完整”版的 chrome。它的功能仅限于 ios 平台。所以getUserMedia 之类的东西可能要到Safari/Apple supports it 才能使用。

Quoting from another question:

Apple 政策强制其他浏览器使用其不支持 webRTC 的 webkit 版本，因此您将很快不会在 iOS 上的 web 应用程序中获得 webRTC 支持。 webkit 中的 Activity 暗示了一种变化，但要实现这一点，需要几个月的时间。

【参考方案2】：

由于不推荐使用“navigator.getUserMedia”，您应该使用“navigator.mediaDevices.getUserMedia”。 这似乎（仍然）是一个问题。只要您在 Safari 中使用它，iOS 11.4 上的相机访问就可以正常工作。如果您想在任何其他浏览器（Chrome、Firefox）中使用它，则不受支持。这是一个您可以尝试的示例：

            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) 
                var constraints = 
                    audio: true,
                    video: true
                ;

                navigator.mediaDevices.getUserMedia(constraints)
                    .then(function(stream) 
                        var video = document.querySelector('video');
                        video.srcObject = stream;
                        video.onloadedmetadata = function(e) 
                            video.play();
                        ;
                    )
                    .catch(function(err) 
                        console.log (err);
                    );
            
            else 
                console.log ("navigator.mediaDevices not supported")
            

<video id="video" width="200" height="200" autoplay playsinline></video>

此代码在 Safari 中的任何桌面设备、Android 移动设备和 iPhone 移动设备上都能正常工作，但在 Chrome/Firefox 中却不行：将立即跳转到 else case：“navigator.mediaDevices not supported”

由于 iOS 11.x 支持 WebRTC，我不确定现在问题出在哪里：Apple 还是 Google/Mozilla？此外，如果有任何其他可行的解决方案，我很高兴听到。

【讨论】：

2020 年 4 月，iOS Chrome 上仍然存在同样的问题 - 这方面有什么消息吗？

播放任何解决方案时出现黑屏？

2020 年 6 月，仍然不支持 Chrome for IOS。由于新的苹果开发者论坛已开放搜索结果。 developer.apple.com/forums/search/?q=getUserMedia%20Chrome-iOS 正在发生很多事情。

【参考方案3】：

我的理解（我是一名 Mozilla 工程师）是目前 iOS 上的 Chrome 不支持 webrtc 或 getUserMedia。

【参考方案4】：

从 iOS 14 开始，这种情况发生了变化。现在 WKWebView 增加了对 getUserMedia 的支持。 @Marcus 在这里解释得很好：https://***.com/a/63092094/6931862

TLDR;

WKWebView 可以在 iOS 14.3 beta 1 中使用 getUserMedia。

https://bugs.webkit.org/show_bug.cgi?id=208667 https://bugs.chromium.org/p/chromium/issues/detail?id=752458

【参考方案5】：

更新：我知道这是一个非常古老的线程，但从 IOS 11.4 beta 开始，

getUserMedia 受支持，但在 PWA（又名独立又支持移动 Web 应用程序）应用程序中不支持 2 FFTSize 现在对于分析器节点高达 32768 但是，似乎无法将原始实时音频馈送到分析器节点（因此大致上半部分频率在进入 FFT 节点时被大大衰减，而忘记安装您的拥有 FFT，因为它不会比 GIGO 做得更好） 最新的桌面 Safari 似乎是 11.1，而且情况更糟，因为 FFTSize 达到了 2048 的上限，而且您仍然无法获得原始音频源。

我一直希望！

【讨论】：

所以它不支持任何 chrome iphone，有什么解决方法吗？

【参考方案6】：

WebRTC（包括 getUserMedia）适用于 iOS11，但将使用 h264/h265 编解码器，即没有 VP8/VP9。