Table of Contents:<\/h2>\n\n\n- Why Choose VdoCipher for Live Streaming?<\/a><\/li>\n
- Building a Low-Latency Flutter Live Stream App<\/a><\/li>\n
- Understanding Platform-Specific WebView Parameters<\/a><\/li>\n
- Secure DRM Video Streaming in Flutter Using the VdoCipher Package<\/a><\/li>\n
- Conclusion<\/a><\/li>\n
- FAQs Around Flutter Live Streaming Application<\/a><\/li>\n<\/ol>\n<\/div>\n<\/div>\n<\/div>\n
Why Choose VdoCipher for Live Streaming?<\/strong><\/h2>\nVdoCipher offers tools to make live streaming flexible, engaging, and friendly. Its features are designed to meet the demands of modern streaming, from education to entertainment.<\/p>\n
\n- DVR for Enhanced Flexibility<\/strong><\/li>\n<\/ol>\n
\n- Pause, Rewind, Replay:<\/strong> DVR empowers viewers to control the live stream, making it ideal for educational sessions or long events like webinars and matches.<\/li>\n
- Catch Up Anytime:<\/strong> Latecomers can rewind and join the stream seamlessly without missing key moments.<\/li>\n
- Smooth Experience:<\/strong> The DVR buffer (1\u20132 hours) ensures uninterrupted access to past sections while staying connected to live content.<\/li>\n<\/ul>\n
\n- Interactive Live Chat<\/strong><\/li>\n<\/ol>\n
\n- Real-Time Interaction:<\/strong> Engage your audience with live Q&A, polls, and discussions during streams.<\/li>\n
- Anonymous Contributions:<\/strong> Viewers can share questions or opinions without revealing their identity.<\/li>\n<\/ul>\n
<\/p>\n
\nExplore More \u2705
\nWith VdoCipher You Can Stream Your Content Live in 5 minutes<\/a><\/div>\n\nVdoCipher live can help you stream your content live to your users. You can also engage with your audience with the chat feature.<\/p>\n<\/div>\n<\/div>\n
QuickStart: Building a Low-Latency Flutter Live Stream App<\/strong><\/h2>\nIn this tutorial, we’ll quickly build a low-latency in-app live streaming experience. The live stream will be broadcast using VdoCipher\u2019s global network of servers.<\/p>\n
You will learn how to:<\/b><\/p>\n\n- Setting up a live stream from VdoCipher\u2019s dashboard.<\/li>\n
- Streaming from the OBS software application (or similar tools).<\/li>\n
- Streaming live videos in a Flutter application using VdoCipher.<\/li>\n<\/ol>\n
Set Up a Live Stream on VdoCipher\u2019s Dashboard<\/strong><\/h3>\nOpen the Live Stream section from the left menu in the VdoCipher dashboard and set up a live stream by pressing Create New Live Stream<\/b>.<\/p>\n
Note:<\/b> You can also schedule the live stream for later.<\/p>\n
![\"Live](\"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2024\/12\/1-1024x500.png\")
<\/a><\/p>\nNow enter a title for your live stream for reference and choose preferred chat mode then press the create button to generate streaming credentials for your live stream. Generating stream credentials, this might take up to 90 sec.<\/p>\n
Different chat modes and their meaning:<\/p>\n
\n- Anonymous\/Non-authenticated Chat: Allow anyone to join in the chats and set their own name<\/li>\n
- Authenticated Chat: Allow only viewers who have generated the tokens via logging into your platform, you can keep the same user name as on your platform.<\/li>\n
- Off : There will be no Chat Option.<\/li>\n<\/ul>\n
Streaming from OBS Studio Software Application<\/strong><\/h3>\nOnce streaming credentials are generated now you can use these credentials to start a video stream from an OBS Studio or any popular streaming software or Zoom.
\n<\/p>\n
Set Up OBS Studio for Streaming:<\/strong><\/p>\n\n- Setting up OBS studio<\/strong>(or any other streaming software)Install OBS studio<\/a> and change the OBS studio settings as mentioned below:\n
\n- Click on the \u201cSettings\u201d button, and then go to the \u201cOutput\u201d section. Some settings will look different on Mac vs Windows. But key settings are the same in both systems.<\/li>\n
- Choose \u201cVideo Bitrate\u201d as 2500 kbps for lecture\/webinar\/course content, if you have other forms of content like events\/sports\/movies, then you can also choose higher bitrates up to 7000 kbps. But 2500 kbps should be quite good for lecture content, and we recommend it.<\/li>\n
- Choose \u201cAudio Bitrate\u201d as 128.<\/li>\n
- Please keep the encoder preset and other settings to default settings. Setting \u2192 Output<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
<\/p>\n
![\"Video](\"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2024\/12\/Video-Audio-bitrate-settings-for-live-streaming-1024x441.png\")
<\/a><\/p>\n2.Frame Rate & Resolution: <\/b>Go to the \u201cVideo\u201d section and ensure that \u201cCommon FPS Values\u201d is 30. You can use 720p or 1080p resolution as needed.<\/p>\n
![\"FPS](\"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2024\/12\/FPS-settings-for-live-streaming-1024x399.png\")
<\/a><\/p>\n3. Server URL & Stream Key: <\/b>Now Go to OBS in Settings \u2192 Stream section. Copy and paste the server URL and stream key from the last step and paste them into OBS (Settings \u2192 Stream) respective fields. Click on OK.<\/p>\n
![\"Server](\"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2024\/12\/Server-URL-and-Stream-Key-1024x284.png\")
<\/a><\/p>\n4. Add a Source & Start Streaming: <\/b>Now add your video source in the OBS and click on \u201cstart streaming\u201d.<\/p>\n
Your content now flows to VdoCipher\u2019s servers and becomes accessible to your Flutter app.<\/p>\n
Stream Live Videos in a Flutter Application Using VdoCipher<\/strong><\/h3>\nGetting Started with Flutter Live Streaming.<\/strong><\/p>\nTo embed a live stream in your Flutter app, use the webview_flutter<\/b> plugin in combination with JWT (JSON Web Token) for authentication.<\/p>\n\u26a0\ufe0f Security Warning: Token generation must be performed on a secure backend server using your chat secret key. Never expose or use the chatSecret in your Flutter or any client-side code.<\/p><\/blockquote>\n
Here’s a step-by-step guide to implementing live streaming with VdoCipher.<\/p>\n
\n- Generate Token Securely on Backend<\/strong><\/li>\n<\/ol>\n
Here\u2019s an example using Node.js (JavaScript)<\/strong> to generate the JWT token securely:<\/p>\nimport * as jwt from 'jsonwebtoken';\r\n\r\nconst chatSecret = 'YOUR_CHAT_SECRET_KEY'; \/\/ Keep this secret and safe\r\n\r\nconst payload = {\r\n userId: 'uniqueUserId123', \/\/ must be unique for each user\r\n userInfo: {\r\n username: 'JohnDoe', \/\/ name shown in chat\r\n avatar: '', \/\/ optional avatar URL\r\n }\r\n};\r\n\r\nconst token = jwt.sign(payload, chatSecret); \/\/ Send this token to the app\r\n<\/code><\/pre>\nThis token<\/code> should be sent from your server to the Flutter app via a secure API endpoint.<\/p>\n\n- Flutter Code (Using Token from Backend)<\/strong><\/li>\n<\/ol>\n
Here\u2019s how to set up live streaming in your Flutter app. In this example, assume the token is securely generated on your backend and passed to the Flutter app:<\/p>\n
import 'package:flutter\/material.dart';\r\nimport 'package:webview_flutter\/webview_flutter.dart';\r\nimport 'package:webview_flutter_wkwebview\/webview_flutter_wkwebview.dart';\r\n\r\nclass VdoLiveStream extends StatefulWidget {\r\n const VdoLiveStream({Key? key}) : super(key: key);\r\n\r\n @override\r\n State<VdoLiveStream> createState() => _VdoLiveStreamState();\r\n}\r\n\r\nclass _VdoLiveStreamState extends State<VdoLiveStream> {\r\n late WebViewController controller;\r\n\r\n @override\r\n void initState() {\r\n super.initState();\r\n\r\n \/\/ Values retrieved from your backend\r\n const liveId = 'YOUR_LIVE_ID';\r\n const token = 'TOKEN_FROM_BACKEND'; \/\/ Secure token received from backend\r\n\r\n \/\/ Configure WebView parameters\r\n late final PlatformWebViewControllerCreationParams params;\r\n if (WebViewPlatform.instance is WebKitWebViewPlatform) {\r\n params = WebKitWebViewControllerCreationParams(\r\n allowsInlineMediaPlayback: true,\r\n mediaTypesRequiringUserAction: const <PlaybackMediaTypes>{},\r\n );\r\n } else {\r\n params = const PlatformWebViewControllerCreationParams();\r\n }\r\n\r\n \/\/ Initialize WebView controller\r\n controller = WebViewController.fromPlatformCreationParams(params)\r\n ..setJavaScriptMode(JavaScriptMode.unrestricted)\r\n ..setNavigationDelegate(NavigationDelegate(\r\n onPageStarted: (url) => print(\"Loading URL: $url\"),\r\n onPageFinished: (url) => print(\"Page Loaded: $url\"),\r\n onHttpError: (error) => print(\"HTTP Error: ${error.description}\"),\r\n onWebResourceError: (error) => print(\"Resource Error: ${error.description}\"),\r\n ))\r\n ..loadRequest(Uri.parse(\r\n '<https:\/\/player.vdocipher.com\/live?liveId=$liveId&token=$token>'));\r\n }\r\n\r\n @override\r\n Widget build(BuildContext context) {\r\n return Scaffold(body: WebViewWidget(controller: controller));\r\n }\r\n}\r\n<\/code><\/pre>\nKey Points<\/h3>\n\n- Authentication with JWT (If Chat Is Enabled)<\/strong>A JSON Web Token (JWT) is used for secure user authentication and is only required if the chat feature is enabled in your live stream.\u26a0\ufe0f Important:<\/strong> This token must be generated securely on your backend<\/strong> using your chat secret<\/strong>. Never include the secret or generate the token on the client side.<\/li>\n
- Embedding the Live Stream<\/strong>The WebView widget loads the VdoCipher live stream URL, which includes the liveId<\/strong>. If the chat feature is enabled, a token generated using JWT is also appended to the URL.<\/li>\n
- Platform-Specific WebView Configuration<\/strong>The code is compatible with both Android and iOS platforms, ensuring seamless functionality, including inline media playback.<\/li>\n<\/ol>\n
<\/p>\n
Steps to Implement<\/strong><\/h3>\n1. Install Required Packages<\/b><\/p>\n
Add the following packages to your pubspec.yaml file:<\/p>\n
dependencies:
\nflutter:
\nsdk: flutter
\nwebview_flutter: ^4.10.0
\nwebview_flutter_wkwebview: ^3.16.3<\/p>\n
2. Replace Placeholders<\/b> Update chatSecret and liveId with the values provided by VdoCipher.<\/p>\n
<\/b>3. Run the App<\/b> <\/b>Use flutter run to test the live stream functionality. <\/p>\nUnderstanding Platform-Specific WebView Parameters<\/strong><\/h2>\nWhen using WebView in Flutter, media playback is handled differently on iOS and Android. To ensure smooth functionality across platforms, specific configurations may be required based on the target platform.
\n
\nHere’s how the code addresses these differences:<\/p>\n
if (WebViewPlatform.instance is WebKitWebViewPlatform) {\r\n params = WebKitWebViewControllerCreationParams(\r\n allowsInlineMediaPlayback: true,\r\n mediaTypesRequiringUserAction: const {},\r\n );\r\n} else {\r\n params = const PlatformWebViewControllerCreationParams();\r\n}\r\n\r\n<\/pre>\nWhat Does This Code Do?<\/strong><\/h3>\nThis snippet checks whether the current platform uses WebKit, the web engine for iOS. If WebKit is detected, specific settings tailored for iOS are applied. Otherwise, it defaults to the standard settings, ensuring compatibility for Android.<\/p>\n
1. For iOS (WebKit)<\/b><\/p>\n\n- allowsInlineMediaPlayback: true<\/b>
\n<\/b>This enables videos to play directly within the WebView (inline) instead of switching to fullscreen mode. It\u2019s particularly useful for maintaining the video as part of your app\u2019s interface.<\/span><\/li>\n- mediaTypesRequiringUserAction: const <PlaybackMediaTypes>{}<\/b>
\n<\/b>By default, iOS requires the user to tap a play button before videos or audio can start. This setting removes that restriction, allowing the video to play automatically.<\/li>\n<\/ul>\n2. For Other Platforms (like Android)<\/b><\/p>\n
If the app is running on a platform other than iOS, the code uses the generic PlatformWebViewControllerCreationParams<\/b>. No additional configurations are applied, as they are not required for other platforms.<\/p>\nWhy Do You Need This?<\/strong><\/h3>\nWebView behaves differently on iOS and Android, especially when handling videos:<\/p>\n
\n- On iOS, videos don\u2019t play inline by default and may require user interaction. These parameters address that issue, making the behavior more user-friendly by allowing videos to play automatically within the WebView.<\/li>\n
- On Android, these settings aren\u2019t necessary because inline playback and autoplay are already supported by default, without requiring additional configuration.<\/li>\n<\/ul>\n
When Should You Change These?<\/strong><\/h3>\n\n- If you want videos to always play inline, keep the allowsInlineMediaPlayback<\/strong> setting set to true.<\/li>\n
- If you want users to manually tap play, add the required media types to mediaTypesRequiringUserAction<\/strong>.<\/li>\n<\/ul>\n
Secure DRM Video Streaming in Flutter Using the VdoCipher Package<\/strong><\/h2>\nVdoCipher is a platform designed to provide DRM protection and secure video hosting. It enables developers to easily integrate and stream protected video content. To further simplify this process for Flutter developers, VdoCipher offers the vdocipher_flutter package, a tool that allows the integration of DRM-protected video streaming into Flutter applications.<\/p>\n
Here, we\u2019ll explore:<\/p>\n
\n- Key features of the vdocipher_flutter<\/strong> package.<\/li>\n
- How to set it up in a Flutter project.<\/li>\n
- Step-by-step instructions to stream DRM-protected videos.<\/li>\n
- Best practices for secure and efficient video playback.<\/li>\n<\/ul>\n
Key features of the vdocipher_flutter Package<\/strong><\/h3>\nThe vdocipher_flutter<\/strong> package enables developers to securely integrate and stream DRM-protected videos within Flutter applications. It ensures smooth video playback while maintaining content protection in your Flutter app.<\/p>\nFeatures<\/b><\/p>\n\n- DRM Protection<\/b>
\n<\/b>Streams videos with Widevine and Fairplay DRM, protecting content from screen recording and piracy.<\/li>\n- Cross-Platform Support<\/b>
\n<\/b>It works seamlessly on Android, iOS, and the web, providing a consistent experience across all devices.<\/li>\n- Secure OTP-Based Authentication<\/b>
\n<\/b>Videos are played using a secure OTP and playbackInfo, ensuring that only authorized users can access the content.<\/li>\n- Inbuilt Player UI<\/b>
\n<\/b>The vdocipher_flutter<\/strong> package provides built-in controls for video playback, including play\/pause, a seekbar, fullscreen toggle, playback speed, subtitles, and chapters. These controls create a smoother user experience. This ready to use implementation saves time and eliminates the need for custom setup.<\/li>\n- Offline Playback<\/b>
\n<\/b>Supports secure video offline downloads<\/a> for offline viewing.<\/li>\n- Background Playback<\/b>
\n<\/b>Keeps videos playing even when the app is minimized or in the background, and allows controlling media playback through the notification controller.<\/li>\n- APIs to Monitor and Control Media Playback<\/b>
\n<\/b>Provides APIs to control media playback, track playback status, and monitor events such as play\/pause, current position, seeking, buffering, errors, and more.<\/li>\n<\/ul>\nHow to Set It Up in a Flutter Project<\/strong><\/h3>\nSetting up the vdocipher_flutter<\/b> package in your Flutter project is simple. Follow these steps to get started:<\/p>\n
1. Run this command with Flutter:<\/p>\n
$ flutter pub add vdocipher_flutter<\/pre>\nThis will add a line like this to your package’s pubspec.yaml<\/strong> (and run an implicit dart pub get<\/strong>)<\/p>\ndependencies:\r\n vdocipher_flutter: ^2.7.\r\n<\/pre>\n2. In android section use Theme.AppCompat theme<\/a> with MainActivity<\/strong>:
\nMake this change in android\/app\/src\/main\/res\/values\/styles.xml<\/strong>.<\/p>\n<style name=\"NormalTheme\" parent=\"Theme.AppCompat.Light.NoActionBar\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0....\r\n<\/style><\/pre>\n\ud83d\udca1There can be multiple styles.xml files depending on the project structure. Please make the above change in all of them, such as values-night\/styles.xml<\/strong> and values\/styles.xml<\/strong>.<\/p><\/blockquote>\n3. In android section extend the FlutterFragmentActivity class in your MainActivity<\/a> file:<\/p>\nMake this change in android\/app\/src\/main\/java\/com\/project-name\/MainActivity.java<\/strong>.<\/p>\nclass MainActivity extends FlutterFragmentActivity {\r\n}\r\n<\/pre>\n\ud83d\udca1Without using Theme.AppCompat theme<\/a> with MainActivity.java and extending from FlutterFragmentActivity<\/a>, as mentioned in the 2nd and 3rd steps, our plugin will throw exception. For a better understanding, please take a look at our sample app<\/a>.<\/p><\/blockquote>\nStep-by-Step Instructions to Stream DRM-Protected Videos<\/strong><\/h3>\nStreaming DRM-protected videos using the vdocipher_flutter<\/b> package requires a few steps. Here\u2019s a complete guide to help you get started:<\/p>\n
1. Fetch OTP and Playback Info
\n<\/b><\/b> \u2022 <\/b>To retrieve the OTP and playbackInfo for a video, you need to call the authenticated API endpoint: https:\/\/dev.vdocipher.com\/api\/videos\/{videoID}\/otp<\/strong>. For more details on authentication and usage, please refer to the documentation here<\/a>.
\n
\n\u2022 <\/b>The API will return the OTP and playbackInfo required to securely stream the video. Example response:
\n<\/p>\n{\r\n\u00a0\u00a0\"otp\": \"your_video_otp\",\r\n\u00a0\u00a0\"playbackInfo\": \"your_video_playback_info\"\r\n}<\/pre>\n
- \n
- Why Choose VdoCipher for Live Streaming?<\/a><\/li>\n
- Building a Low-Latency Flutter Live Stream App<\/a><\/li>\n
- Understanding Platform-Specific WebView Parameters<\/a><\/li>\n
- Secure DRM Video Streaming in Flutter Using the VdoCipher Package<\/a><\/li>\n
- Conclusion<\/a><\/li>\n
- FAQs Around Flutter Live Streaming Application<\/a><\/li>\n<\/ol>\n<\/div>\n<\/div>\n<\/div>\n
Why Choose VdoCipher for Live Streaming?<\/strong><\/h2>\n
VdoCipher offers tools to make live streaming flexible, engaging, and friendly. Its features are designed to meet the demands of modern streaming, from education to entertainment.<\/p>\n
- \n
- DVR for Enhanced Flexibility<\/strong><\/li>\n<\/ol>\n
- \n
- Pause, Rewind, Replay:<\/strong> DVR empowers viewers to control the live stream, making it ideal for educational sessions or long events like webinars and matches.<\/li>\n
- Catch Up Anytime:<\/strong> Latecomers can rewind and join the stream seamlessly without missing key moments.<\/li>\n
- Smooth Experience:<\/strong> The DVR buffer (1\u20132 hours) ensures uninterrupted access to past sections while staying connected to live content.<\/li>\n<\/ul>\n
- \n
- Interactive Live Chat<\/strong><\/li>\n<\/ol>\n
- \n
- Real-Time Interaction:<\/strong> Engage your audience with live Q&A, polls, and discussions during streams.<\/li>\n
- Anonymous Contributions:<\/strong> Viewers can share questions or opinions without revealing their identity.<\/li>\n<\/ul>\n
<\/p>\n
\nExplore More \u2705
\nWith VdoCipher You Can Stream Your Content Live in 5 minutes<\/a><\/div>\n\nVdoCipher live can help you stream your content live to your users. You can also engage with your audience with the chat feature.<\/p>\n<\/div>\n<\/div>\n
QuickStart: Building a Low-Latency Flutter Live Stream App<\/strong><\/h2>\n
In this tutorial, we’ll quickly build a low-latency in-app live streaming experience. The live stream will be broadcast using VdoCipher\u2019s global network of servers.<\/p>\n
You will learn how to:<\/b><\/p>\n
- \n
- Setting up a live stream from VdoCipher\u2019s dashboard.<\/li>\n
- Streaming from the OBS software application (or similar tools).<\/li>\n
- Streaming live videos in a Flutter application using VdoCipher.<\/li>\n<\/ol>\n
Set Up a Live Stream on VdoCipher\u2019s Dashboard<\/strong><\/h3>\n
Open the Live Stream section from the left menu in the VdoCipher dashboard and set up a live stream by pressing Create New Live Stream<\/b>.<\/p>\n
Note:<\/b> You can also schedule the live stream for later.<\/p>\n
<\/a><\/p>\nNow enter a title for your live stream for reference and choose preferred chat mode then press the create button to generate streaming credentials for your live stream. Generating stream credentials, this might take up to 90 sec.<\/p>\n
Different chat modes and their meaning:<\/p>\n
- \n
- Anonymous\/Non-authenticated Chat: Allow anyone to join in the chats and set their own name<\/li>\n
- Authenticated Chat: Allow only viewers who have generated the tokens via logging into your platform, you can keep the same user name as on your platform.<\/li>\n
- Off : There will be no Chat Option.<\/li>\n<\/ul>\n
Streaming from OBS Studio Software Application<\/strong><\/h3>\n
Once streaming credentials are generated now you can use these credentials to start a video stream from an OBS Studio or any popular streaming software or Zoom.
\n<\/p>\nSet Up OBS Studio for Streaming:<\/strong><\/p>\n
- \n
- Setting up OBS studio<\/strong>(or any other streaming software)Install OBS studio<\/a> and change the OBS studio settings as mentioned below:\n
- \n
- Click on the \u201cSettings\u201d button, and then go to the \u201cOutput\u201d section. Some settings will look different on Mac vs Windows. But key settings are the same in both systems.<\/li>\n
- Choose \u201cVideo Bitrate\u201d as 2500 kbps for lecture\/webinar\/course content, if you have other forms of content like events\/sports\/movies, then you can also choose higher bitrates up to 7000 kbps. But 2500 kbps should be quite good for lecture content, and we recommend it.<\/li>\n
- Choose \u201cAudio Bitrate\u201d as 128.<\/li>\n
- Please keep the encoder preset and other settings to default settings. Setting \u2192 Output<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
<\/p>\n
<\/a><\/p>\n2.Frame Rate & Resolution: <\/b>Go to the \u201cVideo\u201d section and ensure that \u201cCommon FPS Values\u201d is 30. You can use 720p or 1080p resolution as needed.<\/p>\n
<\/a><\/p>\n3. Server URL & Stream Key: <\/b>Now Go to OBS in Settings \u2192 Stream section. Copy and paste the server URL and stream key from the last step and paste them into OBS (Settings \u2192 Stream) respective fields. Click on OK.<\/p>\n
<\/a><\/p>\n4. Add a Source & Start Streaming: <\/b>Now add your video source in the OBS and click on \u201cstart streaming\u201d.<\/p>\n
Your content now flows to VdoCipher\u2019s servers and becomes accessible to your Flutter app.<\/p>\n
Stream Live Videos in a Flutter Application Using VdoCipher<\/strong><\/h3>\n
Getting Started with Flutter Live Streaming.<\/strong><\/p>\n
To embed a live stream in your Flutter app, use the webview_flutter<\/b> plugin in combination with JWT (JSON Web Token) for authentication.<\/p>\n
\u26a0\ufe0f Security Warning: Token generation must be performed on a secure backend server using your chat secret key. Never expose or use the chatSecret in your Flutter or any client-side code.<\/p><\/blockquote>\n
Here’s a step-by-step guide to implementing live streaming with VdoCipher.<\/p>\n
- \n
- Generate Token Securely on Backend<\/strong><\/li>\n<\/ol>\n
Here\u2019s an example using Node.js (JavaScript)<\/strong> to generate the JWT token securely:<\/p>\n
import * as jwt from 'jsonwebtoken';\r\n\r\nconst chatSecret = 'YOUR_CHAT_SECRET_KEY'; \/\/ Keep this secret and safe\r\n\r\nconst payload = {\r\n userId: 'uniqueUserId123', \/\/ must be unique for each user\r\n userInfo: {\r\n username: 'JohnDoe', \/\/ name shown in chat\r\n avatar: '', \/\/ optional avatar URL\r\n }\r\n};\r\n\r\nconst token = jwt.sign(payload, chatSecret); \/\/ Send this token to the app\r\n<\/code><\/pre>\nThis
token<\/code> should be sent from your server to the Flutter app via a secure API endpoint.<\/p>\n- \n
- Flutter Code (Using Token from Backend)<\/strong><\/li>\n<\/ol>\n
Here\u2019s how to set up live streaming in your Flutter app. In this example, assume the token is securely generated on your backend and passed to the Flutter app:<\/p>\n
import 'package:flutter\/material.dart';\r\nimport 'package:webview_flutter\/webview_flutter.dart';\r\nimport 'package:webview_flutter_wkwebview\/webview_flutter_wkwebview.dart';\r\n\r\nclass VdoLiveStream extends StatefulWidget {\r\n const VdoLiveStream({Key? key}) : super(key: key);\r\n\r\n @override\r\n State<VdoLiveStream> createState() => _VdoLiveStreamState();\r\n}\r\n\r\nclass _VdoLiveStreamState extends State<VdoLiveStream> {\r\n late WebViewController controller;\r\n\r\n @override\r\n void initState() {\r\n super.initState();\r\n\r\n \/\/ Values retrieved from your backend\r\n const liveId = 'YOUR_LIVE_ID';\r\n const token = 'TOKEN_FROM_BACKEND'; \/\/ Secure token received from backend\r\n\r\n \/\/ Configure WebView parameters\r\n late final PlatformWebViewControllerCreationParams params;\r\n if (WebViewPlatform.instance is WebKitWebViewPlatform) {\r\n params = WebKitWebViewControllerCreationParams(\r\n allowsInlineMediaPlayback: true,\r\n mediaTypesRequiringUserAction: const <PlaybackMediaTypes>{},\r\n );\r\n } else {\r\n params = const PlatformWebViewControllerCreationParams();\r\n }\r\n\r\n \/\/ Initialize WebView controller\r\n controller = WebViewController.fromPlatformCreationParams(params)\r\n ..setJavaScriptMode(JavaScriptMode.unrestricted)\r\n ..setNavigationDelegate(NavigationDelegate(\r\n onPageStarted: (url) => print(\"Loading URL: $url\"),\r\n onPageFinished: (url) => print(\"Page Loaded: $url\"),\r\n onHttpError: (error) => print(\"HTTP Error: ${error.description}\"),\r\n onWebResourceError: (error) => print(\"Resource Error: ${error.description}\"),\r\n ))\r\n ..loadRequest(Uri.parse(\r\n '<https:\/\/player.vdocipher.com\/live?liveId=$liveId&token=$token>'));\r\n }\r\n\r\n @override\r\n Widget build(BuildContext context) {\r\n return Scaffold(body: WebViewWidget(controller: controller));\r\n }\r\n}\r\n<\/code><\/pre>\nKey Points<\/h3>\n
- \n
- Authentication with JWT (If Chat Is Enabled)<\/strong>A JSON Web Token (JWT) is used for secure user authentication and is only required if the chat feature is enabled in your live stream.\u26a0\ufe0f Important:<\/strong> This token must be generated securely on your backend<\/strong> using your chat secret<\/strong>. Never include the secret or generate the token on the client side.<\/li>\n
- Embedding the Live Stream<\/strong>The WebView widget loads the VdoCipher live stream URL, which includes the liveId<\/strong>. If the chat feature is enabled, a token generated using JWT is also appended to the URL.<\/li>\n
- Platform-Specific WebView Configuration<\/strong>The code is compatible with both Android and iOS platforms, ensuring seamless functionality, including inline media playback.<\/li>\n<\/ol>\n
<\/p>\n
Steps to Implement<\/strong><\/h3>\n
1. Install Required Packages<\/b><\/p>\n
Add the following packages to your pubspec.yaml file:<\/p>\n
dependencies:
\nflutter:
\nsdk: flutter
\nwebview_flutter: ^4.10.0
\nwebview_flutter_wkwebview: ^3.16.3<\/p>\n2. Replace Placeholders<\/b> Update chatSecret and liveId with the values provided by VdoCipher.<\/p>\n
<\/b>3. Run the App<\/b> <\/b>Use flutter run to test the live stream functionality. <\/p>\n
Understanding Platform-Specific WebView Parameters<\/strong><\/h2>\n
When using WebView in Flutter, media playback is handled differently on iOS and Android. To ensure smooth functionality across platforms, specific configurations may be required based on the target platform.
\n
\nHere’s how the code addresses these differences:<\/p>\nif (WebViewPlatform.instance is WebKitWebViewPlatform) {\r\n params = WebKitWebViewControllerCreationParams(\r\n allowsInlineMediaPlayback: true,\r\n mediaTypesRequiringUserAction: const {},\r\n );\r\n} else {\r\n params = const PlatformWebViewControllerCreationParams();\r\n}\r\n\r\n<\/pre>\nWhat Does This Code Do?<\/strong><\/h3>\n
This snippet checks whether the current platform uses WebKit, the web engine for iOS. If WebKit is detected, specific settings tailored for iOS are applied. Otherwise, it defaults to the standard settings, ensuring compatibility for Android.<\/p>\n
1. For iOS (WebKit)<\/b><\/p>\n
- \n
- allowsInlineMediaPlayback: true<\/b>
\n<\/b>This enables videos to play directly within the WebView (inline) instead of switching to fullscreen mode. It\u2019s particularly useful for maintaining the video as part of your app\u2019s interface.<\/span><\/li>\n- mediaTypesRequiringUserAction: const <PlaybackMediaTypes>{}<\/b>
\n<\/b>By default, iOS requires the user to tap a play button before videos or audio can start. This setting removes that restriction, allowing the video to play automatically.<\/li>\n<\/ul>\n2. For Other Platforms (like Android)<\/b><\/p>\n
If the app is running on a platform other than iOS, the code uses the generic PlatformWebViewControllerCreationParams<\/b>. No additional configurations are applied, as they are not required for other platforms.<\/p>\n
Why Do You Need This?<\/strong><\/h3>\n
WebView behaves differently on iOS and Android, especially when handling videos:<\/p>\n
- \n
- On iOS, videos don\u2019t play inline by default and may require user interaction. These parameters address that issue, making the behavior more user-friendly by allowing videos to play automatically within the WebView.<\/li>\n
- On Android, these settings aren\u2019t necessary because inline playback and autoplay are already supported by default, without requiring additional configuration.<\/li>\n<\/ul>\n
When Should You Change These?<\/strong><\/h3>\n
- \n
- If you want videos to always play inline, keep the allowsInlineMediaPlayback<\/strong> setting set to true.<\/li>\n
- If you want users to manually tap play, add the required media types to mediaTypesRequiringUserAction<\/strong>.<\/li>\n<\/ul>\n
Secure DRM Video Streaming in Flutter Using the VdoCipher Package<\/strong><\/h2>\n
VdoCipher is a platform designed to provide DRM protection and secure video hosting. It enables developers to easily integrate and stream protected video content. To further simplify this process for Flutter developers, VdoCipher offers the vdocipher_flutter package, a tool that allows the integration of DRM-protected video streaming into Flutter applications.<\/p>\n
Here, we\u2019ll explore:<\/p>\n
- \n
- Key features of the vdocipher_flutter<\/strong> package.<\/li>\n
- How to set it up in a Flutter project.<\/li>\n
- Step-by-step instructions to stream DRM-protected videos.<\/li>\n
- Best practices for secure and efficient video playback.<\/li>\n<\/ul>\n
Key features of the vdocipher_flutter Package<\/strong><\/h3>\n
The vdocipher_flutter<\/strong> package enables developers to securely integrate and stream DRM-protected videos within Flutter applications. It ensures smooth video playback while maintaining content protection in your Flutter app.<\/p>\n
Features<\/b><\/p>\n
- \n
- DRM Protection<\/b>
\n<\/b>Streams videos with Widevine and Fairplay DRM, protecting content from screen recording and piracy.<\/li>\n- Cross-Platform Support<\/b>
\n<\/b>It works seamlessly on Android, iOS, and the web, providing a consistent experience across all devices.<\/li>\n- Secure OTP-Based Authentication<\/b>
\n<\/b>Videos are played using a secure OTP and playbackInfo, ensuring that only authorized users can access the content.<\/li>\n- Inbuilt Player UI<\/b>
\n<\/b>The vdocipher_flutter<\/strong> package provides built-in controls for video playback, including play\/pause, a seekbar, fullscreen toggle, playback speed, subtitles, and chapters. These controls create a smoother user experience. This ready to use implementation saves time and eliminates the need for custom setup.<\/li>\n- Offline Playback<\/b>
\n<\/b>Supports secure video offline downloads<\/a> for offline viewing.<\/li>\n- Background Playback<\/b>
\n<\/b>Keeps videos playing even when the app is minimized or in the background, and allows controlling media playback through the notification controller.<\/li>\n- APIs to Monitor and Control Media Playback<\/b>
\n<\/b>Provides APIs to control media playback, track playback status, and monitor events such as play\/pause, current position, seeking, buffering, errors, and more.<\/li>\n<\/ul>\nHow to Set It Up in a Flutter Project<\/strong><\/h3>\n
Setting up the vdocipher_flutter<\/b> package in your Flutter project is simple. Follow these steps to get started:<\/p>\n
1. Run this command with Flutter:<\/p>\n
$ flutter pub add vdocipher_flutter<\/pre>\n
This will add a line like this to your package’s pubspec.yaml<\/strong> (and run an implicit dart pub get<\/strong>)<\/p>\n
dependencies:\r\n vdocipher_flutter: ^2.7.\r\n<\/pre>\n
2. In android section use Theme.AppCompat theme<\/a> with MainActivity<\/strong>:
\nMake this change in android\/app\/src\/main\/res\/values\/styles.xml<\/strong>.<\/p>\n<style name=\"NormalTheme\" parent=\"Theme.AppCompat.Light.NoActionBar\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0....\r\n<\/style><\/pre>\n
\ud83d\udca1There can be multiple styles.xml files depending on the project structure. Please make the above change in all of them, such as values-night\/styles.xml<\/strong> and values\/styles.xml<\/strong>.<\/p><\/blockquote>\n
3. In android section extend the FlutterFragmentActivity class in your MainActivity<\/a> file:<\/p>\n
Make this change in android\/app\/src\/main\/java\/com\/project-name\/MainActivity.java<\/strong>.<\/p>\n
class MainActivity extends FlutterFragmentActivity {\r\n}\r\n<\/pre>\n\ud83d\udca1Without using Theme.AppCompat theme<\/a> with MainActivity.java and extending from FlutterFragmentActivity<\/a>, as mentioned in the 2nd and 3rd steps, our plugin will throw exception. For a better understanding, please take a look at our sample app<\/a>.<\/p><\/blockquote>\n
Step-by-Step Instructions to Stream DRM-Protected Videos<\/strong><\/h3>\n
Streaming DRM-protected videos using the vdocipher_flutter<\/b> package requires a few steps. Here\u2019s a complete guide to help you get started:<\/p>\n
1. Fetch OTP and Playback Info
\n<\/b><\/b> \u2022 <\/b>To retrieve the OTP and playbackInfo for a video, you need to call the authenticated API endpoint: https:\/\/dev.vdocipher.com\/api\/videos\/{videoID}\/otp<\/strong>. For more details on authentication and usage, please refer to the documentation here<\/a>.
\n
\n\u2022 <\/b>The API will return the OTP and playbackInfo required to securely stream the video. Example response:
\n<\/p>\n{\r\n\u00a0\u00a0\"otp\": \"your_video_otp\",\r\n\u00a0\u00a0\"playbackInfo\": \"your_video_playback_info\"\r\n}<\/pre>\n - Cross-Platform Support<\/b>
- If you want users to manually tap play, add the required media types to mediaTypesRequiringUserAction<\/strong>.<\/li>\n<\/ul>\n
- If you want videos to always play inline, keep the allowsInlineMediaPlayback<\/strong> setting set to true.<\/li>\n
- mediaTypesRequiringUserAction: const <PlaybackMediaTypes>{}<\/b>
- Embedding the Live Stream<\/strong>The WebView widget loads the VdoCipher live stream URL, which includes the liveId<\/strong>. If the chat feature is enabled, a token generated using JWT is also appended to the URL.<\/li>\n
- Authentication with JWT (If Chat Is Enabled)<\/strong>A JSON Web Token (JWT) is used for secure user authentication and is only required if the chat feature is enabled in your live stream.\u26a0\ufe0f Important:<\/strong> This token must be generated securely on your backend<\/strong> using your chat secret<\/strong>. Never include the secret or generate the token on the client side.<\/li>\n
- Flutter Code (Using Token from Backend)<\/strong><\/li>\n<\/ol>\n
- Generate Token Securely on Backend<\/strong><\/li>\n<\/ol>\n
- Setting up OBS studio<\/strong>(or any other streaming software)Install OBS studio<\/a> and change the OBS studio settings as mentioned below:\n
- Anonymous Contributions:<\/strong> Viewers can share questions or opinions without revealing their identity.<\/li>\n<\/ul>\n
- Real-Time Interaction:<\/strong> Engage your audience with live Q&A, polls, and discussions during streams.<\/li>\n
- Catch Up Anytime:<\/strong> Latecomers can rewind and join the stream seamlessly without missing key moments.<\/li>\n
- Pause, Rewind, Replay:<\/strong> DVR empowers viewers to control the live stream, making it ideal for educational sessions or long events like webinars and matches.<\/li>\n
- Building a Low-Latency Flutter Live Stream App<\/a><\/li>\n