Is there any way to streaming just white canvas board with audio mute/unmute feature?

[bhavinatharva]

Hello Brother,

Is there any way to streaming just white canvas board with audio mute/unmute feature?
I want streaming white board canvas using your library

[pedroSG94]

Hello,

Yes, you can stream a canvas in realtime using StreamBase classes (GenericStream, RtmpStream, etc).

You will have to modify this class to work as you want:
https://github.com/pedroSG94/RootEncoder/blob/master/encoder/src/main/java/com/pedro/encoder/input/sources/video/BitmapSource.kt

Currently that class draw a bitmap in each frame but you can modify it to allow access to the canvas, for example:

class CanvasSource(private val drawCanvas: (Canvas) -> Unit): VideoSource() {

    @Volatile
    private var running = false
    private var job: Job? = null
    private var surface: Surface? = null

    override fun create(width: Int, height: Int, fps: Int, rotation: Int): Boolean {
        return true
    }

    override fun start(surfaceTexture: SurfaceTexture) {
        surfaceTexture.setDefaultBufferSize(width, height)
        surface = Surface(surfaceTexture)
        running = true
        job = CoroutineScope(Dispatchers.IO).launch {
            while (running) {
                try {
                    val canvas = surface?.lockCanvas(null)
                    canvas?.let { drawCanvas(canvas) }
                    surface?.unlockCanvasAndPost(canvas)
                } catch (_: Exception) { }
                //sleep to emulate fps
                delay(1000 / fps.toLong())
            }
        }
    }

    override fun stop() {
        running = false
        runBlocking { job?.cancelAndJoin() }
        surface?.release()
        surface = null
    }

    override fun release() {}

    override fun isRunning(): Boolean = running
}

Now you can use the new VideoSource and add your own code in the callback:

      val genericStream = GenericStream(requireContext(), this, 
          videoSource = CanvasSource { canvas -> canvas.drawColor(Color.WHITE) },
          audioSource = MicrophoneSource()
      )

The callback is called in each frame, you can modify the result as you want

[pedroSG94]

Remember that maybe you get a new canvas in each frame (a clear canvas) so you will have to remember values to keep consistency if you want do realtime modifications. For example:

      // draw white until button is pressed, then draw black
      var color = Color.WHITE
      CanvasSource { canvas -> canvas.drawColor(color) }
      button.setOnClickListener {
          color = Color.BLACK
      }

[bhavinatharva]

Hello @pedroSG94

Thank you for the response.

I am trying with your suggestion

I am not getting Proper

class CanvasSource(private val drawCanvas: (Canvas) -> Unit): VideoSource() {

    @Volatile
    private var running = false
    private var job: Job? = null
    private var surface: Surface? = null

    override fun create(width: Int, height: Int, fps: Int, rotation: Int): Boolean {
        return true
    }

    override fun start(surfaceTexture: SurfaceTexture) {
        surfaceTexture.setDefaultBufferSize(width, height)
        surface = Surface(surfaceTexture)
        running = true
        job = CoroutineScope(Dispatchers.IO).launch {
            while (running) {
                try {
                    val canvas = surface?.lockCanvas(null)
                    canvas?.let { drawCanvas(canvas) }
                    surface?.unlockCanvasAndPost(canvas)
                } catch (_: Exception) { }
                //sleep to emulate fps
                delay(1000 / fps.toLong())
            }
        }
    }

    override fun stop() {
        running = false
        runBlocking { job?.cancelAndJoin() }
        surface?.release()
        surface = null
    }

    override fun release() {}

    override fun isRunning(): Boolean = running
}

class WhiteboardView @JvmOverloads constructor(
        context: Context, attrs: AttributeSet? = null
) : View(context, attrs) {

    private val paths = mutableListOf<PathData>()
    private val undoStack = mutableListOf<PathData>()

    private var currentPath = Path()
    private var currentPaint = defaultPaint()

    private fun defaultPaint(): Paint {
        return Paint().apply {
            color = Color.BLACK
            strokeWidth = 8f
            isAntiAlias = true
            isDither = true
            style = Paint.Style.STROKE
            strokeJoin = Paint.Join.ROUND
            strokeCap = Paint.Cap.ROUND
        }
    }

    // ==================================
    // MATCH_PARENT fix (critical)
    // ==================================
    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        val width = MeasureSpec.getSize(widthMeasureSpec)
        val height = MeasureSpec.getSize(heightMeasureSpec)

        val finalWidth = if (width == 0) 1080 else width
        val finalHeight = if (height == 0) 1920 else height

        setMeasuredDimension(finalWidth, finalHeight)
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)

        paths.forEach {
            canvas.drawPath(it.path, it.paint)
        }

        canvas.drawPath(currentPath, currentPaint)
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        val x = event.x
        val y = event.y

        when (event.action) {
            MotionEvent.ACTION_DOWN -> {
                currentPath = Path()
                currentPath.moveTo(x, y)
            }
            MotionEvent.ACTION_MOVE -> {
                currentPath.lineTo(x, y)
            }
            MotionEvent.ACTION_UP -> {
                paths.add(PathData(Path(currentPath), Paint(currentPaint)))
                currentPath.reset()
            }
        }

        invalidate()
        return true
    }

    // ================================
    // TOOLS
    // ================================

    fun setPenColor(color: Int) {
        currentPaint.color = color
    }

    fun setBrushSize(size: Float) {
        currentPaint.strokeWidth = size
    }

    fun enableEraser() {
        currentPaint.color = Color.WHITE
        currentPaint.strokeWidth = 40f
    }

    fun usePen() {
        currentPaint = defaultPaint()
    }

    fun undo() {
        if (paths.isNotEmpty()) {
            undoStack.add(paths.removeLast())
            invalidate()
        }
    }

    fun redo() {
        if (undoStack.isNotEmpty()) {
            paths.add(undoStack.removeLast())
            invalidate()
        }
    }

    fun clearAll() {
        paths.clear()
        undoStack.clear()
        currentPath.reset()
        invalidate()
    }

    fun getBitmap(): Bitmap {
        val bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
        val canvas = Canvas(bitmap)
        draw(canvas)
        return bitmap
    }

    data class PathData(
            val path: Path,
            val paint: Paint
    )
}

