Android Question WebRTC page not showing

kostefar

Active Member
Licensed User
Longtime User
Dear All,

I´ve set up a node.js script that allows video communication between two peers, which works fine in the browsers on android 5.1.0 and 6.0.0, also chrome.
Accessing it through b4a however does not give me anything but a grey screen. This is the code:

B4X:
Sub Globals
 
Dim camview As WebView

End Sub

Sub Activity_Create(FirstTime As Boolean)
 
    Dim jme As JavaObject
    camview.Initialize("camview")
    jme.InitializeContext
    jme.RunMethod("SetWebChrome", Array(camview))
    Dim url As String =  "https://nameless-wildwood-15071.herokuapp.com/" & DateTime.now
    camview.LoadUrl(url)
    Log (url)
    Activity.AddView(camview,0,0,Activity.Width,Activity.Height)
End Sub

#if java

import android.widget.*;
import android.webkit.*;
public void SetWebChrome(WebView camview) {
   camview.setWebChromeClient(new WebChromeClient() {
     @Override
     public void onPermissionRequest(PermissionRequest request) {
       BA.Log("onPermissionRequest");
       request.grant(request.getResources());
     }
   });
}
#End If

I tried with an HTML5 wrapper found here as well - same result.

Any clues?

Thanks in advance!

EDIT: Relevant part of manifest:

B4X:
AddPermission(android.permission.CAMERA)
AddPermission(android.permission.CAPTURE_AUDIO_OUTPUT) ' Allows an application to capture audio output.
AddPermission(android.permission.CAPTURE_SECURE_VIDEO_OUTPUT) ' Allows an application to capture secure video output.
AddPermission(android.permission.CAPTURE_VIDEO_OUTPUT)

AddManifestText(
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/>
<uses-permission android:name="android.permission.CAMERA"></uses-permission>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
<uses-feature android:name="android.hardware.camera.front" />
<uses-feature android:name="android.hardware.audio.low_latency" />
<uses-feature android:name="android.hardware.audio.pro" />
<uses-feature android:name="android.hardware.microphone" android:required="true"/>
<uses-permission android:name="android.permission.RECORD_AUDIO" />
)
 
Last edited:

kostefar

Active Member
Licensed User
Longtime User
Last edited:
Upvote 0

kostefar

Active Member
Licensed User
Longtime User
Runtime permissions are only relevant if the targetSdkVersion is set to 23+.


You need to compare the Java code to the B4A code and see where are the differences.

Thanks Erel. Which part of the b4x code should I be looking at? Shouldn´t webviews by default from lollipop and up be compatible with HTML5 code? The page is simply blank, where if launching chrome under the android emulator, it all shows as it should.
 
Upvote 0

William Hunter

Active Member
Licensed User
Longtime User
@ kostefar - There's a very easy way to access WebRTC servers from B4A. Try using Intents as in the Sub below.
B4X:
Sub BtnConnect_Click
    Dim videofeedcount As String = DateTime.Now
    Dim i As Intent
    i.Initialize(i.ACTION_VIEW, "https://nameless-wildwood-15071.herokuapp.com" & videofeedcount)
    StartActivity(i)
End Sub

Best regards
 
Upvote 0

kostefar

Active Member
Licensed User
Longtime User
@ kostefar - There's a very easy way to access WebRTC servers from B4A. Try using Intents as in the Sub below.
B4X:
Sub BtnConnect_Click
    Dim videofeedcount As String = DateTime.Now
    Dim i As Intent
    i.Initialize(i.ACTION_VIEW, "https://nameless-wildwood-15071.herokuapp.com" & videofeedcount)
    StartActivity(i)
End Sub

Best regards

Thanks William, but there are a couple of problems with this:

1. The user MUST have downloaded google chrome, since this won´t work in the standard browser.
2. IF user has chrome, there´ll be a request to choose between browser and chrome - there could be a way though to override that though.
3. When intent is running, AFAIK you can´t close it from the app, so there you got a browser hanging in the background broadcasting cam if you use the android back button.

If you can prove me wrong, I´ll be a happy man :)

PS: I was a bit too fast before concluding that it works in the default browser; the logon page does (not the case in webview) but after logging into a room, again I get the grey screen. Not sure about if that´s why my initial attempt isn´t working either so I may need to get back to the beginning and find a way to get it running in the default browser first of all.
 
Last edited:
Upvote 0

William Hunter

Active Member
Licensed User
Longtime User
Thanks William, but there are a couple of problems with this:

1. The user MUST have downloaded google chrome, since this won´t work in the standard browser.
2. IF user has chrome, there´ll be a request to choose between browser and chrome - there could be a way though to override that though.
3. When intent is running, AFAIK you can´t close it from the app, so there you got a browser hanging in the background broadcasting cam if you use the android back button.

