AndroidのTwilio VideoViewの形をCircleにする

7822 ワード
Android twilio Kotlin Android テキストリンク

はじめに

あるプロジェクトでTwilioのVideoライブラリを使ったのですがTwilioのVideoViewはデフォルトでは、四角形でカメラ映像がレンダリングされます。
これをよくある丸形にするのが意外と苦戦したのでメモしておきます。

やりたいのはこういうやつ↓

※ 今回の方法は下記のやり方を参考にしました。
https://github.com/twilio/video-quickstart-android/issues/291

やり方

  • 親のカスタムレイアウトを作成
CircleFrameLayout.kt
package com.xxxxx

import android.content.Context
import android.graphics.Canvas
import android.graphics.Path
import android.graphics.Region
import android.util.AttributeSet
import android.widget.RelativeLayout

open class CircleFrameLayout constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : RelativeLayout(context, attrs, defStyleAttr) {

    constructor(context: Context) : this(context, null, 0)
    constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, 0)

    private var circlePath = Path()

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        val radius = Math.min(w/2f, h/2f)

        circlePath.reset()
        circlePath.addCircle(w/2f, h/2f, radius, Path.Direction.CW)

        super.onSizeChanged(w, h, oldw, oldh)
    }

    override fun dispatchDraw(canvas: Canvas) {
        canvas.clipPath(circlePath, Region.Op.INTERSECT)
        super.dispatchDraw(canvas)
    }
}
  • twilioはVideoViewではなくVideoTextureViewを使います。
    （VideoViewを使ってしまうと四角形の背景が残ったままになってしまうので注意）
activity_main.xml
        <com.xxxxx.CircleFrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@+id/menu_top"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="@dimen/video_margin_small"
            android:layout_marginTop="@dimen/video_margin_small"
            >
            <com.twilio.video.VideoTextureView
                android:id="@+id/video_1"
                android:layout_width="@dimen/video_small"
                android:layout_height="@dimen/video_small"
                app:tviScaleType="fit"
                />
        </com.xxxxx.CircleFrameLayout>

これで最初に紹介したような丸形のViewに出来ます！