How to take screenshot from WKWebView with embedded video ?

Question

Created Jun ’21

Replies 2

Boosts 0

Views 1.9k

Participants 3

I want to take a screenshot with WKWebView contains a playing video. I tried many ways, it works well in Simulator, but on device the video's content is not captured.

Simulator:

Device:

Device的副本.png

I tried the following ways:

CALayer#render

let window = UIApplication.shared.windows.first { $0.isKeyWindow }
if window == nil { return }

let layer = window!.layer
let screenRect = window!.screen.bounds
UIGraphicsBeginImageContext(screenRect.size)
let ctx:CGContext = UIGraphicsGetCurrentContext()!
layer.render(in: ctx)
self.screenShotImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

and

UIView#drawHierarchy

let window = UIApplication.shared.windows.first { $0.isKeyWindow }
if window == nil { return }

UIGraphicsBeginImageContextWithOptions(window!.frame.size, false, 0)
window!.drawHierarchy(in: window!.frame, afterScreenUpdates: true)
self.screenShotImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

and

WKWebView#takeSnapshot

let config = WKSnapshotConfiguration()
config.rect = WKWebViewHolder.webView!.frame
config.afterScreenUpdates = false
webView.takeSnapshot(with: config, completionHandler: { (image: UIImage?, error: Error?) in
     if error != nil {
       return
     }
     self.screenShotImage = image
})

What should I do? 🤔

Boost

Answer 1

XMI OP

Aug ’21

I've seen this on macOS and it seems to be caused by some videos being rendered in hardware.

A solution is to use javascript to create a canvas, draw the currebt video frame into the canvas, then show the canvas while you take the screenshot. That seems to force the video content to really get included in the webView properly and then it shows up in the screenshot.

0

Answer 2

r2sk5t OP

Sep ’21

@ZhengHaipeng As part of your WKWebView project, by any chance have you had to deal with microphone permissions? We wrote a demo app to record audio and each time the user gets the microphone permissions prompt. Thanks in advance for any input!

0