在 wkwebview 中启用摄像头和麦克风访问

Question

我有一个针对移动设备优化的网络应用程序，它利用 getUserMedia 访问网络摄像头和麦克风资源。

我将此应用包装在 WKWebView 中，因为我想提供原生应用体验。我知道 iOS 不允许通过浏览器访问相机 - 但是有什么方法可以使用本机代码（与包装器一起）获得对 webcam/mic 的权限并将其提供给网络应用程序 -也许通过某种方式将 getUserMedia 指向本地流源？

Answer 1

是的，看看cordova-plugin-iosrtc and cordova-plugin-wkwebview-engine。插件背后的想法如下：

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

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

2.在WKWebView中，在文档开头注入脚本：

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:

发送的消息

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-land中执行成功或失败回调，直接在WKWebView中评估函数调用：

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

在调用postMessage之前，这些回调需要存储在JavaScript的散列中，然后必须将散列键发送到WKWebView。这是插件中的commandId。

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. 当然，为您的项目添加 NSCameraUsageDescription 和 NSMicrophoneUsageDescription 权限到 Info.plist。

请记住，这是一项非常重要的任务，但这是桥接 JavaScript、WKWebView 和带有异步回调的本机框架代码背后的总体思路。

在 wkwebview 中启用摄像头和麦克风访问

Enable Camera and Mic access in wkwebview

html

objective-c

ios

swift

wkwebview