基于 FFmpeg 的跨平台视频播放器简明教程（十二）：Android SurfaceView 显示图片和播放视频

系列文章目录

  1. 基于 FFmpeg 的跨平台视频播放器简明教程（一）：FFMPEG + Conan 环境集成
  2. 基于 FFmpeg 的跨平台视频播放器简明教程（二）：基础知识和解封装（demux）
  3. 基于 FFmpeg 的跨平台视频播放器简明教程（三）：视频解码
  4. 基于 FFmpeg 的跨平台视频播放器简明教程（四）：像素格式与格式转换
  5. 基于 FFmpeg 的跨平台视频播放器简明教程（五）：使用 SDL 播放视频
  6. 基于 FFmpeg 的跨平台视频播放器简明教程（六）：使用 SDL 播放音频和视频
  7. 基于 FFmpeg 的跨平台视频播放器简明教程（七）：使用多线程解码视频和音频
  8. 基于 FFmpeg 的跨平台视频播放器简明教程（八）：音画同步
  9. 基于 FFmpeg 的跨平台视频播放器简明教程（九）：Seek 策略
  10. 基于 FFmpeg 的跨平台视频播放器简明教程（十）：在 Android 运行 FFmpeg
  11. 基于 FFmpeg 的跨平台视频播放器简明教程（十一）：一种简易播放器的架构介绍

前言

上一章中我们介绍了一个简易的播放器架构，对之前零碎的代码片段进行了组织和重构，形成了较为灵活的一种架构设计，它非常简单，但足够满足我们的需求。

现在，接着我们在 Android 上的旅程。今天我们来讨论如何在 Android 上显示画面。

Android 原生的 Java/Kotlin 接口播放视频还是很容易的，有 MediaController、MediaPlayer 等类可以直接使用，相关教程参考Android实现视频播放的3种实现方式。

由于我们的代码几乎都是 C/C++ ，因此需要找到一种从 Native 层进行视频播放的方法。这里要介绍的是 SurfaceView + Native 的显示方式。

Android 图像绘制介绍

关于 Android 图像绘制系统网上有很多文章说的较为清楚了，例如

  • 从整体上看Android图像显示系统
  • Android图形系统综述(干货篇)

这些内容中，我们要重点关注 BufferQueue 中生产者与消费者之间的关系
在这里插入图片描述

例如：一个Activity是一个Surface、一个Dialog也是一个Surface，承载了上层的图形数据，与SurfaceFlinger侧的Layer相对应。

Native层Surface实现了ANativeWindow结构体，在构造函数中持有一个IGraphicBufferProducer，用于和 BufferQueue 进行交互。
————————————————
版权声明：本文为CSDN博主「Jason_Lee155」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/jason_lee155/article/details/121663662

有了上述的基本认识后，接下来我们介绍 SurfaceView

Android 中 Surface 与 SurfaceView

关于 Surface 的介绍文章有：

  • 浅谈Android Surface机制
  • 深入Android系统（十二）Android图形显示系统-1-显示原理与Surface

总结下上述文章的对我们来说重要的理解内容：

  1. 无论开发者使用什么渲染API，一切内容都会渲染到Surface上；Surface中会关联一个BufferQueue用于提供图像数据缓存
  2. Suface 继承自 ANativeWindow，可以通过 dequeueBuffer，queueBuffer，lockBuffer 等接口拿到 BufferQueue 中的 Buffer 对象

关于 SurfaceView 的介绍文章有：

  • Android音视频开发系列-SurfaceView介绍
  • SurfaceView 与 TextureView 详解

总结下上述文章对我们来说的重点内容：

  1. SurfaceView和宿主窗口是分离的。正常情况下窗口的View共享同一个Window，而Window也对应一个Surface，所有View也就共享同一个Surface。而 SurfaceView 具备独立的Surface，相当于和宿主窗口绘制是分离互不干扰。
  2. SurfaceView 的核心在于提供了两个线程：UI线程和渲染线程,两个线程通过“双缓冲”机制来达到高效的界面适时更新

