How execute a Java function from a Constructor of React component throuhg webview

Question

I am making a video chat app which has to work in a webview of my android application.

So What I want is to set audio and video to true or false depending on java. it means if I clicked to audio call button in ui button I should set video to false and vice versa.

this.getUserMedia = navigator.mediaDevices.getUserMedia({
      audio: true,
      video: true
    })

Here is the full code for the Component containing the above lines.

import React, { Component } from 'react';
import MediaContainer from './MediaContainer'
import CommunicationContainer from './CommunicationContainer'
import { connect } from 'react-redux'
import store from '../store'
import io from 'socket.io-client'

class RoomPage extends Component {
  constructor(props) {
    super(props);
    this.getUserMedia = navigator.mediaDevices.getUserMedia({
      audio: true,
      video: true
    }).catch(e => alert('getUserMedia() error: ' + e.name))
    this.socket = io.connect();
  }
  componentDidMount() {
    this.props.addRoom();
  }
  render(){
    return (
      <div>
        <MediaContainer media={media => this.media = media} socket={this.socket} getUserMedia={this.getUserMedia} />
        <CommunicationContainer socket={this.socket} media={this.media} getUserMedia={this.getUserMedia} />
      </div>
    );
  }
}
const mapStateToProps = store => ({rooms: new Set([...store.rooms])});
const mapDispatchToProps = (dispatch, ownProps) => (
    {
      addRoom: () => store.dispatch({ type: 'ADD_ROOM', room: ownProps.match.params.room })
    }
  );
export default connect(mapStateToProps, mapDispatchToProps)(RoomPage);

If you can provide me with a sample code please. I am new in React, so please be as explicit as possible.

what I meant is everything should work in a webview of my android application @Andrea Giammarchi — Fox, Jul 17 '20 at 15:51
what I mean is that you'll never execute Java from a WebView, and the code you wrote is JavaScript, not Java — Andrea Giammarchi, Jul 17 '20 at 15:53
@Andrea Giammarchi, I want a in this [link](https://stackoverflow.com/questions/10389572/call-java-function-from-javascript-over-android-webview) of solution but for React Js — Fox, Jul 17 '20 at 15:57
you should've mentioned that, as it's a completely different matter, and that's still *not* calling Java from JavaScript, it's a workaround (exposing Java, not mentioned in here, to the browser). Just saying, I'd improve the question and the title, or its description, if I were you. — Andrea Giammarchi, Jul 17 '20 at 16:03
@Andrea Giammarchi you will be of great help if you suggest an Edition of the title to help other understand What I need — Fox, Jul 17 '20 at 17:42

score 1 · Accepted Answer · answered Jun 23 '22 at 10:30

You can use javascript to call a native function.

In android (java) , Create a class which will be used as JavascriptInterface

public class MyExecutorInterface {
    Context mctxt;
 
    MyExecutorInterface (Context c) {
        mctxt= c;
    }

    @JavascriptInterface   // must be added for API 17 or higher
    public void executeAction(String message) {
        Toast.makeText(mctxt, message, Toast.LENGTH_SHORT).show();
    }
}

When you declare your webview, enable javascript and pass the class in charge to execute action.

MyExecutorInterface jsInt = new MyExecutorInterface(this);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(jsInt, "JSInterface"); // JSInterface is what will be used in javascript

Now you can call your action in Javascript like this:

window.JSInterface.executeAction(message)

How execute a Java function from a Constructor of React component throuhg webview

1 Answers1