Playing Vimeo videos in Flutter - android

I'm trying to play vimeo videos in flutter app using the video_player plugin but got no success, it's throwing bunch of errors.
please help me how I might go about implementing this in flutter app? using webview or any plugin etc? perhaps a code snippet would be huge help for me!
here is my code snippet
import 'package:video_player/video_player.dart';
import 'package:flutter/material.dart';
void main() => runApp(VideoApp());
class VideoApp extends StatefulWidget {
#override
_VideoAppState createState() => _VideoAppState();
}
class _VideoAppState extends State<VideoApp> {
VideoPlayerController _controller;
#override
void initState() {
super.initState();
_controller = VideoPlayerController.network(
'https://vimeo.com/{some-video-id}')
..initialize().then((_) {
// Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
setState(() {});
});
}
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Video Demo',
home: Scaffold(
body: Center(
child: _controller.value.initialized
? AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
)
: Container(),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_controller.value.isPlaying
? _controller.pause()
: _controller.play();
});
},
child: Icon(
_controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
),
),
),
);
}
#override
void dispose() {
super.dispose();
_controller.dispose();
}
}
THE ERROR IN DEBUG CONSOLE -
E/AccessibilityBridge(28662): VirtualView node must not be the root
node. E/ExoPlayerImplInternal(28662): Source error.
E/ExoPlayerImplInternal(28662):
com.google.android.exoplayer2.upstream.HttpDataSource$InvalidResponseCodeException:
Response code: 404 E/ExoPlayerImplInternal(28662): at
com.google.android.exoplayer2.upstream.DefaultHttpDataSource.open(DefaultHttpDataSource.java:300)
E/ExoPlayerImplInternal(28662): at
com.google.android.exoplayer2.upstream.StatsDataSource.open(StatsDataSource.java:83)
E/ExoPlayerImplInternal(28662): at
com.google.android.exoplayer2.source.ExtractorMediaPeriod$ExtractingLoadable.load(ExtractorMediaPeriod.java:885)
E/ExoPlayerImplInternal(28662): at
com.google.android.exoplayer2.upstream.Loader$LoadTask.run(Loader.java:381)
E/ExoPlayerImplInternal(28662): at
java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
E/ExoPlayerImplInternal(28662): at
java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
E/ExoPlayerImplInternal(28662): at
java.lang.Thread.run(Thread.java:919)

You cant use Vimeo URL https://vimeo.com/{some-video-id}. VideoPlayerController requires the streamable video URL.
Solution 1
Required premium account of Vimeo
go to https://vimeo.com/manage/ and select the video you want to play
select the distribution tab from the left side panel.
select video file link
select the play video.. copay the video link(its the mp4 stealable video link)..use this URL for VideoPlayerController.
Solution 2
Video link will expire in every 15 mins
call the API https://player.vimeo.com/video/{video_id}/config you will get the JSON response.
progressive object you will get mp4 video url .
Solution 3
Replace the video controller with webivew give this url
https://vimeo.com/{some-video-id} ..enable the javascript, video
will play in webview .

Install vimeoplayer: ^0.1.8 on pubspec
return Scaffold(
appBar: AppBar(title: Text('Video EasyRider')),
body: ListView(children: <Widget>[
VimeoPlayer(id: '123456789', autoPlay: false),
]));
}

You can use vimeo_player_flutter package to achieve this. It is easy & supports Android and IOS platforms. It works based on webview.
Refer this link for more details on this.

Related

flutter Problem in vs code (Unable to Load asset)

