Android Question Cannot show ESP32CAM video streaming on WebView

[max123]

Hi all,

I wrote an app that acts as 3D Printer, CNC Router and Laser Host controller over USB and Network.

To view remotely machines during the working process, eg while printing, engraving etc.. locally or over internet, I use ESP32CAM that stream multipart MJPEG video, it is programmed with the CameraWebServer.ino sketch, not the same but just modified by me to add more funtionalities and with inline HTML instead of gzip file.
https://github.com/espressif/arduin...braries/ESP32/examples/Camera/CameraWebServer

In my app I've a dedicate page where I added a WebView, a textbox where add the camera URL and START and STOP buttons to start/stop the video streaming.

This work well on my Nexus 7 2013 and regular browsers (Chrome, Firefox, Opera Mini) I can see the exposed ESP32 webserver with all camera controls and a button to start the video stream. I can even switch on/off remotely the flash led from the same page.

Now the problem....

For some reasons it do not work on my Asus ZenFone2 smartphone (and even other smartphones), when I start the stream (load a page) the browser show this message:

"header fields are too long for server to interpret"

On the same device I can see the page (and the video stream) on all browsers but not in the B4A WebView.

Is there a way to fix it ?

I've found on this page one solution to fix that using an intent and pass to it the URL, but this is for AppInventor and I don't know a B4A counterpart
or other best way to fix.
http://kio4.com/arduino/247_Wemos_WebCam.htm

Please, can someone help me ?
Many thanks

 

[JohnC]

Two things you can try:

1) Add chromeclient to webview to see if that gets it to work:

Viewing a video in realtime

Step 1 The following code displays a realtime video from a local IP webcam : webview1.Initialize("webview1") Activity.AddView (webview1,0,0,100%x,100%y) URL="http://admin:@192......1/video2.mjpg" ' OK (va bene in locale, con wifi webview1.LoadUrl(URL) Step 2 The following HTML code...

www.b4x.com

2) Did you try this example to display MJPEGs:

[B4X] [class] MJPEG decoder

The attached class is an implementation of a MJPEG over Http decoder. The data is a mix of strings and raw bytes. It is tempting to convert the bytes to a string. However raw bytes do not represent a valid string so you can lose important information during the conversion (which will also slow...

www.b4x.com

 

[max123]

Many thanks @JohnC I will try your suggestions, but actually it works perfectly on Nexus 7, so very strange

 

[JohnC]

Keep in mind also that the webview control is updatable from the Play Store, so maybe the other device needs to see if there is an update available and install it.

 

[max123]

The first one do not work, it show the same message on a web page:

header fields are too long for server to interpret

This is a relevant code:

'''''''''''''' IP CAMERA STREAM '''''''''''''

Sub btnStartCameraStream_On(Index As Int, Tag As String)

    Dim wve As WebViewExtras
    wve.addWebChromeClient(CameraWebView, "WVE")
  
    btnStartCameraStream.DisableNoMask
    Dim URL As String = txtCameraHost.Text.Trim
    CameraWebView.LoadUrl(URL)
    Log("Loading URL: " &  CameraWebView.Url)
    ToastMessageShow("Loading URL: " & CameraWebView.Url, False)
End Sub

The second alternative I think I cannot use because it render on an ImageView, the CameraServer do not only stream the MJPEG stream, but exposes an HTML page, inside this page there are camera controls and a button to start a video stream, so a WebView is required.

Actually the URL is http://ESP_IP_ADDRESS/ so example http://192.168.178.38/ in station mode (connected to local network) or http://192.168.4.1/ with ESP32 as access point.

Any others suggestions to fix are very welcome.
Many Thanks

 

[max123]

My Android System WebView is updated to 21 Sept 2021, I have only the option to uninstall.
Maybe it only works on Nexus devices because from Google and not on other devices?

 

[max123]

BINGO !!!

For anyone have this problem I solvet it by uninstall the Android System WebView from PlayStore.
I do not know if this make limitations to other applications that use it, for sure yes, so pay attention, I not responsible to this, but in my case it worked, if I reinstall againt it stop and I cannot see the exposed webpage.

Maybe the best solution is make it to work without uninstall the service.

Many thanks @JohnC you solved my problem.

Now I can see on Asus ZenFone2 the webpage exposed from ESP32CAM, change resolution and controls, get image still, start the video streaming, the only problem I had is that a page is too big, the WebView zoom already is the smaller, is there a way to reduce the page zoom?

In external browsers I too see big page and controls, but if I swith to Desktop mode then I see the right I want. This can be done maybe with WebViewExtras or maybe I need to edit the html file on ESP32 side ?

Many thanks

 

[max123]

Please how to manage the B4A WebView to load a page in Desktop mode instead of Mobile mode? Is that possible?
If no, there is a way to scale the page smaller than it's size?

 

[JohnC]

This provides many ways to adjust the size of the content:

WebViewSettings

Hi all. Here's a new library that makes it easy to set and get various WebView WebSettings. Note that the official documentation for many of these settings is rather brief, sometimes vague or virtually non-existent! Here is an alphabetical list of all methods with a short description. I've...

www.b4x.com

 

[max123]

Now I'm not at PC, so:

Dim UserAgent As String = "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_7; en-us) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Safari/530.17"
WebViewSetting1.setUserAgentString (CameraWebView, UserAgent)

can get the trick ?