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

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

WKWebView要将这个应用包装为A,因为我想提供本机应用体验。我知道,iOS不允许通过浏览器访问摄像机-

但有什么办法来获得权限的网络摄像头/麦克风与本机代码(沿着封装)和饲料这对Web应用程序-也许在某种程度上指向getUserMedia一个本地流源?

回答:

是的,看看cordova-plugin-iosrtc和cordova-plugin-wkwebview-

engine。插件背后的想法如下:

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

(function() {

if (!window.navigator) window.navigator = {};

window.navigator.getUserMedia = function() {

webkit.messageHandlers.callbackHandler.postMessage(arguments);

}

})();

在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)

收听从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

}

}

}

如果需要在JavaScript领域中执行成功或失败回调,请直接在WKWebView中评估函数调用:

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

这些回调需要 调用 之前

存储在JavaScript中的哈希中postMessage,然后必须将哈希键发送到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];

}

当然,为您的项目添加NSCameraUsageDescriptionNSMicrophoneUsageDescription权限Info.plist

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中启用摄像头和麦克风访问 的全部内容, 来源链接: utcz.com/qa/430790.html

回到顶部