B4J Library [ABMaterial]: MashCameraPlain

Hi y'all

Well I've wanted to do this for some time now but now I really need it. This is a custom control that enables one to use the webcam and take a photo. I'm still playing around as its still immature at the moment.

I tried to incorporate cordova and as much as I could and got 'deviceready' firing, the 'getPicture' method just did not execute. That component was MashCamera. This one does not need cordova and uses navigator.getMedia.

It will ask for permission to use the camera. This is tested on Google Chrome, Opera, whilst the permission was given it just didnt play back.

Some feedback based on your tests will be welcome. Ta

Dropbox video..

PS: How to reproduce. Some silly assumptions, you are an ABMaterial developer, whoa!!

Create an ABMPage class as usual...

In Class_globals define the variables..

Private imgShow As ABMImage
    Private mycam1 As MashCameraPlain

Then in BuildPage, I created the grid

' create the page grid
    page.AddRows(1, True, "").AddCells12(1, "")
    page.AddRows(4, True, "").AddCellsOS(2,0,0,0,6,6,6,"")

Then we add the MashCameraPlain component on the page, I have split my page into two so that I have a button to take the picture and another section to show the image. Do this on ConnectPage.

mycam1.Initialize(page,"mycam1","600","450")
    page.Cell(2,1).AddComponent(mycam1.ABMComp)


    Dim btnTakePicture As ABMButton
    btnTakePicture.InitializeRaised(page,"btnTakePicture","","","Take Picture","")
    btnTakePicture.UseFullCellWidth = True
    page.Cell(2,2).AddComponent(btnTakePicture)

    'add components for the page
    imgShow.Initialize(page,"imgshow","../images/logo.png",1)
    page.Cell(2,2).AddComponent(imgShow)

Then the interesting part. I'm returning the dataURL on the toast here. I could use some advise in terms of how to save that to a file, its a canvas outout.

'take a picture
Sub btnTakePicture_Clicked(Target As String)
    'take the picture and show it to the ABMImage
    mycam1.TakePicture(imgShow)
End Sub

Sub mycam1_takepicture(value As Map)
    myToastId = myToastId + 1
    Dim out As String = value.GetDefault("value","")
    page.ShowToast("toast" & myToastId, "toastgreen", out, 3000, False)
End Sub

Known Issue: Plays well with Google Chrome on my laptop, haven't tested on phone yet. Oh, please dont mind the pjs...

 

[inakigarm]

Some feedback based on your tests will be welcome.

Maybe you've missed to attach the camera class? ;-)

 

[Mashiane]

Maybe you've missed to attach the camera class? ;-)

South Africa's internet connections... will add a video too. Ta!

 

[Mashiane]

Just added functionality to save the taken picture... Here is the updated class.

The takepicture event now includes the save method to save the picture taken to your specified directory.

Sub mycam1_takepicture(value As Map)
    myToastId = myToastId + 1
    Dim out As String = value.GetDefault("value","")
    'save the picture
    mycam1.Save(out,File.DirApp,"mememe1.jpg")
End Sub

The jStringUtils library was referenced here...

 

[Mashiane]

This is the final version of this, for now...

1. Three events are raised, _ready, _error and _takepicture
2. _ready is raised as soon as the video playback is done and device is ready to take photos. I will use this to enable/disable whatever is needed on my side.
3. _error is raised should the device not support .getUserMedia
4. _takepicture is raised when the user has taken a picture, here you can save the image
5. Bestly so, Ive found a width of 400x400 works well
6. Setting a picture quality of 1.0 in the dataURL method or bigger width & heights crashes the jetty webserver. Something about returned content too large.
7. The border color, style, intensity can also be set, ensure you copy the following methods to ABMShared and also reference the jStringUtils library in your ABMaterial project.

put this in ABMShared's Process_Globals

Public ColorMap As Map

You also need to call ABMColorMapInitialize, I'm doing that in my ABMApplication.Initialize method

Sub ABMGetColor(color As String, intensity As String) As String
    Dim sKey As String = color & " " & intensity
    Dim sColor As String = ""
    sKey = sKey.trim 
    sColor = ColorMap.GetDefault(sKey,"")
    Return sColor
End Sub