OK，我们将上面的知识串起来：

  1. SurfaceView 持有一个 Surface。
  2. 通过 Surface 我们能够获取到 BufferQueue 中的一个 Buffer。
  3. 将图像绘制到这个 Buffer 后，就能正确的显示图像。
  4. SurfaceView 中的 Surface 与其他窗口的 View 是独立的，我们可以在另一个线程中去渲染它

JNI SurfaceView 显示图片

在了解了 Surface 和 SurfaceView 后，我们现在已经能够做到使用 JNI（NDK）和 SurfaceView 来显示一张图片了，具体代码在 T02DisplayImageActivity 中，现在做一些代码上的解释。

class T02DisplayImageActivity : AppCompatActivity() {
    private lateinit var mSurfaceView: MySurfaceView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_display_image)

        // get image bitmap
        val options = BitmapFactory.Options()
        options.inScaled = false
        val bitmap = BitmapFactory.decodeResource(resources, R.drawable.test, options)

        mSurfaceView = findViewById(R.id.surfaceView_display_image)
        mSurfaceView.setAspectRation(bitmap.width, bitmap.height)

        mSurfaceView.holder.addCallback(object: SurfaceHolder.Callback{
            override fun surfaceCreated(holder: SurfaceHolder) {
                val surface = holder.surface
                renderImage(surface, bitmap)
            }

            override fun surfaceChanged(p0: SurfaceHolder, format: Int, width: Int, height: Int) {
            }

            override fun surfaceDestroyed(p0: SurfaceHolder) {
            }

        })
    }

    external fun renderImage(surface: Surface, bitmap: Bitmap);
}
  1. 我们在 R.layout.activity_display_image 中布局中放置一个 MySurfaceView 用于显示图片。MySurfaceView 继承自 SurfaceView，并且做了一些方法的重写，这部分后面再细说。
  2. 通过 BitmapFactory 来读取一张图片，用于显示
  3. 接下来，添加了一个SurfaceHolder的回调函数，用于监听SurfaceView的生命周期。具体来说：surfaceCreated()方法在SurfaceView创建时被调用，其中的holder参数表示SurfaceView的SurfaceHolder对象，可以通过它获取到Surface对象。在这个方法中，调用了renderImage()函数，将bitmap渲染到Surface上。
  4. 现在看看 renderImage 方法做了什么，代码如下：

extern "C"
JNIEXPORT void JNICALL
Java_com_example_videoplayertutorials_T02DisplayImageActivity_renderImage(JNIEnv *env,
                                                                          jobject thiz,
                                                                          jobject surface,
                                                                          jobject bitmap) {
  AndroidBitmapInfo info;
  AndroidBitmap_getInfo(env, bitmap, &info);

  char *data = NULL;
  AndroidBitmap_lockPixels(env, bitmap, (void **) &data);

  ANativeWindow *nativeWindow = ANativeWindow_fromSurface(env, surface);
  ANativeWindow_setBuffersGeometry(nativeWindow, info.width, info.height,
                                   AHARDWAREBUFFER_FORMAT_R8G8B8A8_UNORM);

  ANativeWindow_Buffer buffer;
  ANativeWindow_lock(nativeWindow, &buffer, NULL);

  auto *data_src_line = (int32_t *) data;
  const auto src_line_stride = info.stride / sizeof(int32_t);

  auto *data_dst_line = (uint32_t *) buffer.bits;
  for (int y = 0; y < buffer.height; y++) {
    std::copy_n(data_src_line, buffer.width, data_dst_line);

    data_src_line += src_line_stride;

    data_dst_line += buffer.stride;
  }

  ANativeWindow_unlockAndPost(nativeWindow);
  AndroidBitmap_unlockPixels(env, bitmap);

  ANativeWindow_release(nativeWindow);
}

  1. 通过AndroidBitmap_getInfo函数获取Bitmap的信息，包括宽度、高度、格式等。

  2. 通过AndroidBitmap_lockPixels函数锁定Bitmap的像素，防止在操作过程中被其他线程修改。

  3. 通过ANativeWindow_fromSurface函数获取Surface对应的ANativeWindow。

  4. 通过ANativeWindow_setBuffersGeometry函数设置ANativeWindow的缓冲区大小和格式。注意，这里我们设置的格式是 AHARDWAREBUFFER_FORMAT_R8G8B8A8_UNORM，也就是 RGBA 格式，因为我们的数据源 bitmap 它就是 RGBA 格式的。你可以在 AHardwareBuffer_Format 找到所有支持的格式，其中 YUV420 也是支持的。

  5. 通过ANativeWindow_lock函数锁定ANativeWindow的缓冲区，准备写入数据。

  6. 将Bitmap的像素数据复制到ANativeWindow的缓冲区。

  7. 通过ANativeWindow_unlockAndPost函数解锁ANativeWindow的缓冲区，并将缓冲区的内容显示到屏幕上。

  8. 通过AndroidBitmap_unlockPixels函数解锁Bitmap的像素。

  9. 通过ANativeWindow_release函数释放ANativeWindow。

