WebView Overlay #48
Description
I am trying to implement the webview Overlay to the application, webview is getting added to the camera but it is too very big not matching to the size of camera view..
For live streaming I am using width: 1920 and height: 1080
Not sure what mistake I am doing, any help ?
var body: some View {
ZStack {
let camera = CameraUIView()
let cameraView = camera.view
camera.edgesIgnoringSafeArea(.all)
camera.onAppear {
rtmpCamera = RtmpCamera(view: cameraView, connectChecker: self)
rtmpCamera.getStreamClient().setRetries(reTries: 10)
rtmpCamera.getStreamClient().setAuth(user: "mani", password: "Pr1th1v1")
rtmpCamera.startPreview(width: 1920, height: 1080)
}
camera.onDisappear {
if (rtmpCamera.isStreaming()) {
rtmpCamera.stopStream()
}
if (rtmpCamera.isOnPreview()) {
rtmpCamera.stopPreview()
}
}
WebView(url: URL(string: "https://localhost/scoreboard/livescore.html#/123456/preview")!) {
webView in
// Handle the WebView after it has loaded
self.webView = webView
if !rtmpCamera.isStreaming() && !rtmpCamera.isRecording() {
// Use the WebView as a filter
let filterView = ViewFilterRender(view: webView)
rtmpCamera?.metalInterface.setFilter(baseFilterRender: filterView)
filterView.setScale(percentX: 100, percentY: 100)
filterView.translateTo(translation: .CENTER)
}
}
.frame(width: 400, height: 400)
.opacity(0) // Hide the WebView visually, use it only as a filter
My webview code is like this
struct WebView: UIViewRepresentable {
let url: URL
var onWebViewLoaded: ((WKWebView) -> Void)? // Pass WebView reference
class Coordinator: NSObject, WKNavigationDelegate {
var parent: WebView
init(parent: WebView) {
self.parent = parent
}
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
// Trigger the callback after the WebView has loaded
parent.onWebViewLoaded?(webView)
}
}
func makeCoordinator() -> Coordinator {
return Coordinator(parent: self)
}
func makeUIView(context: Context) -> WKWebView {
let webView = WKWebView(frame: .zero)
// Step 1: Set the background to transparent
webView.backgroundColor = .clear
webView.isOpaque = false
// Step 2: Set the web view's content to support transparency in the web page
let request = URLRequest(url: url)
webView.load(request)
webView.navigationDelegate = context.coordinator
// Modify the page content to have transparent background
let js = """
document.body.style.backgroundColor = 'transparent';
"""
webView.evaluateJavaScript(js, completionHandler: nil)
return webView
}
func updateUIView(_ uiView: WKWebView, context: Context) {
// You can update the WebView properties here if needed
}
}