I found some Android RTMP libraries (like this : http://rtmpdump.mplayerhq.hu/).
The problem is that there is no accurate documentation on how we can use it.
In my case, I have a simple RTMP live audio stream (ex: rtmp://myserver/myapp/myliveaudio).
What is the easiest way to read it in my Android app?
Please, I don't want links: I need some pieces of code or some accurate step-by-step explanation.
Thank you very much.
It is unfortunately non-trivially difficult to do. Right now your best bet is to look at the code in http://code.google.com/p/android-rtmp-client/: specifically look at http://code.google.com/p/android-rtmp-client/source/browse/trunk/example/com/ryong21/example/recorder/RecorderClient.java and http://code.google.com/p/android-rtmp-client/source/browse/trunk/example/com/ryong21/example/recorder/Recorder.java. These walk through taking in a streamed MP3 file and recording its contents to an FLV file on disk.
You would need to modify the RecorderClient.java file (specifically around line 193) to play the audio data out the speakers.
Not sure if this helps, but... I was able to do something similar (rtmp - streaming video) using Flash, so you need Android 2.2+ for this.
Anyway, I just wrote an HTML page displaying the flash video then opened the page in a WebView.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style type="text/css" media="screen">
html, body{
margin:0;
padding:0;
height:100%;
}
#altContent{
width:100%;
height:100%;
}
</style>
<title>YOUR TITLE HERE!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.HaloColor = "0x0086db";
flashvars.ToolTips = "true";
flashvars.AutoPlay = "true";
flashvars.VolumeLevel = "50";
flashvars.CaptionURL = "YOUR CAPTION HERE";
flashvars.Title = "YOUR TITLE HERE";
flashvars.Logo = "";
flashvars.SRC = "rtmp://YOUR STREAM URL HERE";
flashvars.BufferTime = "5";
flashvars.AutoHideControls = "false";
flashvars.IsLive = "true";
var params = {};
params.wmode = "transparent";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "L3MP";
swfobject.embedSWF("http://media-player.cdn.level3.net/flash/v1_1_1/Level3MediaPlayer.swf", "altContent", "100%", "100%", "10.1.0","http://media-player.cdn.level3.net/flash/v1_1_1/expressInstall.swf", flashvars, params, attributes);
</script>
</head>
<body>
<div id="altContent">
<center> <BR><BR><span style="color:red"><b>Please Install Adobe Flash Player</b>
</span><BR><BR>
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</center>
</div>
</body>
</html>
</script>
</html>
OK... now just save that in your assets folder in your project
and open it with something like this in your activity :
String LocalFile = "file:///android_asset/YOUR_HTML_FILE.htm";
WebView webView = (WebView) findViewById(R.id.YOUR_WEB_VIEW);
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setPluginsEnabled(true);
webSettings.setLoadWithOverviewMode(true);
webSettings.setUseWideViewPort(true);
webSettings.setAllowFileAccess(true);
webView.setBackgroundColor(Color.BLACK);
webView.setVerticalScrollBarEnabled(false);
webView.setHorizontalScrollBarEnabled(false);
webView.loadUrl(LocalFile);
Its a bit of a work around... Hope it works for you. CDub.
Related
Are there any libraries for panning audio left or right in Cordova/Phonegap/Ionic? Ideally, I would like to have a sound file and play it out of either the left or right headphone channel but not both.
I have looked at the cordova-media-plugin, cordova-native-audio, cordovoa-audioToggle, and soundJS/createJS. Of these, only soundJS & createJS seems to be able to control the headphone output and panning, but it doesn't seem like it works with Cordova. Also there are no examples for angular / cordova.
On Android 6.0, the following script works. It makes use of the Web Audio API. I have not yet tested it on iOS, but I have a good feeling it will work there (please comment if it does not).
You need an "omg.mp3" file in your root directory to test with. You also should build using Cordova and not worry about the CORS or Same-domain error you might get in your browser
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>StereoPannerNode example</title>
<link rel="stylesheet" href="">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h1>StereoPannerNode example</h1>
<audio controls>
<source src="omg.mp3" type="audio/mp3">
<p>Browser too old to support HTML5 audio? How depressing!</p>
</audio>
<h2>Set stereo panning</h2>
<input class="panning-control" type="range" min="-1" max="1" step="0.1" value="0">
<span class="panning-value">0</span>
</body>
<script>
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var myAudio = document.querySelector('audio');
var panControl = document.querySelector('.panning-control');
var panValue = document.querySelector('.panning-value');
// Create a MediaElementAudioSourceNode
// Feed the HTMLMediaElement into it
var source = audioCtx.createMediaElementSource(myAudio);
// Create a stereo panner
var panNode = audioCtx.createStereoPanner();
// Event handler function to increase panning to the right and left
// when the slider is moved
panControl.oninput = function() {
panNode.pan.value = panControl.value;
panValue.innerHTML = panControl.value;
}
// connect the AudioBufferSourceNode to the gainNode
// and the gainNode to the destination, so we can play the
// music and adjust the panning using the controls
source.connect(panNode);
panNode.connect(audioCtx.destination);
</script>
</html>
Actually I want to load complete site from internet link but i want to load css files from mobile (means not from internet). Because I want to load all page faster using internal local css file.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="dist/css/font-awesome.min.css" />
</head>
</html>
So Here I want to Load "bootstrap.min.css" and "font-awesome.min.css" from mobile memory only.
My Android Code :
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
String url = "http://www.MySiteName.com/";
view = (WebView) this.findViewById(R.id.webView);
view.getSettings().setJavaScriptEnabled(true); // Enable JavaScript Support
view.setWebViewClient(new WebViewClient()); // Links open or Navigate in same webView not in Browser
view.loadUrl(url);
}
Please put CSS in assets folder, and refer to CSS by relative path, and load HTML to WebView by loadDataWithBaseURL() method:
if your css file name is mycss.css
StringBuilder data = new StringBuilder();
data .append("<HTML><HEAD><LINK href=\"mycss.css\" type=\"text/css\" rel=\"stylesheet\"/></HEAD><body>");
data .append(tables.toString());
data .append("</body></HTML>");
webView.loadDataWithBaseURL("file:///android_asset/", data .toString(), "text/html", "utf-8", null);
thank you
Because the two other answers are just copy pastas and I happened to have the same issue I will help you with my solution:
You need to specify the file path in the head section of your html file.
Pay attention to the part after href
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="file:///android_asset/bootstrap.min.css" />
<link rel="stylesheet" href="file:///android_asset/font-awesome.min.css" />
</head>
</html>
I just can't get my head around why the other posters just copied and pasted and didn't even read what you were trying to tell them.
I hope this helps.
Be aware that your resources folder can be named differently.
I have a html file with css file. I want to load it into Webview. In the css file, i set font-weight for some elements in html file. But the problem is the webview cannot show the bold text that i set. In the list devices i tested: Nexus S, Nexus 4, Nexus 5, Nexus 7, Samsung S3, LG, only Nexus 7 can display the bold text.
I research many times but still no result. Do you have any ideas for this. Thanks you.
Here is my html file:
<link href="css/style.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<section id="answer_box"><!--解答ボックス-->
<p class="explain_title">正解</p>
<p class="answer_p"><span class="answer_no">イ</span> </p>
</section>
<section class="question_title_box">
<p class="question_main_title"><span class="question_no">１</span>リスニングテスト（放送による指示に従って答えなさい。）</p>
</section><!--question_title_box終わり-->
Here is my css file
p.question_title_box{
font-size: 15px;
font-weight: 600
}
Here is how i load html file:
wvQuestion = (WebView) findViewById(R.id.question_content);
WebSettings webSettings = wvQuestion.getSettings();
webSettings.setJavaScriptEnabled(true);
String url = "test.html";
wvQuestion.loadUrl(url);
assuming that your css file is stored in assets/css, you should be able to load it through loadDataWithBaseURL. E.g.
wvQuestion.loadDataWithBaseURL("file:///android_asset/css/", url, "text/html", "UTF-8", null);
I can't get Flowplayer to automatically play video in a WebView on Android. The video plays fine if the in-HTML play button is pressed, but it won't start by itself. This seems to be Chrome-related since autoplay doesn't work in the Android Chrome browser either. It does work in the stock Android browser and in Chrome for the (Linux) desktop.
I've seen this page that suggests adding a WEBM file to get MP4 content to work, but it didn't help. I've also seen this page that mentions using the new setting setMediaPlaybackRequiresUserGesture(), but that didn't help either.
Has anyone gotten autoplay to work in an Android WebView?
Here is my test code that distills the app down to its essentials.
package com.example.testautovideo;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends Activity {
#SuppressLint("SetJavaScriptEnabled")
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
WebView webview = new WebView(this);
setContentView(webview);
webview.setWebChromeClient(new WebChromeClient());
webview.getSettings().setJavaScriptEnabled(true);
webview.getSettings().setLoadsImagesAutomatically(true);
// webview.getSettings().setMediaPlaybackRequiresUserGesture(false); // didn't help
webview.setWebViewClient(new WebViewClient() {
#Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
return false;
}
});
webview.loadUrl(THE_URL);
}
}
Here is the source of my web page. The Flowplayer and jQuery calls are to standard installs. The Flowplayer library is the latest free version; the jQuery library is the latest production version.
<!DOCTYPE HTML>
<html>
<head>
<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1,target-densitydpi=device-dpi'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta property="ws:skip" value="false" />
<title>Autoplay Test</title>
<link rel="stylesheet" type="text/css" href="src/js/flowplayer/skin/minimalist.css">
<script type="text/javascript" src="src/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="src/js/flowplayer/flowplayer.min.js"></script>
<script>
$(document).ready(function(){
function playVideo(){
var player = flowplayer($('#theVideo'));
player.play();
}
setTimeout(playVideo,10);
});
</script>
<style>
body {
margin:0;
padding:0;
background:#000;
}
#wrapper .flowplayer {
width:640px;
height:360px;
}
#wrapper {
width:640px;
height:360px;
background:#000;
margin:30px auto;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="flowplayer" id="theVideo">
<video preload="none" autoplay>
<source type="video/webm" src="video_1.webm">
<source type="video/mp4" src="video_1.mp4">
</video>
</div>
</div>
</body>
</html>
I know links can go stale, but here's a copy of that web page with working Flowplayer and jQuery installs.
The following is an approach that works on all versions of Android down to Honeycomb (API 11), and perhaps earlier. The important part is to dynamically run load() and play() on the video via JavaScript. Even then, it doesn't always work on older versions of Android (with the setMediaPlaybackRequiresUserGesture() call, which was added in API 17, removed.
The WebView refuses to let the load/play start automatically, but it will let the Android app initiate it. It's desirable for the page itself to be able to determine when the video is started, rather than the app.
Here's what was done to get it all to work. First, a guard condition was put around around the setMediaPlaybackRequiresUserGesture() call to keep it from being run on pre-Jellybean MR1 devices. Then a small, single-method JavascriptInterface class was added and enabled. That method calls an on-page JavaScript method that loads and plays the page's video. Finally, the web pages were altered to call the exposed method when the video should be started. In the code below, the method is called when page has finished loading and the video is set to loop continuously.
Yes, there's a known security concern with enabling a JavascriptInterface class, but our's only has a single method and that method doesn't do anything other than call back into the calling JavaScipt.
The relevant parts of the app:
{
...
webView = (WebView) findViewById(id.web);
webView.setWebChromeClient(new WebChromeClient());
webView.getSettings().setJavaScriptEnabled(true);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1)
webView.getSettings().setMediaPlaybackRequiresUserGesture(false);
webView.addJavascriptInterface(new JsInterface(), "AndroidApp");
}
class JsInterface {
#JavascriptInterface
public void startVideo() {
Log.v(TAG, "in JsInterface.startVideo()");
MainActivity.this.runOnUiThread(new Runnable() {
#Override
public void run() {
Log.v(TAG, "in JsInterface.startVideo.run");
webView.loadUrl("javascript:playVideo()");
}
});
}
}
The web page:
<!DOCTYPE HTML>
<html>
<head>
<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1,target-densitydpi=device-dpi'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Autoplay Test</title>
<link rel="stylesheet" type="text/css" href="src/js/flowplayer/skin/minimalist.css">
<script type="text/javascript" src="src/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="src/js/flowplayer/flowplayer.min.js"></script>
<script type="text/javascript">
function playVideo(){
var player = flowplayer($('#theVideo'));
player.load('video_1.mp4');
player.bind("finish", function() {
player.play();
});
}
$(document).ready(function(){
AndroidApp.startVideo()
});
</script>
<style>
body {
margin:0;
padding:0;
background:#000;
}
#wrapper .flowplayer {
width:640px;
height:360px;
}
#wrapper {
width:640px;
height:360px;
background:#000;
margin:30px auto;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="flowplayer is-splash" id="theVideo">
<video preload="none">
<source type="video/mp4" src="">
</video>
</div>
</div>
</body>
</html>
You will definitely need to call setMediaPlaybackRequiresUserGesture(false) to get this to work. I can't see a problem with your HTML right away, does it work if you use javascript to call play() on the video element from an onload handler, say?
It's intended behavior that Chrome for Android does not support autoplay. But it should work in WebView when setMediaPlaybackRequiresUserGesture is false.
I wasn't able to get it working even with setMediaPlaybackRequiresUserGesture.
So what I did was a simple javascript call to the webpage.
public void triggerPlayVideo()
{
activity.runOnUiThread(new Runnable() {
#Override
public void run()
{
webView.loadUrl("javascript:playVideo()");
}
}
); }
This method is triggered once i receive an event from webview that the page got loaded/Video got loaded.
hi friends,
i want to load swf file in android emulator.but there is problem to display.
problem is when i run the project display blank white screen. here is the code ::
String url ="file:///android_asset/co.swf";
WebView wv=(WebView) findViewById(R.id.webview);
wv.getSettings().setPluginsEnabled(true);
wv.loadUrl(url);
is there any permission are give to manifest file?
I think you won't be able to access the swf direcly from webview. So instead you have to embed the swf file in html and then call that file instead.
This both files should be placed in assets folder inside your project.
So your HTML file will look somewhat like this
File:co.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
</head>
<body style="margin: 0; padding: 0">
<object id="i1">
<param name = "movie" value = "co.swf">
<embed src = "file:///android_asset/co.swf" ></embed>
</object>
<script>
var x = document.getElementById("i1")
x.setAttribute("height", screen.height);
x.setAttribute("width", screen.width);
</script>
</body>
</html>
In Java file:
setContentView(R.layout.activity_main);
WebView wv = (WebView)findViewById(R.id.webView1);
WebSettings ws = wv.getSettings();
ws.setPluginState(PluginState.ON);
ws.setJavaScriptEnabled(true);
ws.setAllowFileAccess(true);
wv.loadUrl("file:///android_asset/co.html");
And the main xml (activity) should contain a webview possibly with id webView1 which is automatically generated. This should work.