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

时间:2019-03-07 10:19:18

标签: ios cordova

我尝试了所有可能的方法来访问Cordova上的Webview上的摄像机。

它可以在android上运行,但不能在iOS上运行。

有人可以解释一下如何通过iOS上的cordova Webview实现访问摄像头功能。

  

浏览器端(角形)

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中添加了权限。

3 个答案:

答案 0 :(得分:0)

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

  

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

您可以尝试正常使用此插件,以解决您的问题:https://github.com/phonegap/phonegap-plugin-media-stream

export class SocketSessionService {
    sockets = Server.socketio().sockets;
    arrayOfActiveSessions: NewChatSessionModel[];

    socketChatService: SocketChatService;

    //temp
    sessionId: string;

    constructor(aSocket: SocketIO.Socket) {
        this.socketChatService = new SocketChatService(aSocket);

        this.arrayOfActiveSessions = [];
        this.handleAllNewSessionEmits(aSocket)
    }

    /** Handles all incomming session emits  
    */
    handleAllNewSessionEmits(aSocket: SocketIO.Socket) {
        aSocket.on('newChatSession', async (data) => {
            this.handleNewChatSession(aSocket, data)
        })
    }

答案 1 :(得分:0)

我想到了一种怪诞的方式,您可以通过使用SELECT pt.* FROM person_table pt WHERE STR_TO_DATE(LEFT(ID, 6), '%d%m%y') > curdate() - interval 16 year AND STR_TO_DATE(LEFT(ID, 6), '%d%m%y') <= curdate() - interval 5 year; 中新的postMessage API feature在iOS上实现此功能,使您能够将加载到Inappbrowser Webview中的页面中的消息发送回主窗口。 Cordova应用程序Webview。 npm(cordova-plugin-inappbrowser)的最新版本中没有此功能,因此您需要直接从Github安装主版本(3.0.0):

3.1.0-dev

然后在加载到内置浏览器的页面中,您可以将消息发布回Cordova应用程序的Webview:

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

在Cordova应用程序端,您可以侦听该消息并作出响应:

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>

这使您可以从浏览器内部直接调用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); } }

但是它很hacky,因为在iOS上,默认情况下,“相机”窗口将显示在视图层次结构中的“ inappbrowser”窗口下方,因此不可见。 我的破解方法是在打开相机后隐藏浏览器窗口,这会使相机窗口位于可见视图层次结构的顶部并显示出来。 但是,关闭摄影机窗口后,将在对内置浏览器窗口进行动画制作以再次显示时短暂显示Cordova应用程序窗口。

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

您可以这样尝试:

cordova-plugin-camera

答案 2 :(得分:0)

这是以下各项的重复:NotReadableError: Could not start source(请阅读此链接,因为它与Cordova和getUserMedia有关),并且可能还有Progressive Web App: Error Accessing navigator.mediaDevices.getUserMedia?

iOS 13和Safari 13上的Safari进行了更改:https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes

SFSafariViewController已获得getUserMedia功能(!!!)

https://bugs.webkit.org/show_bug.cgi?id=183201

但是WKWebView似乎没有获得getUserMedia功能(这可能是一个错误,请密切注意webkit链接):

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

iOS 13和Safari 13发行说明:

https://developer.apple.com/documentation/ios_ipados_release_notes/ios_13_release_notes https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes