Flutter媒体播放插件ys_play的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter媒体播放插件ys_play的使用

ysPlay

Flutter萤石云直播插件，支持Android和iOS。

支持

  1. 账号对接（授权登录）
  2. 直播（可设置直播分辨率）
  3. 回放
  4. 直播、回放边播边录
  5. 直播、回放边播边截屏
  6. 云台控制
  7. 配网
  8. 对讲（包含半双工对讲和全双工对讲）

准备工作

集成之前，最好阅读官方文档.

安装

在pubspec.yaml文件中添加：

dependencies: 
    ys_play: ^0.1.0

工程配置

Android端

在 AndroidManifest.xml 文件中添加所需的权限：

<!-- 基础功能所需权限 -->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<!-- 配网所需权限 -->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CHANGE_WIFI_MULTICAST_STATE" />
<!-- 读取权限 选择本地相册-->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<!-- 存入权限 需要把拍摄的照片或视频存入-->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WAKE_LOCK"/>
<!-- 网络定位 -->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<!-- 麦克风权限-->
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>

在 app/build.gradle 中添加：

defaultConfig {
   ...
    ndk {
        abiFilters "armeabi-v7a", "arm64-v8a"
    }
}

sourceSets {
    main {
        jniLibs.srcDirs = ['libs']
    }
}

代码混淆：

#========SDK对外接口=======#
-keep class com.ezviz.opensdk.** { *;}

#========以下是hik二方库=======#
-dontwarn com.ezviz.**
-keep class com.ezviz.** { *;}

-dontwarn com.ez.**
-keep class com.ez.** { *;}

-dontwarn com.hc.CASClient.**
-keep class com.hc.CASClient.** { *;}

-dontwarn com.videogo.**
-keep class com.videogo.** { *;}

-dontwarn com.hik.TTSClient.**
-keep class com.hik.TTSClient.** { *;}

-dontwarn com.hik.stunclient.**
-keep class com.hik.stunclient.** { *;}

-dontwarn com.hik.streamclient.**
-keep class com.hik.streamclient.** { *;}

-dontwarn com.hikvision.sadp.**
-keep class com.hikvision.sadp.** { *;}

-dontwarn com.hikvision.netsdk.**
-keep class com.hikvision.netsdk.** { *;}

-dontwarn com.neutral.netsdk.**
-keep class com.neutral.netsdk.** { *;}

-dontwarn com.hikvision.audio.**
-keep class com.hikvision.audio.** { *;}

-dontwarn com.mediaplayer.audio.**
-keep class com.mediaplayer.audio.** { *;}

-dontwarn com.hikvision.wifi.**
-keep class com.hikvision.wifi.** { *;}

-dontwarn com.hikvision.keyprotect.**
-keep class com.hikvision.keyprotect.** { *;}

-dontwarn com.hikvision.audio.**
-keep class com.hikvision.audio.** { *;}

-dontwarn org.MediaPlayer.PlayM4.**
-keep class org.MediaPlayer.PlayM4.** { *;}
#========以上是hik二方库=======#

#========以下是第三方开源库=======#
# JNA
-dontwarn com.sun.jna.**
-keep class com.sun.jna.** { *;}

# Gson
-keepattributes *Annotation*
-keep class sun.misc.Unsafe { *; }
-keep class com.idea.fifaalarmclock.entity.***
-keep class com.google.gson.stream.** { *; }

# OkHttp
# JSR 305 annotations are for embedding nullability information.
-dontwarn javax.annotation.**
# A resource is loaded with a relative path so the package of this class must be preserved.
-keepnames class okhttp3.internal.publicsuffix.PublicSuffixDatabase
# Animal Sniffer compileOnly dependency to ensure APIs are compatible with older versions of Java.
-dontwarn org.codehaus.mojo.animal_sniffer.*
# OkHttp platform used only on JVM and when Conscrypt dependency is available.
-dontwarn okhttp3.internal.platform.ConscryptPlatform
# 必须额外加的，否则编译无法通过
-dontwarn okio.**
#========以上是第三方开源库=======#

iOS端

在 Info.plist 文件中添加：

  1. 相册权限：

    <key>NSPhotoLibraryAddUsageDescription</key>  
<string>$(PRODUCT_NAME)需要使用手机相册</string>  
<key>NSPhotoLibraryUsageDescription</key>  
<string>$(PRODUCT_NAME)需要使用手机相册</string>

  2. 麦克风权限：

    <key>NSMicrophoneUsageDescription</key>    
<string>$(PRODUCT_NAME)需要使用手机麦克风</string>

  3. 摄像头权限：

    <key>NSCameraUsageDescription</key>    
<string>$(PRODUCT_NAME)需要使用手机照相机</string>

  4. 配网权限：

    <key>NSLocalNetworkUsageDescription</key>  