Sub ABMColorMapInitialize()
    ColorMap.Initialize
    ColorMap.Put("maroon","#800000")
    ColorMap.put("red", "#f44336")
    ColorMap.put("orange", "#ff9800")
    ColorMap.put("yellow", "#ffeb3b")
    ColorMap.put("olive", "#808000")
    ColorMap.put("green", "#4caf50")
    ColorMap.put("purple", "#9c27b0")
    ColorMap.Put("fuchsia", "#ff00ff")
    ColorMap.put("lime", "#cddc39")
    ColorMap.put("teal", "#009688")
    ColorMap.Put("aqua", "#00ffff")
    ColorMap.put("grey", "#9e9e9e")
    ColorMap.put("pink", "#e91e63")
    ColorMap.put("blue", "#2196f3")
    ColorMap.put("brown", "#795548")
    ColorMap.put("deep-purple", "#673ab7")
    ColorMap.put("indigo", "#3f51b5")
    ColorMap.put("light-blue", "#03a9f4")
    ColorMap.put("cyan", "#00bcd4")
    ColorMap.put("light-green", "#8bc34a")
    ColorMap.put("amber", "#ffc107")
    ColorMap.put("deep-orange", "#ff5722")
    ColorMap.put("blue-grey", "#607d8b")
    ColorMap.put("black", "#000000")
    ColorMap.put("navy", "#000080")
    ColorMap.Put("silver", "#c0c0c0")
    ColorMap.Put("aquamarine", "#7fffd4")
    ColorMap.put("white", "#ffffff")
    ColorMap.Put("blueviolet", "#8a2be2")
    ColorMap.Put("burlywood", "#deb887")
    ColorMap.Put("cadetblue","#5f9ea0")
    ColorMap.Put("chartreuse", "#7fff00")
    ColorMap.Put("chocolate", "#d2691e")
    ColorMap.Put("coral","#ff7f50")
    ColorMap.Put("cornflowerblue","#6495ed")
    ColorMap.Put("forestgreen","#228b22")
    ColorMap.put("gold","#ffd700")
    ColorMap.Put("goldenrod","#daa520")
    ColorMap.Put("khaki","#f0e68c")
    ColorMap.Put("lavendar", "#e6e6fa")
    ColorMap.Put("lightcoral","#f08080")
    ColorMap.put("lightseagreen","#20b2aa")
    ColorMap.put("rosybrown","#bc8f8f")
    ColorMap.Put("steelblue","#4682b4")
    ColorMap.Put("yellowgreen","#9acd32")
    ColorMap.put("red lighten-5", "#ffebee")
    ColorMap.put("red lighten-4", "#ffcdd2")
    ColorMap.put("red lighten-3", "#ef9a9a")
    ColorMap.put("red lighten-2", "#e57373")
    ColorMap.put("red lighten-1", "#ef5350")
    ColorMap.put("red darken-1", "#e53935")
    ColorMap.put("red darken-2", "#d32f2f")
    ColorMap.put("red darken-3", "#c62828")
    ColorMap.put("red darken-4", "#b71c1c")
    ColorMap.put("red accent-1", "#ff8a80")
    ColorMap.put("red accent-2", "#ff5252")
    ColorMap.put("red accent-3", "#ff1744")
    ColorMap.put("red accent-4", "#d50000")
    ColorMap.put("pink lighten-5", "#fce4ec")
    ColorMap.put("pink lighten-4", "#f8bbd0")
    ColorMap.put("pink lighten-3", "#f48fb1")
    ColorMap.put("pink lighten-2", "#f06292")
    ColorMap.put("pink lighten-1", "#ec407a")
    ColorMap.put("pink darken-1", "#d81b60")
    ColorMap.put("pink darken-2", "#c2185b")
    ColorMap.put("pink darken-3", "#ad1457")
    ColorMap.put("pink darken-4", "#880e4f")
    ColorMap.put("pink accent-1", "#ff80ab")
    ColorMap.put("pink accent-2", "#ff4081")
    ColorMap.put("pink accent-3", "#f50057")
    ColorMap.put("pink accent-4", "#c51162")
    ColorMap.put("purple lighten-5", "#f3e5f5")
    ColorMap.put("purple lighten-4", "#e1bee7")
    ColorMap.put("purple lighten-3", "#ce93d8")
    ColorMap.put("purple lighten-2", "#ba68c8")
    ColorMap.put("purple lighten-1", "#ab47bc")
    ColorMap.put("purple darken-1", "#8e24aa")
    ColorMap.put("purple darken-2", "#7b1fa2")
    ColorMap.put("purple darken-3", "#6a1b9a")
    ColorMap.put("purple darken-4", "#4a148c")
    ColorMap.put("purple accent-1", "#ea80fc")
    ColorMap.put("purple accent-2", "#e040fb")
    ColorMap.put("purple accent-3", "#d500f9")
    ColorMap.put("purple accent-4", "#aa00ff")
    ColorMap.put("deep-purple lighten-5", "#ede7f6")
    ColorMap.put("deep-purple lighten-4", "#d1c4e9")
    ColorMap.put("deep-purple lighten-3", "#b39ddb")
    ColorMap.put("deep-purple lighten-2", "#9575cd")
    ColorMap.put("deep-purple lighten-1", "#7e57c2")
    ColorMap.put("deep-purple darken-1", "#5e35b1")
    ColorMap.put("deep-purple darken-2", "#512da8")
    ColorMap.put("deep-purple darken-3", "#4527a0")
    ColorMap.put("deep-purple darken-4", "#311b92")
    ColorMap.put("deep-purple accent-1", "#b388ff")
    ColorMap.put("deep-purple accent-2", "#7c4dff")
    ColorMap.put("deep-purple accent-3", "#651fff")
    ColorMap.put("deep-purple accent-4", "#6200ea")
    ColorMap.put("indigo lighten-5", "#e8eaf6")
    ColorMap.put("indigo lighten-4", "#c5cae9")
    ColorMap.put("indigo lighten-3", "#9fa8da")
    ColorMap.put("indigo lighten-2", "#7986cb")
    ColorMap.put("indigo lighten-1", "#5c6bc0")
    ColorMap.put("indigo darken-1", "#3949ab")
    ColorMap.put("indigo darken-2", "#303f9f")
    ColorMap.put("indigo darken-3", "#283593")
    ColorMap.put("indigo darken-4", "#1a237e")
    ColorMap.put("indigo accent-1", "#8c9eff")
    ColorMap.put("indigo accent-2", "#536dfe")
    ColorMap.put("indigo accent-3", "#3d5afe")
    ColorMap.put("indigo accent-4", "#304ffe")
    ColorMap.put("blue lighten-5", "#e3f2fd")
    ColorMap.put("blue lighten-4", "#bbdefb")
    ColorMap.put("blue lighten-3", "#90caf9")
    ColorMap.put("blue lighten-2", "#64b5f6")
    ColorMap.put("blue lighten-1", "#42a5f5")
    ColorMap.put("blue darken-1", "#1e88e5")
    ColorMap.put("blue darken-2", "#1976d2")
    ColorMap.put("blue darken-3", "#1565c0")
    ColorMap.put("blue darken-4", "#0d47a1")
    ColorMap.put("blue accent-1", "#82b1ff")
    ColorMap.put("blue accent-2", "#448aff")
    ColorMap.put("blue accent-3", "#2979ff")
    ColorMap.put("blue accent-4", "#2962ff")
    ColorMap.put("light-blue lighten-5", "#e1f5fe")
    ColorMap.put("light-blue lighten-4", "#b3e5fc")
    ColorMap.put("light-blue lighten-3", "#81d4fa")
    ColorMap.put("light-blue lighten-2", "#4fc3f7")
    ColorMap.put("light-blue lighten-1", "#29b6f6")
    ColorMap.put("light-blue darken-1", "#039be5")
    ColorMap.put("light-blue darken-2", "#0288d1")
    ColorMap.put("light-blue darken-3", "#0277bd")
    ColorMap.put("light-blue darken-4", "#01579b")
    ColorMap.put("light-blue accent-1", "#80d8ff")
    ColorMap.put("light-blue accent-2", "#40c4ff")
    ColorMap.put("light-blue accent-3", "#00b0ff")
    ColorMap.put("light-blue accent-4", "#0091ea")
    ColorMap.put("cyan lighten-5", "#e0f7fa")
    ColorMap.put("cyan lighten-4", "#b2ebf2")
    ColorMap.put("cyan lighten-3", "#80deea")
    ColorMap.put("cyan lighten-2", "#4dd0e1")
    ColorMap.put("cyan lighten-1", "#26c6da")
    ColorMap.put("cyan darken-1", "#00acc1")
    ColorMap.put("cyan darken-2", "#0097a7")
    ColorMap.put("cyan darken-3", "#00838f")
    ColorMap.put("cyan darken-4", "#006064")
    ColorMap.put("cyan accent-1", "#84ffff")
    ColorMap.put("cyan accent-2", "#18ffff")
    ColorMap.put("cyan accent-3", "#00e5ff")
    ColorMap.put("cyan accent-4", "#00b8d4")
    ColorMap.put("teal lighten-5", "#e0f2f1")
    ColorMap.put("teal lighten-4", "#b2dfdb")
    ColorMap.put("teal lighten-3", "#80cbc4")
    ColorMap.put("teal lighten-2", "#4db6ac")
    ColorMap.put("teal lighten-1", "#26a69a")
    ColorMap.put("teal darken-1", "#00897b")
    ColorMap.put("teal darken-2", "#00796b")
    ColorMap.put("teal darken-3", "#00695c")
    ColorMap.put("teal darken-4", "#004d40")
    ColorMap.put("teal accent-1", "#a7ffeb")
    ColorMap.put("teal accent-2", "#64ffda")
    ColorMap.put("teal accent-3", "#1de9b6")
    ColorMap.put("teal accent-4", "#00bfa5")
    ColorMap.put("green lighten-5", "#e8f5e9")
    ColorMap.put("green lighten-4", "#c8e6c9")
    ColorMap.put("green lighten-3", "#a5d6a7")
    ColorMap.put("green lighten-2", "#81c784")
    ColorMap.put("green lighten-1", "#66bb6a")
    ColorMap.put("green darken-1", "#43a047")
    ColorMap.put("green darken-2", "#388e3c")
    ColorMap.put("green darken-3", "#2e7d32")
    ColorMap.put("green darken-4", "#1b5e20")
    ColorMap.put("green accent-1", "#b9f6ca")
    ColorMap.put("green accent-2", "#69f0ae")
    ColorMap.put("green accent-3", "#00e676")
    ColorMap.put("green accent-4", "#00c853")
    ColorMap.put("light-green lighten-5", "#f1f8e9")
    ColorMap.put("light-green lighten-4", "#dcedc8")
    ColorMap.put("light-green lighten-3", "#c5e1a5")
    ColorMap.put("light-green lighten-2", "#aed581")
    ColorMap.put("light-green lighten-1", "#9ccc65")
    ColorMap.put("light-green darken-1", "#7cb342")
    ColorMap.put("light-green darken-2", "#689f38")
    ColorMap.put("light-green darken-3", "#558b2f")
    ColorMap.put("light-green darken-4", "#33691e")
    ColorMap.put("light-green accent-1", "#ccff90")
    ColorMap.put("light-green accent-2", "#b2ff59")
    ColorMap.put("light-green accent-3", "#76ff03")
    ColorMap.put("light-green accent-4", "#64dd17")
    ColorMap.put("lime lighten-5", "#f9fbe7")
    ColorMap.put("lime lighten-4", "#f0f4c3")
    ColorMap.put("lime lighten-3", "#e6ee9c")
    ColorMap.put("lime lighten-2", "#dce775")
    ColorMap.put("lime lighten-1", "#d4e157")
    ColorMap.put("lime darken-1", "#c0ca33")
    ColorMap.put("lime darken-2", "#afb42b")
    ColorMap.put("lime darken-3", "#9e9d24")
    ColorMap.put("lime darken-4", "#827717")
    ColorMap.put("lime accent-1", "#f4ff81")
    ColorMap.put("lime accent-2", "#eeff41")
    ColorMap.put("lime accent-3", "#c6ff00")
    ColorMap.put("lime accent-4", "#aeea00")
    ColorMap.put("yellow lighten-5", "#fffde7")
    ColorMap.put("yellow lighten-4", "#fff9c4")
    ColorMap.put("yellow lighten-3", "#fff59d")
    ColorMap.put("yellow lighten-2", "#fff176")
    ColorMap.put("yellow lighten-1", "#ffee58")
    ColorMap.put("yellow darken-1", "#fdd835")
    ColorMap.put("yellow darken-2", "#fbc02d")
    ColorMap.put("yellow darken-3", "#f9a825")
    ColorMap.put("yellow darken-4", "#f57f17")
    ColorMap.put("yellow accent-1", "#ffff8d")
    ColorMap.put("yellow accent-2", "#ffff00")
    ColorMap.put("yellow accent-3", "#ffea00")
    ColorMap.put("yellow accent-4", "#ffd600")
    ColorMap.put("amber lighten-5", "#fff8e1")
    ColorMap.put("amber lighten-4", "#ffecb3")
    ColorMap.put("amber lighten-3", "#ffe082")
    ColorMap.put("amber lighten-2", "#ffd54f")
    ColorMap.put("amber lighten-1", "#ffca28")
    ColorMap.put("amber darken-1", "#ffb300")
    ColorMap.put("amber darken-2", "#ffa000")
    ColorMap.put("amber darken-3", "#ff8f00")
    ColorMap.put("amber darken-4", "#ff6f00")
    ColorMap.put("amber accent-1", "#ffe57f")
    ColorMap.put("amber accent-2", "#ffd740")
    ColorMap.put("amber accent-3", "#ffc400")
    ColorMap.put("amber accent-4", "#ffab00")
    ColorMap.put("orange lighten-5", "#fff3e0")
    ColorMap.put("orange lighten-4", "#ffe0b2")
    ColorMap.put("orange lighten-3", "#ffcc80")
    ColorMap.put("orange lighten-2", "#ffb74d")
    ColorMap.put("orange lighten-1", "#ffa726")
    ColorMap.put("orange darken-1", "#fb8c00")
    ColorMap.put("orange darken-2", "#f57c00")
    ColorMap.put("orange darken-3", "#ef6c00")
    ColorMap.put("orange darken-4", "#e65100")
    ColorMap.put("orange accent-1", "#ffd180")
    ColorMap.put("orange accent-2", "#ffab40")
    ColorMap.put("orange accent-3", "#ff9100")
    ColorMap.put("orange accent-4", "#ff6d00")
    ColorMap.put("deep-orange lighten-5", "#fbe9e7")
    ColorMap.put("deep-orange lighten-4", "#ffccbc")
    ColorMap.put("deep-orange lighten-3", "#ffab91")
    ColorMap.put("deep-orange lighten-2", "#ff8a65")
    ColorMap.put("deep-orange lighten-1", "#ff7043")
    ColorMap.put("deep-orange darken-1", "#f4511e")
    ColorMap.put("deep-orange darken-2", "#e64a19")
    ColorMap.put("deep-orange darken-3", "#d84315")
    ColorMap.put("deep-orange darken-4", "#bf360c")
    ColorMap.put("deep-orange accent-1", "#ff9e80")
    ColorMap.put("deep-orange accent-2", "#ff6e40")
    ColorMap.put("deep-orange accent-3", "#ff3d00")
    ColorMap.put("deep-orange accent-4", "#dd2c00")
    ColorMap.put("brown lighten-5", "#efebe9")
    ColorMap.put("brown lighten-4", "#d7ccc8")
    ColorMap.put("brown lighten-3", "#bcaaa4")
    ColorMap.put("brown lighten-2", "#a1887f")
    ColorMap.put("brown lighten-1", "#8d6e63")
    ColorMap.put("brown darken-1", "#6d4c41")
    ColorMap.put("brown darken-2", "#5d4037")
    ColorMap.put("brown darken-3", "#4e342e")
    ColorMap.put("brown darken-4", "#3e2723")
    ColorMap.put("grey lighten-5", "#fafafa")
    ColorMap.put("grey lighten-4", "#f5f5f5")
    ColorMap.put("grey lighten-3", "#eeeeee")
    ColorMap.put("grey lighten-2", "#e0e0e0")
    ColorMap.put("grey lighten-1", "#bdbdbd")
    ColorMap.put("grey darken-1", "#757575")
    ColorMap.put("grey darken-2", "#616161")
    ColorMap.put("grey darken-3", "#424242")
    ColorMap.put("grey darken-4", "#212121")
    ColorMap.put("blue-grey lighten-5", "#eceff1")
    ColorMap.put("blue-grey lighten-4", "#cfd8dc")
    ColorMap.put("blue-grey lighten-3", "#b0bec5")
    ColorMap.put("blue-grey lighten-2", "#90a4ae")
    ColorMap.put("blue-grey lighten-1", "#78909c")
    ColorMap.put("blue-grey darken-1", "#546e7a")
    ColorMap.put("blue-grey darken-2", "#455a64")
    ColorMap.put("blue-grey darken-3", "#37474f")
    ColorMap.put("blue-grey darken-4", "#263238")
    ColorMap.put("transparent", "transparent")
