Как получить подобный механизм центра кадрирования на ExoPlayer PlayerView, но не по центру?

Мы записываем видео лица пользователя, и обычно лицо находится в верхней половине видео.

Позже мы хотим просмотреть видео, но соотношение сторон PlayerView может отличаться от соотношения видео, поэтому необходимо некоторое масштабирование и обрезка.

Эта проблема

Единственный способ, который я нашел для масштабирования PlayerView чтобы он отображался во всем пространстве, которое у него есть, но с сохранением соотношения сторон (что, конечно, приведет к кадрированию), заключается в использовании app:resize_mode="zoom" Вот пример того, как это работает с центральным кадрированием: http://s000.tinyupload.com/?file_id=00574047057406286563. Чем больше просмотров, которые показывают контент, имеют одинаковое соотношение сторон, тем меньше требуется обрезка.

Но это только для центра, то есть он берет точку 0,5x0,5 видео и масштабирует кадры с этой точки. Это вызывает много случаев потери важного содержания видео.

Например, если у нас есть видео, которое было снято в портретной ориентации, и у нас есть квадратный PlayerView и мы хотим показать верхнюю область, это та часть, которая будет видна:

Конечно, если сам контент является квадратным, а представления также квадратными, он должен показывать весь контент без обрезки.

Что я пробовал

Я пытался искать в Интернете, StackOverflow (здесь) и на Github, но я не мог найти, как это сделать. Единственная подсказка, которую я нашел, касается AspectRatioFrameLayout и AspectRatioTextureView, но я не нашел, как использовать их для этой задачи, если это вообще возможно.

Мне сказали ( здесь), что я должен использовать обычный TextureView и предоставить его непосредственно SimpleExoPlayer используя SimpleExoPlayer.setVideoTextureView. И установить специальное преобразование к нему, используя TextureView.setTransform.

После долгих попыток использовать лучшее (использовать репозиторий видео, репозиторий SuperImageView и репозиторий JCropImageView, в которых есть примеры масштабирования/кадрирования ImageView и видео), я опубликовал рабочий пример, который, кажется, показывает видео правильно, но я все еще не уверен в этом, так как я также использую ImageView, показанный поверх него перед его воспроизведением (чтобы иметь более хороший переход вместо черного контента).

У меня были различные проблемы при попытке это сделать, пока я не попал в текущую ситуацию, и я обновил этот вопрос несколько раз соответственно. Теперь он работает даже с процентом Y, о котором я говорил, поэтому я могу установить его в 20% от верхней части видео, если я захочу. Тем не менее, я все еще думаю, что есть большая вероятность, что что-то не так, потому что, когда я попытался установить его на 50%, я заметил, что контент может не соответствовать всему представлению.

Я даже посмотрел на исходный код ImageView ( здесь), чтобы увидеть, как используется центральная обрезка. Применительно к ImageView он все еще работал как центральная обрезка, но когда я использовал ту же технику на видео, это дало мне очень неправильный результат.

Вопросы

Моя цель состояла в том, чтобы показать и ImageView, и видео, чтобы оно плавно переходило от статического изображения к видео. Все это при том, что оба имеют высший урожай 20% от верха (например). Я опубликовал пример проекта здесь, чтобы опробовать его и поделиться с людьми тем, что я нашел.

Так что теперь мои вопросы связаны с тем, почему это не работает для imageView и/или видео:

РЕДАКТИРОВАТЬ: после ответа на этот вопрос я решил сделать небольшой пример того, как его использовать (репозиторий Github доступен здесь):

Ответы

Ответ 1

Вопрос в том, как манипулировать изображением, таким как ImageView.ScaleType.CENTER_CROP но сместить фокус из центра в другое место, которое находится на 20% от верхней части изображения. Во-первых, давайте посмотрим, что делает CENTER_CROP:

Из документации:

CENTER_CROP

Равномерно масштабируйте изображение (сохраняйте пропорции изображения), чтобы оба размера (ширина и высота) изображения были равны или превышали соответствующий размер вида (за вычетом отступов). Затем изображение центрируется на виде. Из XML используйте этот синтаксис: android:scaleType="centerCrop".