private fun prepare() {
        genericStream = GenericStream(
            videoSource = CanvasSource { canvas ->
                whiteboardView.draw(canvas)
            },
            audioSource = MicrophoneSource(),
            context = this@WhiteBoardActivity,
            connectChecker = object : ConnectChecker {
                override fun onConnectionStarted(url: String) {
                    Log.e(TAG, "onConnectionStarted: $url")
                }

                override fun onConnectionSuccess() {
                    Log.e(TAG, "onConnectionSuccess: ")
                }

                override fun onConnectionFailed(reason: String) {
                    if (genericStream.getStreamClient().reTry(5000, reason, null)) {
                        CommonUtils.showToast(this@WhiteBoardActivity, "Retry")
                    } else {
                        genericStream.stopStream()
                        bStartStop.setImageResource(R.drawable.ic_video_record)
                        CommonUtils.showToast(this@WhiteBoardActivity, "Failed: $reason")
                    }
                }

                override fun onDisconnect() {
                    Log.e(TAG, "onDisconnect: ")
                }

                override fun onAuthError() {
                    genericStream.stopStream()
                    bStartStop.setImageResource(R.drawable.ic_video_record)
                    CommonUtils.showToast(this@WhiteBoardActivity, "Auth error")
                }

                override fun onAuthSuccess() {
                    Log.e(TAG, "onAuthSuccess: ")
                }

            }).apply {
            getGlInterface().autoHandleOrientation = true
            getStreamClient().setBitrateExponentialFactor(0.5f)
            videoSource
        }
        val prepared = try {
            genericStream.prepareVideo(width, height, vBitrate, rotation = rotation)
                    && genericStream.prepareAudio(sampleRate, isStereo, aBitrate)
        } catch (_: IllegalArgumentException) {
            false
        }
        if (!prepared) {
            CommonUtils.showToast(this@WhiteBoardActivity, "Audio or Video configuration failed")
            finish()
        }
    }

    ````
    
    

[pedroSG94]

Hello,

That is expected, the problem is related with the scale and/or the aspect ratio of your original view.
You have to adapt the canvas of your view to the canvas of the stream.
Try this:

            val bitmap = view.drawToBitmap() //get bitmap from your original view
            val matrix = Matrix()
            //width and height of the stream
            val scaleX = width.toFloat() / bitmap.width 
            val scaleY = height.toFloat() / bitmap.height
            if (rotation == 0 || rotation == 180) { //scale depend of vertical or horizontal stream
                matrix.setScale(scaleX, scaleY)
            } else {
                matrix.setScale(scaleY, scaleX)
            }
            canvas.drawBitmap(bitmap, matrix, null)

[pedroSG94]

Other possible solution and faster (to get more fps). You can use your original view with the same aspect ratio than the stream and create a method to draw into the canvas but with the paths values scaled.

[bhavinatharva]

I tried with original view's dimension and it is working fine, but my streaming not get updated when canvas re-draw as user draw something

[pedroSG94]

I don't understand you.
What do you means with "when canvas re-draw as user draw something"?

[bhavinatharva]

Hello ,
I mean every time the user touches the screen and moves their finger so that not getting updated on streaming

[pedroSG94]

Hello,

It is working fine for me. I let you here a patch to apply in the master branch of my app example.
canvas.patch

You only need:

• Apply the patch
• Compile the app
• Enter to Rotation example
• Write your endpoint stream and press center button or you can press record button
• Draw in the blue part

[bhavinatharva]

Hello @pedroSG94 Brother, I tried in your example part and i am not getting streaming using

https://github.com/sallar/mac-local-rtmp-server

Screen.Recording.2025-11-20.at.9.59.18.AM.1.mp4

[pedroSG94]

Hello,

I was doing tests and maybe the problem is related with VLC in macOS. I don't know the reason but it is freezed. Should be fine using it on Linux or Windows
With macOS. Try use ffplay instead.

[bhavinatharva]

Thanks for the update!
Yeah, it seems like the issue is happening.
I’ll try using ffplay on macOS and see how it goes.
Thanks for the tip!