I'm trying to include a streaming service inside of an cordova hybrid app for iOS and Android. We chose red5pro because it is an 1 broadcaster to n subscriber situation and theirfor we need a server which is broadcasting to the subscribers. The broadcasting is simply done via webbrowser on a laptop and there is no problem with that but the recieving is going to be inside of the app.
red5pro has 3 example usecases for HTML streaming, native Android and native iOS. We are developing a hybrid mobile app, so we chose the HTML method.
We did a test setup on which you can open an URL in any webbrowser and see the steam, which works fine on firefox, chrome and safari. However, if we try to open the stream via chrome on an android device, we get the following error message:
2017-11-10T15:57:26.862Z - [red5pro-sdk] error: (RTCSubscriber) [onsdperror] red5pro-sdk.min.js:9
2017-11-10T15:57:26.877Z - [red5pro-sdk] error: (OperationError: Failed to set remote offer sdp: Session error code: ERROR_CONTENT. Session error description: Failed to set remote video description send parameters..) undefined red5pro-sdk.min.js:9
Uncaught (in promise) Invalid SDP.
value # red5pro-sdk.min.js:9
(anonymous) # red5pro-sdk.min.js:9
Promise rejected (async)
value # red5pro-sdk.min.js:9
value # red5pro-sdk.min.js:9
value # red5pro-sdk.min.js:9
value # red5pro-sdk.min.js:9
e.onmessage # red5pro-sdk.min.js:9
2017-11-10T15:57:26.889Z - [red5pro-sdk] error: (RTCSubscriber)[onsdperror] red5pro-sdk.min.js:9
2017-11-10T15:57:26.892Z - [red5pro-sdk] error: (OperationError: Failed to set local sdp: Session error code: ERROR_CONTENT. Session error description: Failed to set remote video description send parameters..) undefined red5pro-sdk.min.js:9
2017-11-10T15:57:31.059Z - [red5pro-sdk] error: (RTCSubscriber) Error in stream subscription: Session start failed for lukas.
"Invalid SDP" this message appears after the subscription to the stream is done.
My sample code for the client:
HTML:
<!doctype html>
<html>
<head>
<!-- Recommended shim for cross-browser WebRTC support. -->
<script src="https://webrtc.github.io/adapter/adapter-latest.js">
</script>
<!-- Default Red5 Pro Playback Control styles. -->
<link href="lib/red5pro/red5pro-media.css" rel="stylesheet">
<!-- Fullscreen shim. -->
<script src="lib/screenfull/screenfull.min.js"></script>
</head>
<body>
<video id="red5pro-subscriber"
class="red5pro-media red5pro-media-background"
autoplay controls>
</video>
<!-- Exposes `red5prosdk` on the window global. -->
<script src="lib/red5pro/red5pro-sdk.min.js"></script>
<!-- Example script below. -->
<script src="js/main.js"></script>
</body>
</html>
And the Main.js:
(function (red5prosdk) {
// Create a new instance of the WebRTC subcriber.
var subscriber = new red5prosdk.RTCSubscriber();
// Initialize
subscriber.init({
protocol: 'wss',
port: 8083,
host: 'our.host.url',
app: 'live',
streamName: 'chosenStreamname',
iceServers: [{urls: 'stun:stun2.l.google.com:19302'}],
bandwidth: {
audio: 56,
video: 128
}
})
.then(function(subscriber) {
// `subcriber` is the WebRTC Subscriber instance.
subscriber.subscribe();
})
.then(function(subscriber) {
// subscription is complete.
// playback should begin immediately due to
// declaration of `autoplay` on the `video` element.
})
.catch(function(error) {
// A fault occurred while trying to initialize and playback the stream.
console.error(error)
});
})(window.red5prosdk);
The stream is neither working on iOS safari nor on android chrome. Does someone has experience with such an setup and can help?
Related
below screen capture is chrome inspect console, inspecting some user's Android device.
I definitely have no idea about
why 1 or 2 out of almost hundred Android devices cause net::ERR_NAME_NOT_RESOLVED error.
below code is in my django template html file.
...
<script src="https://unpkg.com/react#17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/smoothscroll-polyfill#0.4.4/dist/smoothscroll.min.js" crossorigin></script>
</head>
not only unpkg react related src, but polyfill, static.ads-twitter and google-analytics also have same error 'net::ERR_NAME_NOT_RESOLVED'
does anyone could help me out how to resolve this issue?
resolved by adding 'react' and 'react-dom' as static files
I have a iOS and Android application, and I load a external website inside my app (this external website is mine too).
My problem is that this website has a file upload feature and this feature does not work on Android (it works on iOS).
I saw that this behavior is normal on Android, but is there any way to make it work or it's definitely not an option ?
Thank you
EDIT 1
I tried to create a new app with a simple page like this (hosted on AWS) :
<html>
<head>
<title>Upload Test !</title>
</head>
<body>
<div>Upload Test</div>
<div>
<input type="file" id="imgFile" name="files[]" accept="image/x-png, image/gif, image/jpeg">
</div>
</body>
and I added this script in my generated index.html in my Cordova project.
<script type="text/javascript">
document.addEventListener("deviceready", function(event) {
console.log('TEST CONSOLE LOG !');
var url = 'https://s3-eu-west-1.amazonaws.com/***/file-upload.html';
ref = window.open(url, "_blank", "location=no,toolbar=no,zoom=no,hidden=yes");
ref.addEventListener('loadstop', function () {
ref.show();
});
ref.addEventListener('loaderror', function () {
ref.close();
ref = undefined;
});
}, false);
</script>
It doesn't work on my nexus 5 (android M).
There's an issue with both Android and iOS that prevents file uploads when clicking on a file input tag like this within the inappbrowser:
<input type="file">
There's a couple of fixes for both which I've consolidated into a single location to make it easy for anyone else facing this issue. You should be able to modify your config.xml file to use it by including this:
<plugin spec="https://github.com/jverlee/cordova-plugin-inappbrowser-camera.git" version="1.1.0" source="git" />
Instead of the default inappbrowser plugin.
More details can be found here:
https://github.com/jverlee/cordova-plugin-inappbrowser-camera
#Verl's code is pretty good! However, it cannot be installed through his installation guide... So here is mine:
cordova plugin remove cordova-plugin-inappbrowser-camera
cordova plugin add https://github.com/jverlee/cordova-plugin-inappbrowser-camera.git
By the way, if I follow his guide, I only gets:
Error: Cannot read property 'variables' of undefined
I tried to write a mobile application for my web application. I have two application that both of them written with meteor.js. I run my web application simply with meteor command (run on http://localhost:3000) and then run my mobile application with this command:
export MONGO_URL=mongodb://localhost:3001/meteor
meteor run android-device --port 5000 --verbose
It's successfully run on port 5000 and I can run that from my browser but It's not working on mobile device.
On mobile I show a white page in mobile screen and this result on terminal as log:
=> Started app on Android Device. I20160225-16:16:49.717(3.5)
(android:file:///android_asset/www/meteor_cordova_loader.js:12) METEOR
CORDOVA DEBUG (meteor_cordova_loader.js) Loading from url:
http://meteor.local I20160225-16:16:53.683(3.5) (android:0)
'Range.detach' is now a no-op, as per DOM
(http://dom.spec.whatwg.org/#dom-range-detach).
I20160225-16:16:54.378(3.5)
(android:http://meteor.local/packages/autoupdate.js:338) METEOR
CORDOVA DEBUG (autoupdate_cordova.js) cordova.file.dataDirectory is
null, retrying in 20ms I20160225-16:16:55.008(3.5)
(android:http://meteor.local/packages/meteor.js:906) Exception from
Tracker recompute function: I20160225-16:16:55.010(3.5)?
I/chromium(14653): [INFO:CONSOLE(906)] "TypeError: undefined is not a
function I20160225-16:16:55.011(3.5)? I/chromium(14653): at
RouteController.extend.data
(http://meteor.local/app/client/views/index/indexController.js?817b64fb75670270418a553ed48a884bd8841492:17:32)
I20160225-16:16:55.012(3.5)? I/chromium(14653): at null._data
(http://meteor.local/packages/iron_controller.js?20327f0adf618028f4e33ee2fc6d6af85b26fc9f:220:50)
I20160225-16:16:55.013(3.5)? I/chromium(14653): at
DynamicTemplate.data
(http://meteor.local/packages/iron_dynamic-template.js?ebc5266f87a0be7618b1f690df32f1aa90ec89d7:213:50)
I20160225-16:16:55.013(3.5)? I/chromium(14653): at
http://meteor.local/packages/iron_dynamic-template.js?ebc5266f87a0be7618b1f690df32f1aa90ec89d7:246:25
I20160225-16:16:55.014(3.5)? I/chromium(14653): at
null.
(http://meteor.local/packages/blaze.js?9391df93ba5076c2cfc61ee68724eb79b65f00d9:2613:26)
I20160225-16:16:55.015(3.5)? I/chromium(14653): at
http://meteor.local/packages/blaze.js?9391df93ba5076c2cfc61ee68724eb79b65f00d9:1872:20
I20160225-16:16:55.015(3.5)? I/chromium(14653): at
Function.Template._withTemplateInstanceFunc
(http://meteor.local/packages/blaze.js?9391df93ba5076c2cfc61ee68724eb79b65f00d9:3671:12)
I20160225-16:16:55.016(3.5)? I/chromium(14653): at
http://meteor.local/packages/blaze.js?9391df93ba5076c2cfc61ee68724eb79b65f00d9:1870:29
I20160225-16:16:55.017(3.5)? I/chromium(14653): at
Object.Blaze._withCurrentView
(http://meteor.local/packages/blaze.js?9391df93ba5076c2cfc61ee68724eb79b65f00d9:2211:12)
I20160225-16:16:55.018(3.5)? I/chromium(14653): at viewAutorun
(http://meteor.local/packages/blaze.js?9391df93ba5076c2cfc61ee68724eb79b65f00d9:1869:18)",
source:
http://meteor.local/packages/meteor.js?9418708e9519b747d9d631d85ea85b90c0b5c70c
(906) I20160225-16:17:21.394(3.5)? I/chromium(15182):
[INFO:library_loader_hooks.cc(104)] Chromium logging enabled: level =
0, default verbosity = 0 I20160225-16:17:21.521(3.5)?
W/chromium(15182): [WARNING:resource_bundle.cc(304)]
locale_file_path.empty() I20160225-16:17:21.523(3.5)?
I/chromium(15182): [INFO:aw_browser_main_parts.cc(65)] Load from apk
succesful, fd=33 off=43796 len=3029 I20160225-16:17:21.524(3.5)?
I/chromium(15182): [INFO:aw_browser_main_parts.cc(78)] Loading
webviewchromium.pak from, fd:34 off:230172 len:1089587
I think in above message the key note is that refer to one of my files:
Exception from Tracker recompute function: "TypeError: undefined is
not a function
http://meteor.local/app/client/views/index/indexController.js?817b64fb75670270418a553ed48a884bd8841492:17:32)
And this is my indexController.js:
IndexController = RouteController.extend({
template: 'index',
waitOn: function () {
return [Meteor.subscribe('allRootCategories'), Meteor.subscribe('allRootArticles')];
},
data: function () {
return {
categories: Categories.find({}),
articles: Articles.find({})
}
},
action: function () {
this.render();
}
});
I also tried to add a mobile-config.js file with below content but nothing change:
App.accessRule('*');
What is the problem?
Update:
As #Phonolog say in comments I debug application with chrome inspect tools and I see that line 17 is my query line below:
categories: Categories.find({}),
I am trying to connect to server for fetching data using ajax call inside phonegap app.
But I am getting status 404 for every request I tried google.com, 10.0.2.2 (localhost on android).
Here are steps I followed for creating application
I created template application using phonegap command line as phonegap create my-app
Running application using phonegap run android ( This shows "device is ready" screen on emulator )
Added following code for making an Ajax call to index.js - receivedEvent function
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
console.log('rdy state - '+ xmlhttp.readyState);
console.log('status - '+ xmlhttp.status);
console.log('text status - '+ xmlhttp.statusText);
console.log('Response Text - '+ xmlhttp.responseText);
}
xmlhttp.open("GET","http://10.0.2.2/", true);
xmlhttp.send();
I can access http://10.0.2.2 from emulator browser.
Here is Enviornment I am using
Phonegap version - 3.4.0-0.19.8
Android version - 4.4.2
-- Vishal
Did you put an access token in your config.xml? Try to put
<access origin="*"/>
into your config.xml.
* gives access to all domain.
Look up http://docs.phonegap.com/en/3.4.0/guide_appdev_whitelist_index.md.html#Whitelist%20Guide for further information.
Despite you have:
<pre> <access origin="*"/> </pre> in config.xml
You need to add the whitelist to your phonegap(cordova) project:
phonegap plugin add cordova-plugin-whitelist
After this your app will no longer give 404.
jquery.mobile-1.3.2.min.js ,
jquery-ui.js(1.10.4) ,jquery-1.9.1.js not working on Android emulator using Phonegap.
Its showing error as "Uncaught TypeError: Property '$' of object [object Object] is not a function"
You need to include jQuery core library first before jQuery UI and jQuery Mobile, correct order should be:
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui.js"></script>
<script src="jquery.mobile-1.3.2.min.js"></script>
<script src="scripts.js"></script>
Also make sure that all the files are loaded properly with correct path as well as your custom jQuery code is running after you've included all of the relevant scripts. In above example, you can put your code inside scripts.js file.