End Sub

These two methods are used by the MashCameraPlain class.

The latest example code is...

Sub mycam1_ready(value As Map)
    btnTakePicture.enabled = True
    btnTakePicture.refresh
    myToastId = myToastId + 1
    Dim out As String = value.GetDefault("value","")
    page.ShowToast("toast" & myToastId, "toastgreen", out, 3000, False)
End Sub


Sub mycam1_error(value As Map)
    btnTakePicture.enabled = False
    btnTakePicture.refresh
    myToastId = myToastId + 1
    Dim out As String = value.GetDefault("value","")
    page.ShowToast("toast" & myToastId, "toastred", out, 3000, False)
End Sub

Sub mycam1_takepicture(value As Map)
    myToastId = myToastId + 1
    Dim out As String = value.GetDefault("value","")
    'save the picture
    mycam1.Save(out,File.DirApp,"mememe1.jpg")
End Sub

As an example, I have disabled btnTakePicture until the recording area is set. As soon as _ready fires, I enable take picture, at the same time showing a toast.

Ta!

PS: mycam1 has been defined like

mycam1.Initialize(page,"mycam1","400","300")
    mycam1.BorderColor = ABM.COLOR_BLUE
    mycam1.BorderIntensity = ABM.INTENSITY_DARKEN2
    mycam1.BorderStyle = ABM.BORDER_SOLID
    mycam1.borderwidth = 3
    mycam1.ZDepth = ABM.ZDEPTH_3
    page.Cell(2,1).AddComponent(mycam1.ABMComp)

