I am trying to stream video from Wowza to Android. I tried setting a MediaPlayer() and path "rtsp://184.72.239.149/vod/mp4:BigBuckBunny_175k.mov", but with no success. I get this:
ARTSPConnection: Server unexpectedly closed the connection.
Any suggestions on how I could solve this?
This is how we need to stream from wowza:
String SrcPath ="rtsp://184.72.239.149/vod/mp4:BigBuckBunny_115k.mov";
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
VideoView myVideoView = (VideoView)findViewById(R.id.myvideoview);
myVideoView.setVideoURI(Uri.parse(SrcPath));
Log.i("parse path",Uri.parse(SrcPath)+"");
myVideoView.setMediaController(new MediaController(this));
myVideoView.requestFocus();
myVideoView.start();}
But before you do this, copy 'bigbuckbunny' video file to 'vod' folder in your wowza setup.
Well my soltuion was to create a HTML page that would take as a parameter the RTMP url and using Flash Media Playback would play the stream through flash...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>#############</title>
<script type="text/javascript">
function resizeHandler()
{
var flash = document.getElementById("FlashMovie");
window.scrollTo(0, 1);
flash.focus();
flash.focus();
}
window.onresize = resizeHandler;
window.onload = resizeHandler;
</script>
</head>
<body style="margin:0; padding:0; background: #000;">
<div style="margin:0; padding:0; width:100%; height:100%">
<embed id="FlashMovie" style="width:100%; height:100%" src="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" fullScreenOnSelection="true" scale="showall" flashvars="src=rtmp%3A%2F%2F########%2Flive%2FmyStream.sdp&playButtonOverlay=true&loop=true&autoPlay=true&streamType=live&initialBufferTime=2" pluginspage="https://play.google.com/store/apps/details?id=com.adobe.flashplayer"></embed>
</div>
<br /><br /><br />
</body>
</html>
Related
I am learning to develop mobile app using Phonegap and jquery mobile.
I have the main page with a list (index.html).
If user taps on an item, it should go on the next page.
Now this next page takes the id of the item, and the next page (a separate html file, second.html) contains the details related to this item.
So I need to know the id of the item tapped on the main page, and this second.html should display data accordingly.
What I want to know is, what do I use to pass the id from main page to second page? I am currently trying to pass data by using GET parameter (second.html?id=xyz), but don't know how to catch it on the second page.
I also read a method using localstorage, But i am not sure if that is a good idea, considering this will go on with the user going to third page, fourth page, and so on. so there'll be a lot of data saving into the local storage.
First page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="js/Jquery/jquery.mobile-1.4.5.css" />
<title>Restaurant App</title>
<script type="text/javascript" src="js/configs/server.js"></script>
<script type="text/javascript" src="js/Jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/Jquery/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" id="local">
<div data-role="main" class="ui-content">
<h2> Nearby Restaurants</h2>
<ul data-role="listview" data-inset="true" id="nearbyrestaurs">
</ul>
<script type="text/javascript">
var li = "";
$.getJSON(hostname + "/restaurants/?format=json", function(data) {
$.each(data, function(item, value) {
li = "<li><a rel=external href='menu.html?restid=" + value["id"] + "'>";
li += "<img src='";
li += hostname;
li += value["dp"];
li += "' class='ui-li-icon'>";
li += value["name"]
li += "</a></li>";
$("#nearbyrestaurs").append(li).listview('refresh');
});
})
</script>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="js/Jquery/jquery.mobile-1.4.5.css" />
<title>Restaurant Menu</title>
<script type="text/javascript" src="js/configs/server.js"></script>
<script type="text/javascript" src="js/Jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/Jquery/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" id="menupage">
<script type="text/javascript">
</script>
<div data-role="main" class="ui-content">
<h2> Menu</h2>
<ul data-role="listview" data-inset="true" id="Menus">
</ul>
<script type="text/javascript">
$.urlParam = function(name) {
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(location.search);
if (results == null) {
return null;
} else {
return results[1] || 0;
}
}
var li = "";
restid = $.urlParam('restid');
$.getJSON(hostname + "/menus/?format=json&restid=" + restid, function(data) {
$.each(data, function(item, value) {
li = "<li><a href='";
li += "#"
li += "' class='ui-li-icon'>";
li += value["name"];
li += "</a></li>";
$("#Menus").append(li).listview('refresh');
});
})
</script>
</div>
</div>
</body>
</html>
You can use location.search:
var params = location.search;
Params will have ?id=xyz. After that you can parse the string to obtain what you want.
Here is a related question :
Passing Data between pages with JQuery Mobile
You have a function like this already:
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
Usage:
var yourId = getParameterByName('Id');
Maybe, your specific case could be:
$.getJSON(hostname + "/menus/?format=json&restid=" + $.urlParam('restid'), function(data) {
Or possibly:
$.getJSON(hostname + "/menus/?format=json&restid=" + getParameterByName('restid'), function(data) {
I'm using CordovaWebView in my android project.
When I run application app load catch and show a blank toast message.
and inside logcat i see an error that say file not exists in assets.
I added jar file to libraries and added CordovaWebView inside my activity layout
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="11"
android:orientation="vertical" >
<org.apache.cordova.CordovaWebView
android:id="#+id/tutorialView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
and used this code for loading html file from assets :
CordovaWebView cwv;
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_course);
try{
cwv = (CordovaWebView) findViewById(R.id.tutorialView);
cwv.loadUrlIntoView("file:///android_asset/test.html");
}
catch(Exception e)
{
ToastHelper.Long(e.getMessage());
}
}
html file exists in assets and I can load it using WebView (not CordovaWebView).
Please share with me your ideas to solving this problem.
Regards.
for index.html
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap Android App</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>
<style type="text/css">
#font-face {
font-family: AayatQuraan;
src: url("file:///android_asset/fonts/AayatQuraan.ttf")
}
body {
font-family: AayatQuraan;
font-size: 60px;
text-align: justify;
}
</style>
</head>
<body onload="init();" >
جميل
</body>
</html>
for java
package com.example.hellogap;
import org.apache.cordova.DroidGap;
import android.os.Bundle;
public class MainActivity extends DroidGap {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
super.setIntegerProperty("loadUrlTimeoutValue", 60000);
super.loadUrl("file:///android_asset/www/index.html",1000);
}
}
output something like this=
try to use
cwv.loadUrl("file:///android_asset/test.html");
instead of
cwv.loadUrlIntoView("file:///android_asset/test.html");
see this
https://web.archive.org/web/20140514125044/http://www.infil00p.org/advanced-tutorial-using-cordovawebview-on-android/
I am trying to get ng-views to work in android phoneapp app. I get the following
error when I trying to navigate to one of the views via hyperlink.
"Origin is not allowed by Access-Control-Allow-Origin"
I have tried modifying the the cordova,xml in the res folder with no luck.
From
<access origin="http://127.0.0.1*"/> <!-- allow local pages -->
To
<access origin="*"/>
Any advice is appreciated, below is the code.
Thanks.
HTML:
<html ng-app="AngApp">
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Minimal AppLaud App</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<script type="text/javascript" charset="utf-8" src="angular.js"></script>
<script type="text/javascript" charset="utf-8" src="app.js"></script>
<script type="text/javascript" charset="utf-8">
var onDeviceReady = function() {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
// The message from the service is appearing, so Angular seems
// to be working fine without having to bootstrap it.
//angular.bootstrap(document, ['AngApp']);
};
function init() {
document.addEventListener("deviceready", onDeviceReady, true);
}
</script>
</head>
<body onload="init();" id="stage" class="theme">
<h2>Angular App</h2><br/>
View1
View2
<hr/>
<div data-ng-controller="MainCtrl">
<p>{{Message}}</p>
<input type="text" data-ng-model="Message"/>
</div>
<hr/>
<div data-ng-view></div>
</body>
</html>
APP.JS:
var angApp = angular.module('AngApp',[]);
angApp.config(function ($compileProvider){
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
});
angApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: TestCtrl1,
templateUrl: 'view1.html'
})
.when('/view', {
controller: TestCtrl2,
templateUrl: 'view2.html'
});
});
angApp.factory('myService',function(){
return 'I am a service';
});
function MainCtrl($scope, myService){
$scope.Message = 'This is the main controller. '+ myService;
}
function TestCtrl1($scope){
$scope.Message = 'This is controller 1.';
}
function TestCtrl2($scope){
$scope.Message = 'This is controller 2.';
}
You are missing a # sign there in href="#/view".
I am new to programming phonegap apps. I have proved one simple phonegap app example and works fine on a Samsung Galaxy Mini, but doesn't in the Android emulator. The thing is, I want to show text when I click on a specific button inside the html.
App code is shown in below:
import android.os.Bundle;
import org.apache.cordova.*;
public class cordovaExample extends DroidGap
{
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
super.init();
MyClass js = new MyClass(this,appView);
appView.getSettings().setJavaScriptEnabled(true);
appView.addJavascriptInterface(js, "JS");
super.loadUrl(Config.getStartUrl());
}
}
public class MyClass
{
private WebView mAppView;
private DroidGap mGap;
Activity activity;
public MyClass(DroidGap gap, WebView view)
{
mAppView = view;
mGap = gap;
}
public String getText()
{
return "Hello World";
}
}
HTML code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<script type="text/javascript" src="cordova-2.5.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
function Showessage()
{
var element = document.getElementById('time');
element.innerHTML = 'First Message :'+ window.JS.getText() + '<br />';
//alert('hello');
}
</script>
</head>
<body>
<div class="app">
<h1 class="event received" >Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received" id ="time" onclick="Showessage()">Device is Ready</p>
</div>
</div>
</body>
</html>
you have not to load corodova.X.X.js just the cordova.js script.
so the inclusion should be:
<script type="text/javascript" src="cordova.js"></script>
<!--- NOT <script type="text/javascript" src="cordova-2.5.0.js"></script> -->
In my application when I move from index1.html to index2.html,It shows black screen while retriving large amount of data from the server, stored in local database and retrieving the data from local database in onload of index2.html.How to show the progress bar when the black screen is appeared or how to remove that black screen?.
update
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Login</title>
<script type="text/javascript" charset="utf-8" src="js/phonegap-1.0.0.js"></script>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript">
function submit()
{
alert("welcome");
window.open("index2.html");//while loading index2.html i need the progress bar
}
</script>
<style type="text/css">
.ex2{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-color:#FBB917;
border: 1px solid;
}
body {
font-family:Arial,Geneva,Verdana,sans-serif;
font-size: 0.8em;
overflow-x: hidden;
}
#loadingScreen {
background: url(images/ajax-loader.gif) no-repeat 5px 8px;
padding-left: 25px;
}
/* hide the close x on the loading screen */
.loadingScreenWindow .ui-dialog-titlebar-close {
display: none;
}
</style>
</head>
<body >
<input type="button" style="width:80%" value="Submit" onClick="submit()"/>
</body>
</html>
Android code
public class MobilyzerActivity extends DroidGap {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// setContentView(R.layout.main);
super.loadUrl("file:///android_asset/www/index.html");
}
}
If you are using frameworks like JQueryMobile then you have the option of showing loading dialog.
showing
$.mobile.showPageLoadingMsg()
hiding
$.mobile.hidePageLoadingMsg()
Are you using plain HTML?? any framework??