Другими словами, масштабируйте изображение без искажений так, чтобы ширина или высота изображения (или ширина и высота) вписывались в вид, чтобы вид был полностью заполнен изображением (без пропусков).

Другой способ думать об этом состоит в том, что центр изображения "прикреплен" к центру изображения. Затем изображение масштабируется в соответствии с указанными выше критериями.

В следующем видео белые линии отмечают центр изображения; красные линии отмечают центр зрения. Типом шкалы является CENTER_CROP. Обратите внимание, как центральные точки изображения и вида совпадают. При изменении размера представления эти две точки продолжают перекрываться и всегда отображаются в центре вида независимо от размера представления.

Итак, что означает иметь подобное центру поведение в другом месте, например, на 20% сверху? Как и в центре обрезки, мы можем указать, что точка, которая находится на 20% от верхней части изображения, и точка, на которой 20% от верхней части вида будут "закреплены", как точка 50% "закреплена" в центре обрезки. Горизонтальное расположение этой точки остается на уровне 50% изображения и вида. Теперь изображение можно масштабировать для соответствия другим условиям обрезки по центру, которые указывают, что ширина и/или высота изображения будут соответствовать виду без зазоров. (Под размером представления понимается размер представления за вычетом отступов.)

Вот короткое видео об этом 20% поведении урожая. В этом видео белые линии показывают середину изображения, красные линии показывают закрепленную точку на виде, а синяя линия, которая отображается за горизонтальной красной линией, обозначает 20% от верхней части изображения. (Демонстрационный проект находится на GitHub.

Вот результат, показывающий полное изображение, которое было предоставлено, и видео в квадратной рамке, переходящей из неподвижного изображения. ,

MainActivity.kt
prepareMatrix() - метод, который выполняет работу, чтобы определить, как масштабировать/обрезать изображение. С видео необходимо выполнить дополнительную работу, поскольку создается впечатление, что видео сделано так, чтобы оно соответствовало TextureView в качестве типа масштаба "FIT_XY", когда оно назначено для TextureView. Из-за этого масштабирования размер носителя должен быть восстановлен перед prepareMatrix() для видео.

class MainActivity : AppCompatActivity() {
    private val imageResId = R.drawable.test
    private val videoResId = R.raw.test
    private var player: SimpleExoPlayer? = null
    private val mFocalPoint = PointF(0.5f, 0.2f)

    override fun onCreate(savedInstanceState: Bundle?) {
        window.setBackgroundDrawable(ColorDrawable(0xff000000.toInt()))
        super.onCreate(savedInstanceState)
        if (cache == null) {
            cache = SimpleCache(File(cacheDir, "media"), LeastRecentlyUsedCacheEvictor(MAX_PREVIEW_CACHE_SIZE_IN_BYTES))
        }
        setContentView(R.layout.activity_main)
        //        imageView.visibility = View.INVISIBLE
        imageView.setImageResource(imageResId)
        imageView.doOnPreDraw {
            imageView.scaleType = ImageView.ScaleType.MATRIX
            val imageWidth: Float = ContextCompat.getDrawable(this, imageResId)!!.intrinsicWidth.toFloat()
            val imageHeight: Float = ContextCompat.getDrawable(this, imageResId)!!.intrinsicHeight.toFloat()
            imageView.imageMatrix = prepareMatrix(imageView, imageWidth, imageHeight, mFocalPoint, Matrix())
            val b = BitmapFactory.decodeResource(resources, imageResId)
            val d = BitmapDrawable(resources, b.copy(Bitmap.Config.ARGB_8888, true))
            val c = Canvas(d.bitmap)
            val p = Paint()
            p.color = resources.getColor(android.R.color.holo_red_dark)
            p.style = Paint.Style.STROKE
            val strokeWidth = 10
            p.strokeWidth = strokeWidth.toFloat()
            // Horizontal line
            c.drawLine(0f, imageHeight * mFocalPoint.y, imageWidth, imageHeight * mFocalPoint.y, p)
            // Vertical line
            c.drawLine(imageWidth * mFocalPoint.x, 0f, imageWidth * mFocalPoint.x, imageHeight, p)
            // Line in horizontal and vertical center
            p.color = resources.getColor(android.R.color.white)
            c.drawLine(imageWidth / 2, 0f, imageWidth / 2, imageHeight, p)
            c.drawLine(0f, imageHeight / 2, imageWidth, imageHeight / 2, p)

            imageView.setImageBitmap(d.bitmap)
            imageViewFull.setImageBitmap(d.bitmap)
        }
    }

    fun startPlay(view: View) {
        playVideo()
    }

    private fun getViewWidth(view: View): Float {
        return (view.width - view.paddingStart - view.paddingEnd).toFloat()
    }

    private fun getViewHeight(view: View): Float {
        return (view.height - view.paddingTop - view.paddingBottom).toFloat()
    }

    private fun prepareMatrix(targetView: View, mediaWidth: Float, mediaHeight: Float,
                              focalPoint: PointF, matrix: Matrix): Matrix {
        if (targetView.visibility != View.VISIBLE) {
            return matrix
        }
        val viewHeight = getViewHeight(targetView)
        val viewWidth = getViewWidth(targetView)
        val scaleFactorY = viewHeight / mediaHeight
        val scaleFactor: Float
        val px: Float
        val py: Float
        if (mediaWidth * scaleFactorY >= viewWidth) {
            // Fit height
            scaleFactor = scaleFactorY
            px = -(mediaWidth * scaleFactor - viewWidth) * focalPoint.x / (1 - scaleFactor)
            py = 0f
        } else {
            // Fit width
            scaleFactor = viewWidth / mediaWidth
            px = 0f
            py = -(mediaHeight * scaleFactor - viewHeight) * focalPoint.y / (1 - scaleFactor)
        }
        matrix.postScale(scaleFactor, scaleFactor, px, py)
        return matrix
    }

    private fun playVideo() {
        player = ExoPlayerFactory.newSimpleInstance([email protected], DefaultTrackSelector())
        player!!.setVideoTextureView(textureView)
        player!!.addVideoListener(object : VideoListener {
            override fun onVideoSizeChanged(width: Int, height: Int, unappliedRotationDegrees: Int, pixelWidthHeightRatio: Float) {
                super.onVideoSizeChanged(width, height, unappliedRotationDegrees, pixelWidthHeightRatio)
                val matrix = Matrix()
                // Restore true media size for further manipulation.
                matrix.setScale(width / getViewWidth(textureView), height / getViewHeight(textureView))
                textureView.setTransform(prepareMatrix(textureView, width.toFloat(), height.toFloat(), mFocalPoint, matrix))
            }

            override fun onRenderedFirstFrame() {
                Log.d("AppLog", "onRenderedFirstFrame")
                player!!.removeVideoListener(this)
                imageView.animate().alpha(0f).setDuration(2000).start()
                imageView.visibility = View.INVISIBLE
            }
        })
        player!!.volume = 0f
        player!!.repeatMode = Player.REPEAT_MODE_ALL
        player!!.playRawVideo(this, videoResId)
        player!!.playWhenReady = true
        //        player!!.playVideoFromUrl(this, "https://sample-videos.com/video123/mkv/240/big_buck_bunny_240p_20mb.mkv", cache!!)
        //        player!!.playVideoFromUrl(this, "https://sample-videos.com/video123/mkv/720/big_buck_bunny_720p_1mb.mkv", cache!!)
        //        player!!.playVideoFromUrl([email protected], "https://sample-videos.com/video123/mkv/720/big_buck_bunny_720p_1mb.mkv")
    }

    override fun onStop() {
        super.onStop()
        if (player != null) {
            player!!.setVideoTextureView(null)
            //        playerView.player = null
            player!!.release()
            player = null
        }
    }

    companion object {
        const val MAX_PREVIEW_CACHE_SIZE_IN_BYTES = 20L * 1024L * 1024L
        var cache: com.google.android.exoplayer2.upstream.cache.Cache? = null

        @JvmStatic
        fun getUserAgent(context: Context): String {
            val packageManager = context.packageManager
            val info = packageManager.getPackageInfo(context.packageName, 0)
            val appName = info.applicationInfo.loadLabel(packageManager).toString()
            return Util.getUserAgent(context, appName)
        }
    }

    fun SimpleExoPlayer.playRawVideo(context: Context, @RawRes rawVideoRes: Int) {
        val dataSpec = DataSpec(RawResourceDataSource.buildRawResourceUri(rawVideoRes))
        val rawResourceDataSource = RawResourceDataSource(context)
        rawResourceDataSource.open(dataSpec)
        val factory: DataSource.Factory = DataSource.Factory { rawResourceDataSource }
        prepare(LoopingMediaSource(ExtractorMediaSource.Factory(factory).createMediaSource(rawResourceDataSource.uri)))
    }

    fun SimpleExoPlayer.playVideoFromUrl(context: Context, url: String, cache: Cache? = null) = playVideoFromUri(context, Uri.parse(url), cache)

    fun SimpleExoPlayer.playVideoFile(context: Context, file: File) = playVideoFromUri(context, Uri.fromFile(file))

    fun SimpleExoPlayer.playVideoFromUri(context: Context, uri: Uri, cache: Cache? = null) {
        val factory = if (cache != null)
            CacheDataSourceFactory(cache, DefaultHttpDataSourceFactory(getUserAgent(context)))
        else
            DefaultDataSourceFactory(context, MainActivity.getUserAgent(context))
        val mediaSource = ExtractorMediaSource.Factory(factory).createMediaSource(uri)
        prepare(mediaSource)
    }
}

Ответ 2

Вы должны попробовать что-то вроде (на основе этого ответа):

//store the SurfaceTexture to set surface for MediaPlayer
mTextureView.setSurfaceTextureListener(new SurfaceTextureListener() {
@Override
    public void onSurfaceTextureAvailable(SurfaceTexture surface,
            int width, int height) {
        MainActivity.this.mSurface = surface;

    }

И в вашем коде используйте:

//TODO revert to center-crop
    LayoutParams videoParams = (LayoutParams) mTextureView
            .getLayoutParams();
    DisplayMetrics dm = new DisplayMetrics();
    FullScreenActivity.this.getWindowManager().getDefaultDisplay()
            .getMetrics(dm);

    final int height = dm.heightPixels;
    final int width = dm.widthPixels;
    int videoHeight = mPlayer.getVideoHeight();
    int videoWidth = mPlayer.getVideoWidth();
    double hRatio = 1;

    hRatio = (height * 1.0 / videoHeight) / (width * 1.0 / videoWidth);
    videoParams.x = (int) (hRatio <= 1 ? 0 : Math.round((-(hRatio - 1) / 2)
            * width));
    videoParams.y = (int) (hRatio >= 1 ? 0 : Math
            .round((((-1 / hRatio) + 1) / 2) * height));
    videoParams.width = width - videoParams.x - videoParams.x;
    videoParams.height = height - videoParams.y - videoParams.y;
    Log.e(TAG, "x:" + videoParams.x + " y:" + videoParams.y);
    mTextureView.setScaleX(1.00001f);//<-- this line enables smoothing of the picture in TextureView.
    mTextureView.requestLayout();
    mTextureView.invalidate();

И вы можете прикрепить этот текстурный вид к своему плееру, как кто-то сказал вам в github:

SimpleExoPlayer.setVideoTextureView

ОБНОВИТЬ:

private void setDimension() {
     // Adjust the size of the video
     // so it fits on the screen
     float videoProportion = getVideoProportion();
     int screenWidth = getResources().getDisplayMetrics().widthPixels;
     int screenHeight = getResources().getDisplayMetrics().heightPixels;
     float screenProportion = (float) screenHeight / (float) screenWidth;
     android.view.ViewGroup.LayoutParams lp = videoView.getLayoutParams();

     if (videoProportion < screenProportion) {
         lp.height= screenHeight;
         lp.width = (int) ((float) screenHeight / videoProportion);
     } else {
         lp.width = screenWidth;
         lp.height = (int) ((float) screenWidth * videoProportion);
     }
     lp.setMargins(leftMargin, topMargin, rightMargin, bottomMargin);
     videoView.setLayoutParams(lp);
 }

// This method gets the proportion of the video that you want to display.
// I already know this ratio since my video is hardcoded, you can get the  
// height and width of your video and appropriately generate  the proportion  
//    as :height/width 
private float getVideoProportion(){
  return 1.5f;
}

Ответ 3

Проверьте это для проблемы масштабирования с exoplayer

https://github.com/google/ExoPlayer/issues/2016