If you can prove me wrong, I´ll be a happy man :)
Hi kostefar - It seems I have taken a different approach than you. I have only been connecting through public accessible WebRTC servers, and my own WebRTC signalling server in Node.js.

1. Yes, both (all) participants must use a WebRTC enabled browser. the standard browser is not.
2. If the user has two browsers installed they will be presented with a view allowing them to choose which one to use, either once only or always.
3. On opening the browser my app closes, and the video chat is carried on in the browser.

I'm thinking that your nameless server is a WebRTC server. If not, anything I might suggest would not be of much help.

Regards
 
Last edited:
Upvote 0

kostefar

Active Member
Licensed User
Longtime User
@ kostefar - The attached ZIP file contains a project that I use to initiate video chats using any one of six publicly accessible WebRTC servers. This should be of some help to you, if this is the direction you wish to go. With WebRTC chats all participants must use a WebRTC enabled browser, such as Chrome or Firefox. Chrome is the best choice.

Regards

Thanks mate, I´ll have a look at it! I don´t want to rely on webrtc servers that may go offline all of a sudden though, which is why I´m setting up my own. For me the biggest problem with the intent approach is that the app closes, as the chat part must remain an integrated part of the app because of the concept.
I hope to get some inspiration from your project though, cheers and have a great weekend!
 
Upvote 0

kostefar

Active Member
Licensed User
Longtime User
Thanks William,

I can´t load it because it does not recognize "menuitem". Any clue which library this one comes from? Sure it´s ideal to test on real phones once all looks good in genymotion. Personally I just don´t like them.. only using mine for SMS´ing, taking notes, flashlight and a few other very basic things :)

For everybodys information: There seems to be a bug in how most, if not all, writers of webrtc scripts approached rendering of camera input, which results in that there´s just a black box instead of the video stream on marshmallow and onwards - on stock browsers. I´ve tried tons of demos now, and they all have this issue. Hopefully there´ll be some fixed versions coming out. Details here:

https://bugs.chromium.org/p/webrtc/issues/detail?id=5982
 
Upvote 0

William Hunter

Active Member
Licensed User
Longtime User
Curiosity got the best of me, so I did some testing of kostefar’s code. For those interested I have uploaded a ZIP file of the project and a few screen shots. JoWebRTC1.png was taken without adding camera/audio permissions to the Manifest. This produced the unable to access media error.

I then added kostefar’s camera/audio permissions to the Manifest. JoWebRTC2.png and joWebRTC3.png show that I was able to create a chat room on the appRTC server. There was no access to media error, but the camera did not turn on. There must be something else that is needed in the mix, but I don’t know what that might be. If anyone else has the answer I would be interested in knowing.

Regards

joWebRTC1.png joWebRTC2.png joWebRTC3.png
 

Attachments

  • joWebRTC.zip
    7.7 KB · Views: 334
Upvote 0

kostefar

Active Member
Licensed User
Longtime User
Curiosity got the best of me, so I did some testing of kostefar’s code. For those interested I have uploaded a ZIP file of the project and a few screen shots. JoWebRTC1.png was taken without adding camera/audio permissions to the Manifest. This produced the unable to access media error.

I then added kostefar’s camera/audio permissions to the Manifest. JoWebRTC2.png and joWebRTC3.png show that I was able to create a chat room on the appRTC server. There was no access to media error, but the camera did not turn on. There must be something else that is needed in the mix, but I don’t know what that might be. If anyone else has the answer I would be interested in knowing.

Regards

View attachment 54519 View attachment 54520 View attachment 54521

Yeah, I start doubting that we´ll have a way to resolve this within the scope of B4A´s webview, since it´s based on the stock browser, AND the problem occurs on the stockbrowser too in Marshmellow and Nougat. Please disregard other things I´ve said with regards to compatibility... after researching back and fourth and testing dozens of webrtc demos, this is the behavour all over the place - both on genymotion and the one Marshmallow device here in the house. Lollipop does the job, google chrome and opera does the job across multiple android versions, but not the stock browser. So indeed it seems to derive from the chromium bug I pasted a link to earlier. Installing the android system webview apk newest version doesn´t help either. I find it hard to understand how they can let the nextgen way of communicating in browsers become inaccesible on all modern mobiles and not getting it patched.
For developers the only alternative is to code something from scratch or hook up with some pay per minute/mb service which of course makes no sense when you can have free peertopeer.
 
Upvote 0

William Hunter

