是否可以从 iOS 上的 inappbrowser/webview 访问相机答案

【问题标题】：Is it possible to access camera from inappbrowser/webview on iOS是否可以从 iOS 上的 inappbrowser/webview 访问相机
【发布时间】：2019-07-29 04:38:55
【问题描述】：

我已经尝试了所有可能的方法来访问科尔多瓦 webview 上的摄像头。

它适用于安卓，但不适用于 iOS。

谁能解释一下如何在iOS上通过cordova webview实现访问相机功能，谢谢。

Inappbrowser 端（Angular）

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      navigator.mediaDevices
        .getUserMedia({ video: { facingMode: 'environment' } })
        .then(stream => {
          // this.videoDom.srcObject = stream;
          this.videoDom.srcObject = stream;
          this.videoDom.setAttribute('playsinline', 'true');
          this.videoDom.play();

          this.stream = stream.getTracks();

          requestAnimationFrame(tick);
        })
}

科尔多瓦一侧

我已经安装了cordova-plugin-camera并在ios平台的config.xml中添加了权限。

【问题讨论】：

是的图像选择器和摄像头适用于 iOS 的 web 视图。您可能需要查看对 iOS 的 html 或 javascript 支持，或咨询任何 Web 前端开发人员
@AmberK 你能给我看一些解释代码吗？现在在 iOS 上，我的 cordova inappbrowser 无法访问相机。
你能给我们你用于Android的代码吗？
@EnzoBLANCHON 我有更新相机访问功能，请指导我。
Progressive Web App: Error Accessing navigator.mediaDevices.getUserMedia?的可能重复

标签： ios cordova

【解决方案1】：

在 iOS11/12 上，navigator.getMediaDevices 不适用于 WKWebView 和 UIWebView。它仅适用于 Safari。 (https://forums.developer.apple.com/thread/88052)

WebRTC 仅在 Safari 中受支持。没有 WKWebView，甚至没有 SFSafariViewController。

您可以尝试正常使用这个插件应该可以解决您的问题：https://github.com/phonegap/phonegap-plugin-media-stream

navigator.mediaDevices.getUserMedia({
    'audio': true,
    'video': {
        facingMode: 'environment'
    }
}).then(function(mediaStream) {
 // Do what you want with
}

【讨论】：

此插件会将功能添加到主 Cordova 应用程序 webview 但不会添加到 Inappbrowser Webview，因此navigator.mediaDevices 命名空间不会在加载到 inappbrowser 的页面中定义。

【解决方案2】：

我想到了一种 hacky 方法，您可以使用 cordova-plugin-inappbrowser 的新 postMessage API feature 在 iOS 上完成这项工作，这使您可以将加载到 Inappbrowser Webview 的页面中的消息发送回 Cordova 主应用程序 Webview。这在 npm (3.0.0) 上的最新版本中不存在，因此您需要直接从 Github 安装主版本 (3.1.0-dev)：

cordova plugin add https://github.com/apache/cordova-plugin-inappbrowser

在加载到 inappbrowser 的页面中，您可以将消息发回 Cordova 应用程序 webview：

function openCamera(){
    postMessage({
        action: "camera"
    });
}

function postMessage(message){
    if(!webkit.messageHandlers.cordova_iab) throw "Cordova IAB postMessage API not found!";
    webkit.messageHandlers.cordova_iab.postMessage(JSON.stringify(message));
}

<button onclick="openCamera()">Open camera<button>

在 Cordova 应用端，您可以收听该消息并做出响应：

var iab = cordova.InAppBrowser.open(myUrl, '_blank', iabOpts);

iab.addEventListener('message', function (e) {
    if(e.data.action === 'camera'){
        openCamera();
    }
});

function openCamera() {
    var animationDelay = 500; // delay to wait for camera window animation
    navigator.camera.getPicture(function(){
        log("successfully opened camera");
        if (device.platform === "iOS"){
            // unhide IAB
            iab.show();
        }
    }, function(cameraError){
        error("error opening camera: "+cameraError);
        if (device.platform === "iOS"){
            iab.show();
        }
    });
    if (device.platform === "iOS"){
        // hide IAB so camera window is in view
        setTimeout(iab.hide, animationDelay);
    }
}

这允许您从 inappbrowser 中直接调用 cordova-plugin-camera。

不过这很不方便，因为在 iOS 上，默认情况下，相机窗口将显示在视图层次结构中的 inappbrowser 窗口下方，因此不可见。我的技巧是在打开相机时隐藏 inappbrowser 窗口，这会导致相机窗口位于可见视图层次结构的顶部并被显示。但是，关闭相机窗口后，Cordova 应用程序窗口将短暂显示，而 inappbrowser 窗口正在以动画方式再次显示。

我在我的 inappbrowser 测试应用程序仓库中创建了一个测试用例示例：https://github.com/dpa99c/cordova-plugin-inappbrowser-test/tree/camera

你可以这样试试：

git clone -b camera https://github.com/dpa99c/cordova-plugin-inappbrowser-test
cd cordova-plugin-inappbrowser-test
cordova platform add ios
cordova run ios

【讨论】：

【解决方案3】：

还有一种更简单的方法，就是使用输入类型文件

这显示了用于拍照的相机

<input type="file" accept="image/*" capture>

这用于录制视频

<input type="file" accept="video/*" capture>

这将提示拍摄照片或视频，从照片库中选择或浏览文件

<input type="file">

还有其他几种组合。但它可能不适用于 Android

【讨论】：

【解决方案4】：