I'm having a problem in flutter on vs code
I imported the audioplayers
here's my pubspec.yaml
here's my homepage where I call the audio players
import 'package:flutter/material.dart';
import 'package:audioplayers/audioplayers.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({super.key});
#override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.brown,
title: Text('anghami'),
),
body: Container(
color: Colors.brown[200],
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Card(
child: ListTile(
title: Text(
"benab",
style: TextStyle(color: Colors.red),
),
//tileColor: Colors.red,
leading: Icon(Icons.music_note),
iconColor: Colors.red,
onTap: () async {
final player = AudioPlayer();
await player
.setSource(AssetSource('assets/music/music1.mp3'));
},
),
),
],
),
),
),
);
}
}
whenever i try to play the music from the phone I get this error
P.S: the vs code has no problem in loading images or using other type of assets .
i've tried using Audiocache it doesn't work especially they deleted it in the last version ^1.1.1 ,
[enter image description here][https://i.stack.imgur.com/u9kKR.png]
It seems you trying to load an asset in /assets/assets/music/ folder.
My guess is that you want to load an asset in /assets/music/ folder and it's a simple mistake.
To fix that:
// Replace the relative path of your asset below:
// assets/music/music1.mp3 -> music/music1.mp3
await player.setSource(AssetSource('music/music1.mp3'));
Just remove assets from your audio source like this:
await player.setSource(AssetSource('music/music1.mp3'));
Firstly, create a assets directory on the root of your project , then create music folder.
Try to play with
await player.setSource(AssetSource('music/music1.mp3'));
Hello guys the solutions here are useful , so the main problem that I had was in the path so after correction it loaded the asset in a normal way,
but instead of just loading the asset you want it to play obviously and that's guaranteed by using :
**final player = AudioPlayer();**
**await player.play(AssetSource('music/music1.mp3'));**

Flutter - Jitsi Meet Call backs in inAppWebView

I need to integrate Jitsi Meet in webview for our flutter application. Initially I used the following jitsi-meet plugin "https://pub.dev/packages/jitsi_meet" but unfortunately had to switch to InAppwebview plugin "https://pub.dev/packages/flutter_inappwebview" because of missing features such as jitsi reconnection after internet drop and participant information in jitsi-meet plugin. I have successfully integrated the jitsi in webview but have no idea how to include jitsi callbacks like onConferenceJoined, onParticipantLeft etc. Any help would be much appreciated
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:permission_handler/permission_handler.dart';
Future main() async {
WidgetsFlutterBinding.ensureInitialized();
await Permission.camera.request();
await Permission.microphone.request();
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(home: InAppWebViewPage());
}
}
class InAppWebViewPage extends StatefulWidget {
#override
_InAppWebViewPageState createState() => new _InAppWebViewPageState();
}
class _InAppWebViewPageState extends State<InAppWebViewPage> {
InAppWebViewController _webViewController;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("InAppWebView")),
body: Container(
child: Column(children: <Widget>[
Expanded(
child: Container(
child: InAppWebView(
initialUrl: "https://meet.jit.si/hello",
initialOptions: InAppWebViewGroupOptions(
crossPlatform: InAppWebViewOptions(
mediaPlaybackRequiresUserGesture: false,
debuggingEnabled: true,
),
),
onWebViewCreated: (InAppWebViewController controller) {
_webViewController = controller;
},
androidOnPermissionRequest:
(InAppWebViewController controller, String origin,
List<String> resources) async {
return PermissionRequestResponse(
resources: resources,
action: PermissionRequestResponseAction.GRANT);
}),
),
),
])));
}
}
Sorry to say, but you can't access such features through webview, because when you access thorough webview it's similar to open the site on the browser as a user. You can use Jitsi SDK or plugins which allow you to modify the settings.
Suggestion: Use the jitsi meet plugin which you had used before it already has such features as which you want:
onConferenceWillJoin Meeting is loading.
onConferenceJoined User has joined meeting.
onConferenceTerminated User has exited the conference.
onPictureInPictureWillEnter User entered PIP mode.
onPictureInPictureTerminated User exited PIP mode.
onError Error has occurred with listening to meeting events.
But there is no feature for participant information. But you can achieve this all by hosting your own jitsi server, which would allow you to either customize it or directly have such settings on your custom domain so that on the app you can simply access through webview.
I have used this plugin for a long time and made an app published on the play store. Check that out do you something similar to that? app name Just Meet. If you want like that then I can help you out with my repo.
Maybe you can use socket.io to communicate between the app and webview.

flutter: Another exception was thrown: NoSuchMethodError: The getter '_duration' was called on null

Hello developer i am using chewie plugin for playing live streaming video its is m3u8 video link when run it ios real device it give this exception "The getter '_duration' was called on null." on ios while its work fine on android device but ios real device. i dont know how solve issue on ios real device any expert developer is here is who can help solving this issue
here is exception.
flutter: Another exception was thrown: NoSuchMethodError: The getter '_duration' was called on null.
my code
import 'package:chewie/chewie.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:video_player/video_player.dart';
class ChewieListItem extends StatefulWidget {
// This will contain the URL/asset path which we want to play
final VideoPlayerController videoPlayerController;
final bool looping;
ChewieListItem({
#required this.videoPlayerController,
this.looping,
Key key,
}) : super(key: key);
#override
_ChewieListItemState createState() => _ChewieListItemState();
}
class _ChewieListItemState extends State<ChewieListItem> {
ChewieController _chewieController;
#override
void initState() {
super.initState();
// Wrapper on top of the videoPlayerController
_chewieController = ChewieController(
videoPlayerController: widget.videoPlayerController,
aspectRatio: 16 / 9,
// Prepare the video to be played and display the first frame
autoInitialize: true,
looping: widget.looping,
deviceOrientationsAfterFullScreen:[DeviceOrientation.portraitUp] ,
// Errors can occur for example when trying to play a video
// from a non-existent URL
errorBuilder: (context, errorMessage) {
return Center(
child: Text(
errorMessage,
style: TextStyle(color: Colors.white),
),
);
},
);
}
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Chewie(
controller: _chewieController,
),
);
}
#override
void dispose() {
super.dispose();
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
]);
// IMPORTANT to dispose of all the used resources
widget.videoPlayerController.dispose();
_chewieController.dispose();
_chewieController.pause();
}
}
streaming
child: Column(
children: <Widget>[
Expanded(
child: ChewieListItem(
videoPlayerController: VideoPlayerController.network(
'https://streamer12.vdn.dstreamone.net/livinghope/livinghope/playlist.m3u8',),
),
)

Flutter AWS : how to authenticate IAM role user of bucket and get AWS S3 object of hls video file and play in video player?

how to authenticate IAM role user by region, bucket id,access key and sceret key and get video file object and play in video player.
Actually we have uploaded video files in AWS S3 and given access grant to one IAM role user.
Now from the flutter app, I need to authenticate the IAM user by accesskey, secretkey, and get the video object & play in a video player without saving or downloading in local.
i tried with plugin,
flutter_aws_s3_client: ^0.5.0
const region = "<region>";
const bucketId = "<bucket id>";
final AwsS3Client s3client = AwsS3Client(
region: region,
host: "s3.$region.amazonaws.com",
bucketId: bucketId,
accessKey: "<accesskey>",
secretKey: "<secretkey>");
//object video name
final response = await s3client.getObject("example_test.m3u8");
here I got the object response as 200, but how can I pass and play this video file in the video player ? is there any way?
I have tried with adding HEADER in expo player android video_player_plugin.dart. but no luck.
video player Plugin
video_player: ^0.10.11+1
class _VideoAppState extends State<VideoApp> {
VideoPlayerController _controller;
#override
void initState() {
super.initState();
_controller = VideoPlayerController.network('//need to pass the videoUrl of AWS S3')
..initialize().then((_) {
setState(() {});
});
}
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Video Demo',
home: Scaffold(
body: Center(
child: _controller.value.initialized
? AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
)
: Container(),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_controller.value.isPlaying
? _controller.pause()
: _controller.play();
});
},
child: Icon(
_controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
),
),
),
);
}
so help me out how to solve this?
Thanks in advance
for that you need follow some steps
1:get access response
2: then redirect or call that video widget so you load that video

