前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >音视频直播技术--视频画中画

音视频直播技术--视频画中画

作者头像
音视频_李超
发布2020-04-02 10:24:16
1.9K0
发布2020-04-02 10:24:16
举报
文章被收录于专栏:音视频直播技术专家

多视频

前言

大家好,今天我为大家介绍一下如何在Android系统下实现实时直播互动中的多视频展示功能。 我们现在都清楚实时直播互动中多路视频的展示是目前比较流行的趋势,因为大家都想看到更多视频画面的需求,是非常符合人类的习惯的。

大家都知道,在Android系统下显示视频主要有三种View,分别是SurfaceView、GLSurfaceView及TextureView。它们的区别大家可以看我的另一篇文章 视频的渲染与展示 一文的介绍。我们今天这个例子是通过 SurfaceView来给大家演示的。

基本流程

在这个项目中使用了两个SurfaceView,一个SurfaceView作为Camera摄像头预览View,另一个SurfaceView用于Player View。Camera preview的大小与屏幕大小相同,并把它作为背景,而Player View是一个小窗口,它浮在 Camera preview的上面,用户可以在屏幕内任意的拖动它。

注意,之所以我们在这个项目中使用 SurfaceView,主要是因为SurfaceView更为灵活,便于我们更好的控制它。当然它同时带来的缺点是,与其它View相比开发变得比较复杂。

技术实现

在资源文件中定义两个 SurfaceView

代码语言:javascript
复制
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/main"
    tools:context="com.daka.live.multisurfaceview.MainActivity">
    
    <SurfaceView
        android:id="@+id/surfaceview1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


    <SurfaceView
        android:id="@+id/surfaceview2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
        
</RelativeLayout>

生成SurfaceView对象并设置属性

我们在生成Player View时,要设置它的大小,位置及在顶层展示,否则它会被Camera preview覆盖掉。

代码语言:javascript
复制
......

mSurfaceView1 = (SurfaceView)findViewById(R.id.surfaceview1);

RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(320, 240); // set size
params.setMargins(100, 50, 0, 0);  // set position

mSurfaceView2 = (SurfaceView)findViewById(R.id.surfaceview2);
mSurfaceView2.setLayoutParams(params);  //设置view大小
mSurfaceView2.setOnTouchListener(this); //用于拖动

sh = mSurfaceView2.getHolder();
sh.addCallback(this);
sh.setFormat(PixelFormat.TRANSLUCENT);
mSurfaceView2.setZOrderMediaOverlay(true);
mSurfaceView2.setZOrderOnTop(true);  //设置在最顶层展示

......

实现OnTouch接口

  • 添加 View.OnTouchListener 实现
代码语言:javascript
复制
public class MainActivity extends 
                  Activity implements View.OnTouchListener {
}
  • 实现 onTouch 方法
代码语言:javascript
复制
public boolean onTouch(View view, MotionEvent event) {
        final int X = (int) event.getRawX();
        final int Y = (int) event.getRawY();
        switch (event.getAction() & MotionEvent.ACTION_MASK) {
            case MotionEvent.ACTION_DOWN:
                RelativeLayout.LayoutParams lParams = (RelativeLayout.LayoutParams) view.getLayoutParams();
                mXDelta = X - lParams.leftMargin;
                mYDelta = Y - lParams.topMargin;
                break;
            case MotionEvent.ACTION_UP:
                break;
            case MotionEvent.ACTION_POINTER_DOWN:
                break;
            case MotionEvent.ACTION_POINTER_UP:
                break;
            case MotionEvent.ACTION_MOVE:
                RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) view.getLayoutParams();
                layoutParams.leftMargin = X - mXDelta;
                layoutParams.topMargin = Y - mYDelta;
                layoutParams.rightMargin = -250;
                layoutParams.bottomMargin = -250;
                view.setLayoutParams(layoutParams);
                break;
        }
        mRoot.invalidate();
        return true;
    }

完整例子

多视频展示代码下载地址:https://github.com/garrylea/MultiSurfaceView


本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 基本流程
  • 技术实现
  • 完整例子
相关产品与服务
云直播
云直播(Cloud Streaming Services,CSS)为您提供极速、稳定、专业的云端直播处理服务,根据业务的不同直播场景需求,云直播提供了标准直播、快直播、云导播台三种服务,分别针对大规模实时观看、超低延时直播、便捷云端导播的场景,配合腾讯云视立方·直播 SDK,为您提供一站式的音视频直播解决方案。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档