如果你的代码正确，那么可以看到图片正常显示，如下图：

正确的 View 大小

为了说明 View 大小的问题，让我们先将代码中的 MySurfaceView 全部改为 SurfaceView，运行代码后，你会发现图片显示时被拉伸填充了，如下图：

额，所以这是为啥嘞？让我们来分析分析：

  1. 首先，在 ANativeWindow_setBuffersGeometry 中，我们对 Buffer 大小和格式进行了设置，它的大小与图片大小是一致的。只有与 Buffer 大小一致，才能正确地将所有图片数据拷贝到 Buffer 上。所以这里是没问题的。
  2. 通过 Android Studio 的 Layout Inspector 工具，可以看到 Surface View 填满了整个屏幕
    在这里插入图片描述
  3. 也就是说 Buffer 中图片，被 Android 系统做了 resize 使其填充到整个屏幕了。因此导致了图像的拉伸情况。

了解了原因，那么如何解决这个问题呢？大致思路是去修改 view 的尺寸，让 view 适配视频的尺寸。具体的：

  1. 新建 MySurfaceView，继承自 SurfaceView
  2. 在 MySurfaceView 新增 setAspectRation 方法，设置 view 的宽高比，例如 16:9 是一个横屏的宽高比
  3. 接着，重写 onMeasure 方法，在 onMeasure 方法中根据宽高比， 具体代码如下：
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        val width = MeasureSpec.getSize(widthMeasureSpec)
        val height = MeasureSpec.getSize(heightMeasureSpec)
        if(mWidth == 0){
            setMeasuredDimension(width, height)
            return
        }

        // calculate expected width by ratio
        val expectedWidth = height * mWidth / mHeight

        // if expected width is too big, set max width to expected width
        if(expectedWidth >= width){
            // to maintain aspect ratio, calculate expected height
            val expectedHeight = width * mHeight / mWidth
            setMeasuredDimension(width, expectedHeight)
        }else{
            // or the expected width can fit in the parent, set the expected width
            setMeasuredDimension(expectedWidth, height)
        }
    }
  • 首先，调用父类方法 super.onMeasure 和 MeasureSpec.getSize 获取预期的 width 和 height。例如 width=1080, height=2070，即屏幕的大小
  • 接着，根据预期的宽高比去计算 expectedWidth，例如宽高比是 16:9 ，那么 e x p W h = 16 9 \frac{expW}{h}=\frac{16}{9} hexpW​=916​ ，得到 expectedWidth = height * 16/9 = 2070 * 16/9 = 3680
  • 如果 expectedWidth >= width 说明如果按照宽高比对现有 view 进行等比例放大，那么超过目前可接受的最大宽度，无法满足。因此，我们转而去缩放 height，以便最终 view 的宽高比符合我们的预期。因此 w e x p H = 16 9 \frac{w}{expH}=\frac{16}{9} expHw​=916​ 得到 val expectedHeight = width * mHeight / mWidth。
  • 如果 expectedWidth < width 说明当前的 view 可以放下，则直接设置 setMeasuredDimension(expectedWidth, height) 即可

完成了上述的修改，我们使用 MySurfaceView 进行视频的显示，此时 View 的尺寸符合图片的宽高比，图片也不会被拉伸和缩放了
在这里插入图片描述