The zDepth however does not play well, but the border stuff is cool.

 

[OliverA]

Something about returned content too large.

See @Erel's answer to this post (https://www.b4x.com/android/forum/threads/sending-binary-data-over-websocket.44776/#post-274162).

 

[Mashiane]

See @Erel's answer to this post (https://www.b4x.com/android/forum/threads/sending-binary-data-over-websocket.44776/#post-274162).

Wow, thanks a mil @OliverA, I will have to put that somewhere on the ABMaterial page class and see what happens.

 

[inakigarm]

I've tried to test the code but in MashCameraPlain.bas de ABMComp.Initialize has 5 parameters ABMComp.Initialize("ABMComp", Me, InternalPage, ID,"")
and my ABMMaterial has 4

Maybe you're on ABM Dragonfly ? How to translate the code to the 'old' ABMMaterial?(I've tried but I get an error)

Thanks

 

[Mashiane]

I've tried to test the code but in MashCameraPlain.bas de ABMComp.Initialize has 5 parameters ABMComp.Initialize("ABMComp", Me, InternalPage, ID,"")
and my ABMMaterial has 4 View attachment 61743
Maybe you're on ABM Dragonfly ? How to translate the code to the 'old' ABMMaterial?(I've tried but I get an error)

Thanks

You need to use version 3.75 of ABMaterial as that additional parameter was added from that version going forward. I have not moved to 4 as of yet.

 

