Cordova iOS 6.1.0 How to display images on external screen in WKwebview

问题

I have a Cordova app that uses this plugin (cordova-plugin-wkwebview-external-screen) to display images/media full screen on an external screen via Airplay/HDMI adapter (similar to Apple’s Keynote).

All worked smoothly with UIwebview, but I’m having trouble displaying media on my external screen with WKwebview. I’m now using Cordova iOS 6.1.1 (CLI 10.0).

I’m using window.WkWebView.convertFilePath() to display media on my primary (control) screen, but neither the converted file url nor the “file://...” url (cordova.file.dataDirectory + ‘image.jpg’) work in the external screen.

Additional info:

My external screen is launched via ExternalScreen.loadHTML('secondary.html'); , but Cordova does not appear to be available in the window of the external screen (even when cordova.js is included in secondary.html).
My “whitelist” meta data is the same in both my index.html (control) and secondary.html (display) documents.

How do I get image URL’s that’ll display on my second (external) screen?

UPDATE: I've updated the getWebView function of the plugin adding allowFileAccessFromFileURLs, allowUniversalAccessFromFileURLs, allowsInlineMediaPlayback, and mediaTypesRequiringUserActionForPlayback configurations:

- (WKWebView*)getWebView {
    if (!self.externalWebView) {
        UIScreen* externalScreen = [[UIScreen screens] objectAtIndex: 1];
        CGRect screenBounds = externalScreen.bounds;
        self.externalWebView = [[WKWebView alloc] initWithFrame: screenBounds configuration: [[WKWebViewConfiguration alloc] init]];

        // I added these four configurations...
        [self.externalWebView.configuration.preferences setValue:@YES forKey:@"allowFileAccessFromFileURLs"];
        [self.externalWebView.configuration setValue:@YES forKey:@"allowUniversalAccessFromFileURLs"];
        self.externalWebView.configuration.allowsInlineMediaPlayback = TRUE;
        self.externalWebView.configuration.mediaTypesRequiringUserActionForPlayback = WKAudiovisualMediaTypeNone;

        self.externalWindow = [[UIWindow alloc] initWithFrame: screenBounds];
        self.externalWindow.screen = externalScreen;
        self.externalWindow.clipsToBounds = YES;
        [self.externalWindow addSubview:self.externalWebView];
        [self.externalWindow makeKeyAndVisible];
        self.externalWindow.hidden = NO;
    }
    return self.externalWebView;
}

Unfortunately, these changes do not seem to impact the externalView. I'm temporarily using this plugin as a workaround (cordova-plugin-wkwebview-sandbox-webserver), but even with that I can't get HTML5 videos to autoplay - so I'm questioning whether I'm even putting the configuration settings in the right place?

回答1:

The issue is that this plugin has not been updated. From what I can see in the plugin, it is trying to load using file:// which is not working anymore out of the box.

    NSString* a = @"file://";
    baseURLAddress = [a stringByAppendingString:baseURLAddress];

You could try to add the preferences allowFileAccessFromFileURLs and allowUniversalAccessFromFileURLs to the WKWebView that is created by this plugin in the getWebView method in this file

You can base your work on this plugin, code for reference

 [wkWebView.configuration.preferences setValue:@(_allowFileAccessFromFileURLs) forKey:@"allowFileAccessFromFileURLs"];

While this is not a straight answer, cloning cordova-plugin-wkwebview-external-screen and adding theses preferences is your best shot.

来源：https://stackoverflow.com/questions/65032653/cordova-ios-6-1-0-how-to-display-images-on-external-screen-in-wkwebview

标签

ios

cordova

wkwebview