SurfaceView 播放视频

我们了解了如何使用 SurfaceView 显示图片，并解决了图片被拉伸的问题。显示视频那也就水到渠成了，视频只是很多张图片罢了。
首先，我们将上屏显示图像的模块进行封装，在 基于 FFmpeg 的跨平台视频播放器简明教程（十一）：一种简易播放器的架构介绍 文中，VideoOutput 模块负责显示视频帧，我们新建一个叫 SurfaceViewVideoOutput 的类，用它来在 SurfaceView 上显示图片。具体代码在 j_andr_surfaceview_video_output 中，其中 drawFrame 完全与显示图片的代码是一致的：

int drawFrame(std::shared_ptr<Frame> frame) override {
    if(nativeWindow_ == nullptr) {
      LOGE("nativeWindow_ is null, can't drawFrame");
      return -1;
    }

    ANativeWindow_Buffer buffer;
    ANativeWindow_lock(nativeWindow_, &buffer, NULL);

    // copy frame to buffer
    auto *data_src_line = (int32_t *) frame->f->data[0];
    const auto src_line_stride = frame->f->linesize[0] / sizeof(int32_t);

    auto *data_dst_line = (uint32_t *) buffer.bits;
    auto height = std::min(buffer.height, frame->f->height);
    for (int y = 0; y < height; y++) {
      std::copy_n(data_src_line, buffer.width, data_dst_line);

      data_src_line += src_line_stride;

      data_dst_line += buffer.stride;
    }

    ANativeWindow_unlockAndPost(nativeWindow_);

    return 0;
  }

接着，为了在 Android 上更容易使用 C/C++ 播放器代码，我们创建一个 SimplePlayer 的 Kotlin 类，它是对底层 j_video_player::SimplePlayer 的封装，所有与播放相关接口都通过 SimplePlayer 最终调用到 C/C++ 层。具体代码查看 SimplePlayer 以及它的 JNI 实现 jni_simple_player

完成了上面的动作，我们在 Android 上就能愉快地进行视频播放了，具体代码在 DisplayVideoActivity 中。

总结

本文首先简略的介绍了 Android 图像的显示系统，引出 BufferQueue 的概念；接着介绍了 Surface 和 SurfaceView，Surface 关联着一个 BufferQueue，而 SurfaceView 持有一个 Surface；接下来，我们展示了如何在 SurfaceView 上显示图片，并解决图片宽高比与手机屏幕不一致导致的图像拉伸问题；最后，我们使用 SimplePlayer 在 SurfaceView 做视频播放。

参考

  • Android实现视频播放的3种实现方式
  • 从整体上看Android图像显示系统
  • Android图形系统综述(干货篇)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/270405.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

LeetCode-回文链表（234）

LeetCode-回文链表（234）

题目描述&#xff1a; 给你一个单链表的头节点 head &#xff0c;请你判断该链表是否为回文链表。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 因为这一题是受到876题求链表中间节点的启发&#xff0c;所以在这里也加一下。 876.链表的中间结点…
阅读更多...
格密码：傅里叶矩阵

格密码：傅里叶矩阵

目录 一. 铺垫性介绍 1.1 傅里叶级数 1.2 傅里叶矩阵的来源 二. 格基与傅里叶矩阵 2.1 傅里叶矩阵详细解释 2.2 格基与傅里叶矩阵 写在前面&#xff1a;有关傅里叶变换的解释太多了&#xff0c;这篇博客主要总结傅里叶矩阵在格密码中的运用。对于有一定傅里叶变换基础的同…
阅读更多...
python 解决手机拍的书籍图片发灰的问题

python 解决手机拍的书籍图片发灰的问题

老师给发的作业经常是手机拍的&#xff0c;而不是扫描&#xff0c;背景发灰&#xff0c;如果二次打印就没有看了&#xff0c;象这样&#xff1a; 如果使用photoshop 处理&#xff0c;有些地方还是扣不干净&#xff0c;不如python 做的好&#xff0c;处理后如下&#xff1a; 具体…
阅读更多...
一个基于多接口的业务自动化测试框架！

