在wkwebview中启用摄像头和麦克风访问 [英] Enable Camera and Mic access in wkwebview

问题描述

我有一个针对移动设备进行了优化的Web应用程序，该应用程序使用getUserMedia访问网络摄像头和麦克风资源.

I have a mobile-optimized web app that makes use of getUserMedia to access webcam and mic resources.

我要将这个应用程序包装在WKWebView中，因为我想提供本机应用程序体验.我知道iOS不允许通过浏览器访问相机-但是，有任何方法可以通过本机代码(以及包装程序)获得对网络摄像头/麦克风的许可，并将其馈送到网络应用程序-也许是通过某种方式指向到本地流源?

I'm wrapping this app in a WKWebView as I want to offer a native app experience. I'm aware that iOS doesn't allow camera access via browsers - however is there any way to gain permissions to the webcam/mic with native code (alongside the wrapper) and feed this to the web app - perhaps by somehow pointing getUserMedia to a local stream source?

推荐答案

是的，看看 cordova-plugin-iosrtc 和 cordova-plugin-wkwebview-engine .插件背后的想法如下:

Yes, take a look at cordova-plugin-iosrtc and cordova-plugin-wkwebview-engine. The idea behind the plugin is as follows:

1..创建一个定义各种WebRTC类和函数的JavaScript文件(WebRTC.js)，并将调用传递给WKWebView，例如:

1. Create a JavaScript file (WebRTC.js) that defines the various WebRTC classes and functions, and passes the calls to the WKWebView, for example:

(function() {
  if (!window.navigator) window.navigator = {};
  window.navigator.getUserMedia = function() {
    webkit.messageHandlers.callbackHandler.postMessage(arguments);
  }
})();

2..在WKWebView中，在文档开始处插入脚本:

2. In the WKWebView, inject the script at the document start:

let contentController = WKUserContentController();
contentController.add(self, name: "callbackHandler")

let script = try! String(contentsOf: Bundle.main.url(forResource: "WebRTC", withExtension: "js")!, encoding: String.Encoding.utf8)
contentController.addUserScript(WKUserScript(source: script, injectionTime: WKUserScriptInjectionTime.atDocumentStart, forMainFrameOnly: true))

let config = WKWebViewConfiguration()
config.userContentController = contentController

webView = WKWebView(frame: CGRect.zero, configuration: config)

3..侦听从JavaScript发送的消息:

3. Listen for messages sent from the JavaScript:

class ViewController: UIViewController, WKUIDelegate, WKNavigationDelegate, WKScriptMessageHandler {
  var webView: WKWebView!

  func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    if message.name == "callbackHandler" {
      print(message.body)
      // make native calls to the WebRTC framework here
    }
  }
}

4..如果需要在JavaScript区域内执行成功或失败回调，请直接在WKWebView中评估函数调用:

4. If success or failure callbacks need to be performed back in JavaScript-land, evaluate the function call directly within the WKWebView:

webView.evaluateJavaScript("callback({id: \(id), status: 'success', args: ...})", completionHandler: nil)

在调用postMessage之前，这些回调必须存储在JavaScript 中的哈希中，然后必须将哈希密钥发送到WKWebView.这是插件中的commandId.

These callbacks need to be stored in a hash in the JavaScript before calling postMessage, then the hash key must be sent to the WKWebView. This is the commandId in the plugins.

int exec_id = 0;
function exec(success, failure, ...) {
  // store the callbacks for later
  if (typeof success == 'function' || typeof failure == 'function') {
    exec_id++;
    exec_callbacks[exec_id] = { success: success, failure: failure };
    var commandId = exec_id;
  }
  webkit.messageHandlers.callbackHandler.postMessage({id: commandId, args: ...})
}

// the native code calls this directly with the same commandId, so the callbacks can be performed and released
function callback(opts) {
  if (opts.status == "success") {
    if (typeof exec_callbacks[opts.id].success == 'function') exec_callbacks[opts.id].success(opts.args);
  } else {
    if (typeof exec_callbacks[opts.id].failure == 'function') exec_callbacks[opts.id].failure(opts.args);
  }
  // some WebRTC functions invoke the callbacks multiple times
  // the native Cordova plugin uses setKeepCallbackAs(true)
  if (!opts.keepalive) delete exec_callbacks[opts.id];
}

5..当然，为项目的Info.plist添加NSCameraUsageDescription和NSMicrophoneUsageDescription权限.

5. Of course add the NSCameraUsageDescription and NSMicrophoneUsageDescription permissions to the Info.plist for your project.

请记住，这是一项艰巨的任务，但这是将JavaScript，WKWebView和本机框架代码与异步回调桥接在一起的基本思路.

Keep in mind this is a non-trivial task, but that's the general idea behind bridging JavaScript, WKWebView, and native framework code with asynchronous callbacks.

这篇关于在wkwebview中启用摄像头和麦克风访问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！