Active Member
Licensed User
Longtime User
@ kostefar - I did get the camera to turn on by initializing camview first. See the code below. I could not get it to run on any of my devices. I ran it on an AVD emulator for a Nexus S (4.0",480x800:hdpi) - Android 5.1.1 - API Level 22. The video displayed upside down, and the color was atrocious. I looked like member of the Blue Man Group. I think the problem is that the B4A WebView requires certain OS versions in this instance. :eek:
B4X:
Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    'Activity.LoadLayout("Layout1")
    camview.Initialize("camview")
    Dim jme As JavaObject
    jme.InitializeContext
    jme.RunMethod("SetWebChrome", Array(camview))
    Dim url As String = "https://appr.tc/r/opto" & videofeedcount
    ToastMessageShow(videofeedcount, False)
    camview.LoadUrl(url)
    Log (url)
    Activity.AddView(camview, 0, 0 , Activity.Width, Activity.Height)
End Sub
 
Upvote 0

kostefar

Active Member
Licensed User
Longtime User
@ kostefar - I did get the camera to turn on by initializing camview first. See the code below. I could not get it to run on any of my devices. I ran it on an AVD emulator for a Nexus S (4.0",480x800:hdpi) - Android 5.1.1 - API Level 22. The video displayed upside down, and the color was atrocious. I looked like member of the Blue Man Group. I think the problem is that the B4A WebView requires certain OS versions in this instance. :eek:
B4X:
Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    'Activity.LoadLayout("Layout1")
    camview.Initialize("camview")
    Dim jme As JavaObject
    jme.InitializeContext
    jme.RunMethod("SetWebChrome", Array(camview))
    Dim url As String = "https://appr.tc/r/opto" & videofeedcount
    ToastMessageShow(videofeedcount, False)
    camview.LoadUrl(url)
    Log (url)
    Activity.AddView(camview, 0, 0 , Activity.Width, Activity.Height)
End Sub

Hi William,

5.1.1 = Lollipop so it´ll work - not sure why it´s upside down though. Marshmallow is the major problem. Webview bases itself around the stock browser of the android device, and because of the stock browser issue in Marshmallow (android 6.0), it´s not working there. Let me know if you have succes with this on a Marshmallow device, phone or emulator, using the webview.
 
Last edited:
Upvote 0

William Hunter

Active Member
Licensed User
Longtime User
Hi William,

5.1.1 = Lollipop so it´ll work - not sure why it´s upside down though. Marshmallow is the major problem. Webview bases itself around the stock browser of the android device, and because of the stock browser issue in Marshmallow (android 6.0), it´s not working there. Let me know if you have succes with this on a Marshmallow device, phone or emulator, using the webview.
I won’t be persuing this further, as using Intents serves my purposes well. I think we will find that in the near future all mainstream browsers, irrespective of platform, will be WebRTC enabled. You may recall that the Windows version of Firefox had its Hello feature allowing the user to initiate chat rooms and to send email invitations. This, for some unknown reason was removed in Version 49. I wouldn’t be surprised if this feature soon became a standard in all browsers, which would render our efforts redundant.

EDIT: @kostefar - Check this out at the Google Play Store. It will be interesting reading for you.

https://play.google.com/store/apps/details?id=com.google.android.webview&hl=en
 
Last edited:
Upvote 0

kostefar

Active Member
Licensed User
Longtime User
Ok, finally I have made some progress! moster67 was absolutely right: It´s about the API23+ permissions that I had not studied carefully enough. I hate to have spent so much time on this, but I guess there were so many things making it look like the problem was something else, that I didn´t see how simple the solution was. It´s now running decently on lollipop and up, though lollipop crashes but that´s something I´ll ask about in another thread. Thanks for all good inputs to all of you, especially moster67!
 
Upvote 0

moster67

Expert
Licensed User
Longtime User
Glad that it got you a step ahead.

I really like the idea of WebRTC but I haven't been able to test it much.
In the past days, I have wrapped a library which handles "classic" RTSP (libstreaming is not maintained any longer and had various problems) but also RTMP. I have tested these protocols with Wowza but more importantly with SRS which is a free Streaming Server and which is working wonderfully on a decent VPS (such as those by DigitalOcean).
But I am going to look into WebRTC more profoundly in the next weeks.
 
Upvote 0

kostefar

Active Member
Licensed User
Longtime User
Hi moster67, Sounds cool! Looking forward to hear where you´re getting with that, especially because webrtc "only" works from Android and up. That leaves out 33 % of all Android users, of which more than half are on kitkat. The alternative would be a wrapper for crosswalk, which as far I understand can work on any android device. My first approach for video calls was flash based and I had it set up in no time - just to find out that it´s not been supported on Android for the last many versions. But I don´t see why RTSP shouldn´t be a good solution, if it can be done without the classic flash component.
 
Upvote 0
Top