一个基于多接口的业务自动化测试框架！

这是一个成熟的框架&#xff0c;不是要让别人当小白鼠&#xff0c;它已经先后在两家公司的5条业务线进行了推广应用&#xff0c;用例条数到了几千条以上&#xff0c;并且从2018年开始每天都在CI/CD流程中被调用执行。 已有那么多接口测试框架&#xff0c;为什么重复造轮子&…
阅读更多...
详解Java反射机制reflect（一学就会，通俗易懂）

详解Java反射机制reflect（一学就会，通俗易懂）

1.定义 #2. 获取Class对象的三种方式 sout(c1)结果为class com.itheima.d2_reflect.TestClass 获取到了Class对象就相当于获取到了该类 2.获取类的构造器 3.获取全部构造器对象 2.根据参数类型获取构造器对象 类型后必须加.class 3.构造器对象调用构造器方法 4.暴力访问 4.获…
阅读更多...
11-GraalVM元原生时代的Java虚拟机

11-GraalVM元原生时代的Java虚拟机

文章目录 GraalVM诞生的背景Java在微服务/云原生时代的困境事实矛盾 问题根源Java离不开虚拟机 解决方案革命派保守派 GraalVM入门GraalVM特征GraalVM下载和安装GraalVM下载win10安装及配置linux安装及配置 GraalVM初体验(Linux)多语言开发(了解即可、官网有Demo)GraalCompiler…
阅读更多...
【Gitlab】CICD流水线自动化部署教程

【Gitlab】CICD流水线自动化部署教程

第一步&#xff0c;准备 GitLab 仓库 这个不用多说&#xff0c;得先保证你的项目已经托管在一个 GitLab 仓库中。 第二步&#xff0c;定义 .gitlab-ci.yml 文件 在你的项目根目录中创建一个 .gitlab-ci.yml 文件。这个文件将定义所有 CI/CD 的工作流程&#xff0c;包括构建、测…
阅读更多...
连锁餐饮数字化：一体化运营管控平台

连锁餐饮数字化：一体化运营管控平台

内容来自演讲&#xff1a;刘腾飞 | 上海奥谱创网络科技有限公司 | CEO 摘要 本文介绍了企业级管理系统的需求和现状&#xff0c;以及如何通过数据指标为依据的改善循环来优化企业的运营。文章还提出了场景驱动、迭代上线的方法&#xff0c;并介绍了两个平台、三个统一的解决方…
阅读更多...
RK3568平台开发系列讲解（Linux系统篇）Linux 热拔插机制 mdev的使能

RK3568平台开发系列讲解（Linux系统篇）Linux 热拔插机制 mdev的使能

🚀返回专栏总目录 文章目录 一、什么是热插拔二、热插拔的机制三、mdev的开启沉淀、分享、成长，让自己和他人都能有所收获！😄 📢本篇将介绍 Linux 热拔插。 一、什么是热插拔 热插拔是指在设备运行的情况下，能够安全地插入或拔出硬件设备，而无需关闭或重启系统。这意…
阅读更多...
自动驾驶中的“雷达”

自动驾驶中的“雷达”

自动驾驶中有好几种雷达&#xff0c;新手可能会蒙蔽&#xff0c;这里统一介绍一下它们。 首先&#xff0c;所有雷达的原理都是发射波&#xff0c;接收回波&#xff0c;并通过发射和接收的时间差以及波的速度计算距离。只不过发射的波不同&#xff0c;功能也不同。 激光雷达 …
阅读更多...
kubelet源码学习（二）：kubelet创建Pod流程

kubelet源码学习（二）：kubelet创建Pod流程

本文基于Kubernetes v1.22.4版本进行源码学习 4、kubelet创建Pod流程 syncLoop()的主要逻辑是在syncLoopIteration()方法中实现&#xff0c;Pod创建相关代码只需要看处理configCh部分的代码 // pkg/kubelet/kubelet.go // 该方法会监听多个channel,当发现任何一个channel有数…
阅读更多...
Jenkins的特殊操作定时自动执行任务以及测试报告调优

