B4J Question CCTV - Refresh Browser

schimanski

Well-Known Member
Licensed User
Longtime User
I'm using the CCTV-Server-Solution and also the alternative GetImages implementation:

https://www.b4x.com/android/forum/threads/cctv-server-blinking.37422/#post-220668

I'm using it now with https:// and a filtersolution with user and password. When I send the image and shows it in a browser with the following link:

https://xx.xxx.xx1.60:51044/EIS/cct...&passwort=blablablabla&type=livevideo&id=test

the browser does not refresh the pictures automaticaly. Each time, there is only loading the last image:

How it all connects

The main page (index.html file) uses ajax requests to refresh one of the "divs" every 500ms.

Could the ssl-connection be the problem? I'm using the index.html in the directory www.
 

Didier9

Well-Known Member
Licensed User
Longtime User
Add this
B4X:
<meta http-equiv=”refresh” content=”5" />
in the <HEAD> section of the html page to force the browser to query the page again every 5 seconds.
If you currently directly query the image by itself, simply link the image into a simple web page and add the statement in the <HEAD> section and query the page instead of the image itself.
Typically you cannot "force" data to the browser, the browser has to request it. There are many ways to do it (Ajax is a good way as it only reloads the data you specify instead of the whole page, Websockets is another). The refresh statement is the simplest.
 
Last edited:
Upvote 0

schimanski

Well-Known Member
Licensed User
Longtime User
Thank you for yout reply!

I think the best way is to reload the data which i specify for performance reasons. The index-file from the CCTV-example above uses ajax:

B4X:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
    <h1>EIS Cam-Server</h1>
    <div id="images"></div>
    
    <script type="text/javascript">
    function get_images(){
        $.ajax({
           url: "/GetImages",
           success: function(result)
           {
               $("#images").html(result);
           },         
         });
    }
    $(document).ready(function(){
        get_images();
        setInterval(function(){get_images();}, 500);
    });

    </script>
</body>

I don't understand, why the refreshing in the example runs like a charm, but not in my ssl-solution :confused:
 
Upvote 0

Didier9

Well-Known Member
Licensed User
Longtime User
Your javascript file is delivered over http so it cannot request https data (I think it is referred to as "same source policy"). Make sure the javascript is downloaded through https and that should fix the problem.
B4X:
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
 
Upvote 0

schimanski

Well-Known Member
Licensed User
Longtime User
Thank you for your efforts. I didn't got it to work so I made it with an imageview and a timer:

Servercode GetImages:
B4X:
    Dim img() As Byte = Main.images.Get(ID)
     resp.Write(su.EncodeBase64(img))

Clientcode:
B4X:
Sub TimerLive_Tick
    Dim Livebild As HttpJob
    Livebild.Initialize("Livebildladen", Me)
    Livebild.Download2(LadeService.ServerPfad & "/GetImages", Array As String("absender",  Main.manager.GetString("Absender"), "passwort", PasswortServer, "type", "livebild", "id", LiveBildKey))
        
    Wait For JobDone(Livebild As HttpJob)             
    If Livebild.Success Then
        If Livebild.GetString<>"" Then
            Dim img As Bitmap =  BytesToImage(stu.DecodeBase64(Livebild.GetString))       
            ivViewer.Bitmap=img
        End If
    End If
    Livebild.Release
End Sub

Public Sub BytesToImage(bytes() As Byte) As Bitmap
   Dim In As InputStream
   In.InitializeFromBytesArray(bytes, 0, bytes.Length)
   Dim bmp As Bitmap
   bmp.Initialize2(In)
   Return bmp
End Sub
 
Upvote 0
Top