Android Question How to Pass Command from Javascript Function to Webview in B4A

drgottjr said:

the answer to your question is yes.

the javascript interface in webviewextras can run functions, set values, query values, etc. in the webview.

the interface is a 2-way street: you can run javascript from b4a, and the webview can raise an event in b4a.

without knowing exactly what it is you want to do (or have tried to do), there is no way to know if you're doing it correctly.

Click to expand...

drgottjr said:

does the javascript snippet you provide above appear in the file you have in dirassets (and which is loaded into the webview)?

Click to expand...

drgottjr said:

here's a simple example for you.
it shows 2 different ways to control some element on a webview.
the example loads a simple webview from dirassets.
there is a sleep command for 10 seconds so you can settle down and look at the webview (i don't want you to miss the show .)

the first example executes a javascript command to change the text color of an element directly. comment that one and uncomment the second one.
the second example executes a javascript function which does the same thing.
i believe either case could work for you.
if you leave both uncommented, you will only see the result of the second example.

note: there is a button on the webview. if you tap it, the color changes. understand that the webviewextras executejavascript command that runs a function (the second example) is clicking the button programatically, as if you had tapped the button.

Click to expand...

drgottjr said:

here's a simple example for you.
it shows 2 different ways to control some element on a webview.
the example loads a simple webview from dirassets.
there is a sleep command for 10 seconds so you can settle down and look at the webview (i don't want you to miss the show .)

the first example executes a javascript command to change the text color of an element directly. comment that one and uncomment the second one.
the second example executes a javascript function which does the same thing.
i believe either case could work for you.
if you leave both uncommented, you will only see the result of the second example.

note: there is a button on the webview. if you tap it, the color changes. understand that the webviewextras executejavascript command that runs a function (the second example) is clicking the button programatically, as if you had tapped the button.

Click to expand...

#Region  Project Attributes
    #ApplicationLabel: B4A Example
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    Private rp As RuntimePermissions
End Sub

Sub Globals
    Private WebView1 As WebView
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("1")
    rp.CheckAndRequest(rp.PERMISSION_CAMERA)
    Wait For Activity_PermissionResult (Permission As String, Result As Boolean)
    If Result Then
        rp.CheckAndRequest(rp.PERMISSION_RECORD_AUDIO)
        Wait For Activity_PermissionResult (Permission As String, Result As Boolean)
        If Result Then
            Dim client As JavaObject
            client.InitializeNewInstance(Application.PackageName & ".main$MyChromeClient", Null)
            Dim jo As JavaObject = WebView1
            jo.RunMethod("setWebChromeClient", Array(client))
            
            WebView1.LoadUrl("https://appr.tc/r/009")
        End If
    End If
End Sub


#if Java
import android.webkit.*;
public static class MyChromeClient extends WebChromeClient {
[USER=69643]@override[/USER]
     public void onPermissionRequest(PermissionRequest request) {
        request.grant(request.getResources());
    }
}
#End If

// camera stream video element
let videoElm = document.querySelector('#camera-stream');
// flip button element
let flipBtn = document.querySelector('#flip-btn');

// default user media options
let defaultsOpts = { audio: false, video: true }
let shouldFaceUser = true;

// check whether we can use facingMode
let supports = navigator.mediaDevices.getSupportedConstraints();
if( supports['facingMode'] === true ) {
  flipBtn.disabled = false;
}

let stream = null;

function capture() {
  defaultsOpts.video = { facingMode: shouldFaceUser ? 'user' : 'environment' }
  navigator.mediaDevices.getUserMedia(defaultsOpts)
    .then(function(_stream) {
      stream  = _stream;
      videoElm.srcObject = stream;
      videoElm.play();
    })
    .catch(function(err) {
      console.log(err)
    });
}

flipBtn.addEventListener('click', function(){
  if( stream == null ) return
  // we need to flip, stop everything
  stream.getTracks().forEach(t => {
    t.stop();
  });
  // toggle / flip
  shouldFaceUser = !shouldFaceUser;
  capture();
})

capture();

drgottjr said:

you still don't get how executeJavascript works; it doesn't matter where the source running in the webview comes from. you're inside the webview.

technically, you can inject the javascript you show. without some modification, it probably won't work. but i can tell you it is essentially doing what is required to change the camera. if you understand webrtc and javascript, you will see that. basically, all you need is the code that's inside the capture() function. a couple other steps are necessary, but they are in the code you posted. you would have to modify them a little. i don't know what you know about webrtc and javascript. somebody is going to have to spend some time with this. it's unclear whether that's you or not. based on what i've seen about webrtc and what's in the javascript you posted, i'd say you were only a few steps away. but they are tricky. the webviewextras aspect is the least of your problems (my example showed how easily it works). once you figure out the javascript, injecting it is simple.

Click to expand...

drgottjr said:

...i'm not going to spend days trying to get the camera to change in a webrtc page. that's your job

Click to expand...

drgottjr said:

i'll take a look. but, here, look at these i just took from my device:
i ran the webrtc test from erel's link. everything ok.
i inject some javascript to send you a message using a function which already exists in the webpage. you can see it on your device. so, clearly, webviewextras can inject javascript into the webrtc page which causes something to happen in the webrtc page. that the command to change the camera failed just means there are some missing steps.

anyway, i'll take a look at your link above and see if there is a candidate suitable for injection. i'll revert later

Click to expand...

drgottjr said:

i just looked at your link. it is exactly what i told you i'm not going to deal with. i don't know enough about webrtc to spend the time 1) to learn and then 2) to keep testing until i figure out how to change the camera. i'm sorry.

Click to expand...

drgottjr said:

the button is in b4a. you need some way to run executejavascript with webviewextras. initially i did a sleep() and then had executejavascript run by itself.
this time i put a button. you tap, it runs executejavascript.

i looked at the source for the webrtc demo (erel's link) and saw a function that the page used to put messages on the screen. i simply take that function, added my own message, and had webviewextras execute the function.

the point was to show you that the source does not have to be loaded from dirassets. once a page has been loaded into webview, you can access it if you know what to look for. in this case, i saw something that i was sure would let me make the webview display change. in your case, you have to find out exactly which function to call to do what you want. from the javascript snippet you sent earlier, you can clearly see capture() is called. if you look at capture(), you can see what it does. that's the function. but you have to first stop the broadcasting and set the appropriate constraint to "environment" before you call capture(). that's the part that's going to be the hardest and will require a lot of testing.

although i find webrtc interesting, it's just too hot to spend the time needed to learn about it. plus there are all kinds of other considerations (servers, peer-to-peer, cross-browser co-operation, etc). it's a big project.

----------------------------------------------------------------------------------------------------------------------------------------------------------------------
CORRECTION:
it's not capture() that does what you want, it's Flipbtn.click(). you would set shouldFaceUser to false and then call flipBtn.click(). Flibtn.click() calls capture() after stopping broadcasting. you would need to identify Flipbtn by id or class. i couldn't. that leads me to believe the snippet isn't even from the link posted by erel.
i'm guessing it's just something you found out there. you need the javascript that applies to the page you're dealing with. you can't just inject some random code.

Click to expand...