[joulongleu]

Hi Mashiane Use Microsoft Edge is ok,but google chrome can,t display,thank you

 

[Mashiane]

Hi Mashiane Use Microsoft Edge is ok,but google chrome can,t display,thank you

Strange enough, on my first post I indicated i have tested such with my google chrome on my laptop and it worked perfectly and later Opera started working too. Havent tested it with Edge though. It's a tricky one this..

 

[joulongleu]

Hi:Mashiane:google chrome is ok,I add Button But can't to stop Thank You.

 

[Mashiane]

Hi:Mashiane:google chrome is ok,I add Button But can't to stop Thank You.

Hi, can you send me a small project about what you mean, i'm unclear of the issue, you cant stop the video playback?

 

[joulongleu]

Hi, I use MashCameraPlain.bas,How to pause the following image, as the following red box.

 

[Mashiane]

You cant pause the image as its streaming from the webcam as a video. In my example I had used another div to save and display the saved picture as soon as one takes a photo.

You can hoever overlap divs, when you take a photo it hides the streaming view and then shows the taken photo. I will update this at some stage as I have not implemented it anywhere else yet as I did it when I was planning my project to ensure it can be done.

Ta..

 

[joulongleu]

Hi:Mashiane,Thank you for your guidance,I later discovered that the following code can be used to control
Attach my modified program ,Thank you very much.

'strart
mycam1.StartStop(True) 
mycam1.refresh(page,"mycam1")
or 
'stop
mycam1.StartStop(False) 
mycam1.refresh(page,"mycam1")