|
1 | 1 | # VLC Player Plugin |
2 | | -Flutter plugin to view local videos and videos from the network. Work example: |
| 2 | +A VLC-powered alternative to Flutter's video_player that supports iOS and Android. |
| 3 | + |
3 | 4 | <img src="https://github.com/solid-software/flutter_vlc_player/blob/master/imgpsh_mobile_save.jfif?raw=true" width="200"> |
4 | | -## Getting Started |
5 | | -**iOS integration:** |
6 | | -For iOS you needed to add this two rows into Info.plist file (see example for details): |
7 | | -``` |
| 5 | + |
| 6 | +## Installation |
| 7 | + |
| 8 | +### iOS |
| 9 | +For iOS, you need to opt into the Flutter embedded views preview. |
| 10 | +This is done by adding the following to your project's `<project root>/ios/Runner/Info.plist` file (see example for details): |
| 11 | +```xml |
8 | 12 | <key>io.flutter.embedded_views_preview</key> |
9 | 13 | <true/> |
10 | 14 | ``` |
| 15 | + |
| 16 | +If you're unable to view media loaded from an external source, you should also add the following: |
| 17 | +```xml |
| 18 | +<key>NSAppTransportSecurity</key> |
| 19 | +<dict> |
| 20 | + <key>NSAllowsArbitraryLoads</key> |
| 21 | + <true/> |
| 22 | +</dict> |
| 23 | +``` |
| 24 | +For more information, or for more granular control over your App Transport Security (ATS) restrictions, you should |
| 25 | +[read Apple's documentation](https://developer.apple.com/documentation/bundleresources/information_property_list/nsapptransportsecurity/nsallowsarbitraryloads). |
| 26 | + |
| 27 | +> NOTE: While the Flutter `video_player` is not functional on iOS Simulators, this package (`flutter_vlc_player`) **is** |
| 28 | +> fully functional on iOS simulators. |
| 29 | +
|
| 30 | +### Android |
| 31 | +To load media from an internet source, your app will need the `INTERNET` permission. |
| 32 | +This is done by ensuring your `<project root>/android/app/src/main/AndroidManifest.xml` file contains a `uses-permission` |
| 33 | +declaration for `android.permission.INTERNET`: |
| 34 | +```xml |
| 35 | +<uses-permission android:name="android.permission.INTERNET" /> |
| 36 | +``` |
| 37 | + |
| 38 | +As Flutter includes this permission by default, the permission is likely already declared in the file. |
| 39 | + |
| 40 | +## Quick Start |
11 | 41 | To start using the plugin, copy this code or follow the [example](https://github.com/solid-software/flutter_vlc_player/tree/master/example): |
| 42 | + |
12 | 43 | ```dart |
13 | 44 | import 'package:flutter/material.dart'; |
14 | | -import 'package:flutter_vlc_player/vlc_player.dart'; |
15 | | -import 'package:flutter_vlc_player/vlc_player_controller.dart'; |
| 45 | +import 'package:flutter_vlc_player/flutter_vlc_player.dart'; |
16 | 46 |
|
17 | 47 | class ExampleVideo extends StatefulWidget { |
18 | 48 | @override |
19 | 49 | _ExampleVideoState createState() => _ExampleVideoState(); |
20 | 50 | } |
21 | 51 |
|
22 | 52 | class _ExampleVideoState extends State<ExampleVideo> { |
23 | | - final String urlToStreamVideo = 'http://213.226.254.135:91/mjpg/video.mjpg'; |
24 | | - final VlcPlayerController controller = VlcPlayerController(); |
| 53 | + final String urlToStreamVideo = 'http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_60fps_normal.mp4'; |
| 54 | + final VlcPlayerController controller = new VlcPlayerController( |
| 55 | + // Start playing as soon as the video is loaded. |
| 56 | + onInit: (){ |
| 57 | + controller.play(); |
| 58 | + } |
| 59 | + ); |
25 | 60 | final int playerWidth = 640; |
26 | 61 | final int playerHeight = 360; |
27 | 62 |
|
28 | 63 | @override |
29 | 64 | Widget build(BuildContext context) { |
30 | 65 | return Scaffold( |
31 | | - body: VlcPlayer( |
32 | | - defaultWidth: playerWidth, |
33 | | - defaultHeight: playerHeight, |
34 | | - url: urlToStreamVideo, |
35 | | - controller: controller, |
36 | | - placeholder: Center(child: CircularProgressIndicator()), |
37 | | - ), |
| 66 | + body: SizedBox( |
| 67 | + height: playerHeight, |
| 68 | + width: playerWidth, |
| 69 | + child: new VlcPlayer( |
| 70 | + aspectRatio: 16 / 9, |
| 71 | + url: urlToStreamVideo, |
| 72 | + controller: controller, |
| 73 | + placeholder: Center(child: CircularProgressIndicator()), |
| 74 | + ) |
| 75 | + ) |
38 | 76 | ); |
39 | 77 | } |
40 | 78 | } |
| 79 | +``` |
| 80 | + |
| 81 | +To take a screenshot from the video you can use `takeScreenshot`: |
| 82 | +```dart |
| 83 | +// Import typed_data for Uint8List. |
| 84 | +import 'dart:typed_data'; |
41 | 85 |
|
| 86 | +Uint8List image = await controller.takeSnapshot(); |
42 | 87 | ``` |
43 | 88 |
|
44 | | -To take screenshot from video just follow next code: |
| 89 | +This will return a Uint8List (binary data) for the image. |
| 90 | +You could then base-64 encode and upload this to a server, save it to storage or even display it in Flutter with an image widget as follows: |
45 | 91 | ```dart |
46 | | -Uint8List image = await controller.makeSnapshot(); |
| 92 | +Container( |
| 93 | + child: Image.memory(image) |
| 94 | +) |
47 | 95 | ``` |
| 96 | + |
| 97 | +## API |
| 98 | +```dart |
| 99 | +/// VlcPlayer widget. |
| 100 | +const VlcPlayer({ |
| 101 | + Key key, |
| 102 | + /// The [VlcPlayerController] that handles interaction with the platform code. |
| 103 | + @required this.controller, |
| 104 | + /// The aspect ratio used to display the video. |
| 105 | + /// This MUST be provided, however it could simply be (parentWidth / parentHeight) - where parentWidth and |
| 106 | + /// parentHeight are the width and height of the parent perhaps as defined by a LayoutBuilder. |
| 107 | + @required this.aspectRatio, |
| 108 | + /// This is the initial URL for the content. This also must be provided but [VlcPlayerController] implements |
| 109 | + /// [VlcPlayerController.setStreamUrl] method so this can be changed at any time. |
| 110 | + @required this.url, |
| 111 | + /// Before the platform view has initialized, this placeholder will be rendered instead of the video player. |
| 112 | + /// This can simply be a [CircularProgressIndicator] (see the example.) |
| 113 | + this.placeholder, |
| 114 | +}); |
| 115 | +``` |
| 116 | + |
| 117 | +```dart |
| 118 | +/// VlcPlayerController (passed to VlcPlayer widget as the controller parameter.) |
| 119 | +VlcPlayerController({ |
| 120 | + /// This is a callback that will be executed once the platform view has been initialized. |
| 121 | + /// If you want the media to play as soon as the platform view has initialized, you could just call |
| 122 | + /// [VlcPlayerController.play] in this callback. (see the example) |
| 123 | + VoidCallback onInit |
| 124 | +}){ |
| 125 | +
|
| 126 | + /*** PROPERTIES (Getters) ***/ |
| 127 | +
|
| 128 | + /// Once the [_methodChannel] and [_eventChannel] have been registered with |
| 129 | + /// the Flutter platform SDK counterparts, [hasClients] is set to true. |
| 130 | + /// At this point, the player is ready to begin playing content. |
| 131 | + bool hasClients = false; |
| 132 | +
|
| 133 | + /// This is set to true when the player has loaded a URL. |
| 134 | + bool initialized = false; |
| 135 | +
|
| 136 | + /// Returns the current state of the player. |
| 137 | + /// Valid states: |
| 138 | + /// - PlayingState.PLAYING |
| 139 | + /// - PlayingState.BUFFERING |
| 140 | + /// - PlayingState.STOPPED |
| 141 | + /// - null (When the player is uninitialized) |
| 142 | + PlayingState playingState; |
| 143 | +
|
| 144 | + /// The current position of the player, counted in milliseconds since start of |
| 145 | + /// the content. |
| 146 | + /// (SAFE) This value is always safe to use - it is set to Duration.zero when the player is uninitialized. |
| 147 | + int position = Duration.zero; |
| 148 | +
|
| 149 | + /// The total duration of the content, counted in milliseconds. |
| 150 | + /// (SAFE) This value is always safe to use - it is set to Duration.zero when the player is uninitialized. |
| 151 | + int duration = Duration.zero; |
| 152 | +
|
| 153 | + /// This is the dimensions of the content (height and width). |
| 154 | + /// (SAFE) This value is always safe to use - it is set to Size.zero when the player is uninitialized. |
| 155 | + Size size = Size.zero; |
| 156 | +
|
| 157 | + /// This is the aspect ratio of the content as returned by VLC once the content has been loaded. |
| 158 | + /// (Not to be confused with the aspect ratio provided to the [VlcPlayer] widget, which is simply used for an |
| 159 | + /// [AspectRatio] wrapper around the content.) |
| 160 | + double aspectRatio; |
| 161 | +
|
| 162 | + /// This is the playback speed as it is returned by VLC (meaning that this will not update until the actual rate |
| 163 | + /// at which VLC is playing the content has changed.) |
| 164 | + double playbackSpeed; |
| 165 | +
|
| 166 | + /*** METHODS ***/ |
| 167 | + /// [url] - the URL of the stream to start playing. |
| 168 | + /// This stops playback and changes the URL. Once the new URL has been loaded, the playback state will revert to |
| 169 | + /// its state before the method was called. (i.e. if setStreamUrl is called whilst media is playing, once the new |
| 170 | + /// URL has been loaded, the new stream will begin playing.) |
| 171 | + Future<void> setStreamUrl(String url); |
| 172 | +
|
| 173 | + Future<void> play(); |
| 174 | + Future<void> pause(); |
| 175 | + Future<void> stop(); |
| 176 | +
|
| 177 | + /// [time] - time in milliseconds to jump to. |
| 178 | + Future<void> setTime(int time); |
| 179 | +
|
| 180 | + /// [speed] - the rate at which VLC should play media. |
| 181 | + /// For reference: |
| 182 | + /// 2.0 is double speed. |
| 183 | + /// 1.0 is normal speed. |
| 184 | + /// 0.5 is half speed. |
| 185 | + Future<void> setPlaybackSpeed(double speed); |
| 186 | +
|
| 187 | + /// Returns binary data for a snapshot of the media at the current frame. |
| 188 | + Future<Uint8List> takeSnapshot(); |
| 189 | +
|
| 190 | + /// Disposes the platform view and unloads the VLC player. |
| 191 | + void dispose(); |
| 192 | +
|
| 193 | +} |
| 194 | +``` |
| 195 | + |
48 | 196 | ## Current issues |
49 | 197 | Current issues list [is here](https://github.com/solid-software/flutter_vlc_player/issues). |
50 | 198 | Found a bug? [Open the issue](https://github.com/solid-software/flutter_vlc_player/issues/new). |
0 commit comments