Preventing canvas flicker?

Archived
1

I’m working on a simple custom video player for live video. All it will do is present a buffering screen with a semi-transparent black screen with white text, and otherwise just show the video. I used much of the sample code from the SDK. Here’s some of what I have:

Function ShowPlayer(video)
    port = CreateObject("roMessagePort")

    canvas = CreateObject("roImageCanvas")
    canvas.AllowUpdates(false)
    canvas.SetMessagePort(port)
    canvas.SetLayer(0, { Color: "#000000"})
    canvas.AllowUpdates(true)
    canvas.Show()

    player = CreateObject("roVideoPlayer")
    player.SetMessagePort(port)
    player.SetPositionNotificationPeriod(1)
    player.SetContentList([video])
    player.Play()

    ' Tracks startup progress
    progress = 0

    'Number of seconds of actual video playback
    totalPlaybackTime = CreateObject("roInt")
    totalPlaybackTime.setInt(0)

    while true
        msg = wait(0, port)

        if type(msg) = "roVideoPlayerEvent"
            if msg.isStatusMessage()
                if msg.GetMessage() = "startup progress"
                    curProgress% = msg.getIndex() / 10
                    if progress <> curProgress%
                        progress = curProgress%
                        PaintFullscreenCanvas(canvas, progress)
                    end if
                end if
            end if
        end if
    end while
End Function

Sub PaintFullscreenCanvas(canvas, progress)
    list = []

    if progress < 100
        color = "#CC000000" ' Overlay on the existing video

        list.Push({
            Text: "Buffering: " + progress.tostr() + "%"
            TextAttrs: { font: "Medium" }
            TargetRect: canvas.GetCanvasRect()
        })
    else
        color = "#00000000" 'fully transparent
    end if

    canvas.AllowUpdates(false)
    canvas.SetLayer(0, { Color: color, CompositionMode: "Source" })
    canvas.SetLayer(1, list)
    canvas.AllowUpdates(true)
End Sub

Note I removed a bunch of irrelevant code that handles other events on the video port.

So, when the screen first comes up, it seems to flicker a bit as it displays the all black canvas. It loads from top to bottom and there’s almost always a noticeable flicker as it seems to render half of it or so and then the other half. The same thing happens when the “buffering” screen is removed as the canvas goes back to fully transparent.

On the latest Roku it’s not really noticeable at all, but on an older Roku LT it’s very noticeable. In fact on that one, the video starts playing before the canvas screen clears to transparent.

Any tips or ideas on how to remove all that flicker and have it all render at once?

2

Possibly looking at how your layers are constructed
And using them properly. A layer does not have to
Be the entire canvas. Generally all your background
Stuff that stays the same goes into the lowest and largest
Z order or layer. Then you build on top of that. For instance
You create a smaller layer above the video player
And clear the area for buffering with a rectangle
Only Large enough to display the text. You set your
Text and then only reset the layer for the text. You do not
Have to clear or setlayer the other layers. If you really want to clear everything
Over the videoThen use a rectangle the size of the screen for the topmost layer
Background. The canvas knows what
Is underneath. When you are done with the buffering
Message then just set that layer below everything else
You can move layers to whatever z order you want including
-1 which is behind everything. You can create layers in advance
That only occupy the minimal area that is needed
To accomplish the task. Set their zorders to -1
And then when you need to use it set the zorders
Above all others and update it The canvas knows
What needs to be repaired when setting or swapping layers

3

Thanks for the feedback.

I’m not really doing anything at all complicated. There’s only two layers - the base layer which is either all black or somewhat transparent black, and a layer on top of it that displays text. One thing I could try is changing the text layer to not be 100% of the screen (it’s just a small amount of text that is centered), but I don’t know how that could affect the background flicker?

4

Don’t forget that your transparency can also be a layer as well
You do not have to touch layer 0. You can try putting your transparency
Into layer 1 and your text into layer 2. Just create a trans rectangle the size of the
Videoplayer and stick it above the videoplayer when your ready to display
The videoplayer otherwise set its z order to -1 when you want to display text
It all depends how you want it to look. I
I’m going by memory on this. I built An entire menu and video system
All in the imagecanvas. Came out well but could not resist the speed
Offered by the 2 d API. So I use that exclusively. Now