<string>$(PRODUCT_NAME)需要使用本地网络权限用于wifi配网</string>  
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>  
<string>$(PRODUCT_NAME)需要使用定位权限用于wifi配网</string>  
<key>NSLocationAlwaysUsageDescription</key>
<string>$(PRODUCT_NAME)需要使用定位权限用于wifi配网</string>  
<key>NSLocationWhenInUseUsageDescription</key>  
<string>$(PRODUCT_NAME)需要使用定位权限用于wifi配网</string>

在 Xcode 中配置：

在 Xcode -> Runner -> Target -> Target-Signing & Capabilities 中，添加以下 2 项能力：

  1. Access WiFi Information (获取手机连接的 WiFi 名称，配网需要)
  2. Hotspot Configuration (连接指定 WiFi，配网需要)

注意：上述 2 项能力，同时需要在 App Store 官网证书上添加相关能力。

使用方式

具体请见 example 中的功能，里面有详细注释。

示例代码

import 'package:flutter/material.dart';
import 'package:oktoast/oktoast.dart';
import 'package:ys_play_example/home_page.dart';

// 配置参数
String appKey = '9ddc4fb7c0ef4996b04dd90156368f7c';
String accessToken = 'ra.bz92ts718snpgyaq0uo3phj9dwgwhlnq-490o8c9kzb-1wc7qfj-qxgzouvg1';
String deviceSerial = 'C63167422';
String verifyCode = 'PDSWCZ';
int cameraNo = 1;

void main() {
  // 初始化Flutter框架
  WidgetsFlutterBinding.ensureInitialized();
  // 启动应用
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 使用OKToast包裹整个应用，以提供Toast提示
    return OKToast(
      child: MaterialApp(
        // 设置首页为HomePage
        home: HomePage(),
      ),
    );
  }
}

更多关于Flutter媒体播放插件ys_play的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter媒体播放插件ys_play的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter项目中使用ys_play插件进行媒体播放的示例代码。ys_play是一个用于视频播放的Flutter插件，它提供了简单的API来播放视频。请注意，实际使用时请确保你已经在pubspec.yaml文件中添加了ys_play依赖，并运行flutter pub get来安装它。

首先，确保你的pubspec.yaml文件包含以下依赖：

dependencies:
  flutter:
    sdk: flutter
  ys_play: ^最新版本号  # 请替换为实际的最新版本号

然后，你可以按照以下步骤在你的Flutter项目中使用ys_play插件。

1. 导入插件

在你的Dart文件中导入ys_play插件：

import 'package:ys_play/ys_play.dart';

2. 初始化插件并创建视频播放器

在你的Flutter应用中，你可以使用YsPlayerController来初始化视频播放器。下面是一个简单的示例，展示如何在Flutter应用中嵌入并控制视频播放器。

import 'package:flutter/material.dart';
import 'package:ys_play/ys_play.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: VideoPlayerScreen(),
    );
  }
}

class VideoPlayerScreen extends StatefulWidget {
  @override
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  YsPlayerController? _controller;

  @override
  void initState() {
    super.initState();
    // 初始化YsPlayerController
    _controller = YsPlayerController.network(
      'https://www.example.com/your-video-url.mp4', // 替换为你的视频URL
      autoPlay: true, // 是否自动播放
      looping: false, // 是否循环播放
    )..initialize().then((_) {
      // 初始化完成后可以执行一些操作，例如设置监听器
      setState(() {});
    });
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('视频播放器示例'),
      ),
      body: Center(
        child: _controller?.value.isInitialized == true
            ? AspectRatio(
                aspectRatio: _controller!.value.aspectRatio,
                child: YsPlayer(
                  controller: _controller!,
                ),
              )
            : Container(
                child: CircularProgressIndicator(),
              ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            // 根据当前状态切换播放/暂停
            if (_controller!.value.isPlaying) {
              _controller!.pause();
            } else {
              _controller!.play();
            }
          });
        },
        tooltip: _controller!.value.isPlaying ? '暂停' : '播放',
        child: Icon(
          _controller!.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

3. 运行应用

将上述代码添加到你的Flutter项目中，并运行应用。你应该能够看到一个简单的视频播放器，它可以播放网络视频，并且有一个浮动操作按钮来控制播放和暂停。

注意事项

  • 确保你提供的视频URL是有效的。
  • ys_play插件可能会随着时间的推移而更新，因此请参考最新的文档和API更改。
  • 在实际开发中，你可能需要处理更多的状态（如加载失败、视频结束等），并添加适当的用户反馈。

这个示例代码提供了一个基本的框架，你可以在此基础上根据你的需求进行扩展和定制。

回到顶部