Flutter - How to download files in WebView?

I am using flutter_webview_plugin: ^0.3.8 but I have the same problem with webview_flutter: ^0.3.13.
In webview, I want to make use of a website which triggers a file download on successful completion of a captcha. However, I complete the captcha and nothing happens, no download.
Is there something in Flutter like a webview download listener ("webview.setDownloadListener")? I only need this for Android.
If not, is there a way of downloading files from a webview in Flutter?
A similar issue can be found here!
You can use my plugin flutter_inappwebview, which is a Flutter plugin that allows you to add inline WebViews or open an in-app browser window and has a lot of events, methods, and options to control WebViews. It can recognize downloadable files in both Android (using setDownloadListener) and iOS platforms!
I report here the same answer that I gave to the similar issue:
To be able to recognize downloadable files, you need to set the useOnDownloadStart: true option, and then you can listen the onDownloadStart event!
Also, for example, on Android you need to add write permission inside your AndroidManifest.xml file:
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
Then, you need to ask permission using the permission_handler plugin. Instead, to effectively download your file, you can use the flutter_downloader plugin.
Here is a complete example using http://ovh.net/files/ (in particular, the http://ovh.net/files/1Mio.dat as URL) to test the download:
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:flutter_downloader/flutter_downloader.dart';
import 'package:path_provider/path_provider.dart';
import 'package:permission_handler/permission_handler.dart';
Future main() async {
WidgetsFlutterBinding.ensureInitialized();
await FlutterDownloader.initialize(
debug: true // optional: set false to disable printing logs to console
);
await Permission.storage.request();
runApp(new MyApp());
}
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyApp> {
InAppWebViewController webView;
#override
void initState() {
super.initState();
}
#override
void dispose() {
super.dispose();
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('InAppWebView Example'),
),
body: Container(
child: Column(children: <Widget>[
Expanded(
child: InAppWebView(
initialUrl: "http://ovh.net/files/1Mio.dat",
initialHeaders: {},
initialOptions: InAppWebViewGroupOptions(
crossPlatform: InAppWebViewOptions(
debuggingEnabled: true,
useOnDownloadStart: true
),
),
onWebViewCreated: (InAppWebViewController controller) {
webView = controller;
},
onLoadStart: (InAppWebViewController controller, String url) {
},
onLoadStop: (InAppWebViewController controller, String url) {
},
onDownloadStart: (controller, url) async {
print("onDownloadStart $url");
final taskId = await FlutterDownloader.enqueue(
url: url,
savedDir: (await getExternalStorageDirectory()).path,
showNotification: true, // show download progress in status bar (for Android)
openFileFromNotification: true, // click on notification to open downloaded file (for Android)
);
},
))
])),
),
);
}
}
Here, as you can see, I'm using also the path_provider plugin to get the folder where I want to save the file.
just add this code to your AndroidManifest.xml
<provider
android:name="vn.hunghd.flutterdownloader.DownloadedFileProvider"
android:authorities="${applicationId}.flutter_downloader.provider"
android:exported="false"
android:grantUriPermissions="true">
<meta-data
android:name="android.support.FILE_PROVIDER_PATHS"
android:resource="#xml/provider_paths"/>
</provider>
and add this code to your AndroidManifest.xml
it works to me
it works for me
require plugin https://pub.dev/packages/url_launcher
add this code to your project to download file from flutter webview
onDownloadStart: (controller, url,) async {
// print("onDownloadStart $url");
final String _url_files = "$url";
void _launchURL_files() async =>
await canLaunch(_url_files) ? await launch(_url_files) : throw 'Could not launch $_url_files';
_launchURL_files();
},

Categories

Resources