Jenkins的特殊操作定时自动执行任务以及测试报告调优

java -Dhudson.model.DirectoryBrowserSupport.CSP -jar Jenkins.war 测试报告 不美丽 执行上面的代码 重启jenkins 就好了
阅读更多...
基于SpringBoot+Vue实现的电影院售票系统

基于SpringBoot+Vue实现的电影院售票系统

文章目录 项目介绍影院管理影片管理影厅管理订单管理用户管理角色权限管理 技术选型成果展示前台系统后台管理系统 账号及其他说明 项目介绍 基于SpringBootVue实现的电影院售票系统整体设计了用户、管理员两个角色。 用户登录系统可进行电影查看、分类查看、影片搜索、选择影…
阅读更多...
如何解决HTTP 404错误，这里给出详细解决办法

如何解决HTTP 404错误，这里给出详细解决办法

404错误是一个HTTP状态代码，这意味着你试图在网站上访问的页面在他们的服务器上找不到。 需要明确的是，该错误表示虽然服务器本身是可访问的，但显示该错误的特定页面是不可访问的。 个别网站经常自定义这个错误信息。所以，请记住，错误可能会以任何可以想象的方式出现，这…
阅读更多...
SDCMS靶场漏洞挖掘

SDCMS靶场漏洞挖掘

昨天才打完了khbc靶场&#xff0c;今天就马上投入到sdcms靶场&#xff0c;通过这个靶场&#xff0c;还是有不少的感悟的&#xff0c;下面&#xff0c;我们就以网安小白的身份来审视一下这个靶场&#xff01;&#xff01; ​​​​​​​ ​​​​​​​ ​​​​…
阅读更多...
【华为机试】2023年真题B卷（python）-发广播

【华为机试】2023年真题B卷（python）-发广播

一、题目 题目描述&#xff1a; 某地有N个广播站&#xff0c;站点之间有些有连接&#xff0c;有些没有。有连接的站点在接受到广播后会互相发送。 给定一个N*N的二维数组matrix,数组的元素都是字符’0’或者’1’。 matrix[i][j]‘1’,则代表i和j站点之间有连接&#xff0c;mat…
阅读更多...
软件测试面试--说一个印象最深的bug？

软件测试面试--说一个印象最深的bug？

其实&#xff0c;面试官并不关心你描述的这个bug是否真的有价值&#xff0c;或有多曲折离奇&#xff1f;他只是&#xff1a; 1.了解你平时工作中的测试能力 所以&#xff0c;这就要求的你平时工作中遇到bug时试着自己去定位&#xff0c;定位bug的过程远比你的单纯的执行测试用…
阅读更多...
华清远见作业第十六天

华清远见作业第十六天

思维导图&#xff1a; 双向循环链表头插入&#xff1a; 代码&#xff1a; Doublelist insert_head(Doublelist head,datatype element) {//创建新节点sDoublelist screate_node();if(NULLs){return head;}s->dataelement;//数据存储//判断链表是否为空if(NULLhead){heads;…
阅读更多...
解决Qt“报无法定位程序输入点xxx于动态连接库“问题

解决Qt“报无法定位程序输入点xxx于动态连接库“问题

今天&#xff0c;在使用QtVS2019编译工程时&#xff0c;弹出"无法定位程序输入点xxx于动态链接库"问题&#xff0c;如图(1)所示&#xff1a; 图(1) 报"无法定位程序输入点xxx于动态链接库"问题 出现这种问题的原因有很多&#xff1a; (1) 工程Release/Deb…
阅读更多...
RK3588平台开发系列讲解（AI 篇）RKNN rknn_query函数详细说明

RK3588平台开发系列讲解（AI 篇）RKNN rknn_query函数详细说明

文章目录 一、查询 SDK 版本二、查询输入输出 tensor 个数三、查询输入 tensor 属性(用于通用 API 接口)四、查询输出 tensor 属性(用于通用 API 接口)五、查询模型推理的逐层耗时六、查询模型推理的总耗时七、查询模型的内存占用情况八、查询模型里用户自定义字符串九、查询原…
阅读更多...
最新文章

Copyright @ 2022~2023