Hey there, I'm struggling a bit with English so bear with me. I've been working on a project using JavaFX and JxBrowser, but as a novice, I encountered an issue with executing my JavaScript script. It's not running properly. I tried following the instructions provided on this site that used jQuery (here), but unfortunately, it didn't work for me. I suspect that the problem might be related to media access because my JavaScript code requires access to the computer’s media via the browser object. The code works fine on Chrome but encounters issues on JxBrowser.
I would greatly appreciate it if you could take a look at my code and possibly help me correct it for proper functionality. Thank you! Below are snippets of my Java FX code including the Main file, HTML code, and JavaScript script (I omitted the .css file as it's lengthy and poses no issues, since the .html file functions perfectly on Chrome).
Main.java
public class Main extends Application {
@Override
public void start(Stage primaryStage) {
Browser browser = new Browser();
BrowserView view = new BrowserView(browser);
StackPane pane = new StackPane();
pane.getChildren().add(view);
Scene scene = new Scene(pane,500,400);
primaryStage.setScene(scene);
primaryStage.show();
browser.addLoadListener(new LoadAdapter() {
@Override
public void onFinishLoadingFrame(FinishLoadingEvent event) {
if (event.isMainFrame()) {
event.getBrowser().executeJavaScript("$('button').hide();")
}
});
InputStream urlStream = getClass().getResourceAsStream("/html/index.html");
String html = null;
try (BufferedReader urlReader = new BufferedReader(new InputStreamReader (urlStream))) {
StringBuilder builder = new StringBuilder();
String row;
while ((row = urlReader.readLine()) != null) {
builder.append(row);
}
html = builder.toString();
} catch (IOException e) {
throw new RuntimeException(e);
}
browser.loadHTML(html);
public static void main(String[] args) {
launch(args);
}
}
index.html
<html>
<head>
<title> boilerplate </title>
<link rel="stylesheet" href="style.css"/>
<style>
body{
padding-top: 5rem;
}
</style>
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
<a class = "navbar-brand" href="#"> Demo wertc </a>
</nav>
<div class = "container">
<div class = "row">
<div class="col-sm-6">
<h2>Reception</h2>
<video id="receiver-video" width="100%"height="400px"></video>
<p>
<button id="start">start the connection </button>
</p>
</div>
<div class="col-sm-6">
<h2>Envoi</h2>
<video id="emitter-video" width="100%"height="400px"></video>
</div>
</div>
<script src= "app.js"></script>
</body>
</html>
app.js
document.querySelector('#start').addEventListener('click',function(e){
navigator.getUserMedia({
video: true,
audio: true
},function (stream) {
let emitterVideo = document.querySelector('#emitter-video')
emitterVideo.src=window.URL.createObjectURL(stream)
emitterVideo.play()
}, function () {
})
})