Flex: Restore Spark VideoDisplay stream

Question

EDIT If someone can at least tell me how to receive an event when the streams disconnects that would be great.

The documentation for this control is simply horrible. I have an application that will have a live video stream and I'm looking for a way to make the VideoDisplay control restore its connection in case of the occurrence of any of these specific scenarios:

1. The application starts and the stream is not online yet.
2. The application is streaming and the user is disconnected from the internet.
3. The application is streaming and the video server crashes and reboots.

I'm using Wowza Media Server and Wirecast to test this. 1 and 3 don't work, I'm not sure number 2 does. I made number 1 work by adding this very questionable piece of code:

    protected function onMediaPlayerStateChange(event:MediaPlayerStateChangeEvent):void
    {
        if (event.state == MediaPlayerState.PLAYBACK_ERROR)
        {
            var videoSource:DynamicStreamingVideoSource = this.videoDisplay.source as DynamicStreamingVideoSource;

            try
            {
                this.videoDisplay.source = null;
                this.videoDisplay.source = videoSource;
            }
            catch (any:*) {}
        }
    }

As you can see I need a try/catch block since both calls to source cause exceptions, yet whatever happens before those exceptions seems to fix problem #1. This doesn't fix problem #3 because a media state change event apparently doesn't occur when you stop the video server.

This is my control declaration:

<s:VideoDisplay id="videoDisplay" click="onVideoStreamClick(event)" mediaPlayerStateChange="onMediaPlayerStateChange(event)" muted="{this.videoMuted}" top="10" width="280" height="220" autoPlay="true" horizontalCenter="0">
    <s:source>
        <s:DynamicStreamingVideoSource id="videoSource" streamType="live" host="{FlexGlobals.topLevelApplication.parameters.videoStreamURL}">
            <s:DynamicStreamingVideoItem id="videoItemLow" streamName="{FlexGlobals.topLevelApplication.parameters.videoLow}" bitrate="{FlexGlobals.topLevelApplication.parameters.videoLowBitrate}" />
            <s:DynamicStreamingVideoItem id="videoItemMedium" streamName="{FlexGlobals.topLevelApplication.parameters.videoMedium}" bitrate="{FlexGlobals.topLevelApplication.parameters.videoMediumBitrate}" />
            <s:DynamicStreamingVideoItem id="videoItemHigh" streamName="{FlexGlobals.topLevelApplication.parameters.videoHigh}" bitrate="{FlexGlobals.topLevelApplication.parameters.videoHighBitrate}" />
        </s:DynamicStreamingVideoSource>
    </s:source>
</s:VideoDisplay>

Does anyone know how to make the VideoDisplay recover from these issues? Any help is appreciated, thanks.

Answer 1

If anyone has this problem, this is how I solved it. You need to set the video source to a blank image in order to stop the streaming, otherwise it will never, ever stop. This solution works for all scenarios described above:

    private function resetVideo():void
    {           
        //save current source object
        this.videoEventsDisabled = true;
        var videoSource:DynamicStreamingVideoSource = this.videoDisplay.source as DynamicStreamingVideoSource;

        try //switch to blank image, only this will stop the video stream
        {
            this.videoDisplay.source = "assets/images/video_offline.png";
        }
        catch (any:*) {}

        //wait a few seconds and reset video source
        setTimeout(resetVideoSource, 2000, videoSource);
    }

    private function resetVideoSource(videoSource:DynamicStreamingVideoSource):void
    {
        this.videoEventsDisabled = false;
        this.videoDisplay.source = videoSource;
    }

    protected function onMediaPlayerStateChange(event:MediaPlayerStateChangeEvent):void
    {
        if (this.videoEventsDisabled)
        {
            return;
        }

        //something went wrong
        if (event.state == MediaPlayerState.PLAYBACK_ERROR)
        {
            resetVideo();
        }
    }

    protected function onCurrentTimeChange(event:TimeEvent):void
    {
        if (this.videoEventsDisabled)
        {
            return;
        }

        //if there was a number before, and its suddendly NaN, video is offline
        if (isNaN(event.time) && !isNaN(this.previousVideoTime))
        {
            resetVideo();
        }
        else //store event time for future comparisons
        {
            this.previousVideoTime = event.time;
        }
    }

MXML:

<s:VideoDisplay id="videoDisplay" click="onVideoStreamClick(event)" mediaPlayerStateChange="onMediaPlayerStateChange(event)" currentTimeChange="onCurrentTimeChange(event)" muted="{this.videoMuted}" top="10" width="280" height="220" autoPlay="true" horizontalCenter="0">
    <s:source>
        <s:DynamicStreamingVideoSource id="videoSource" streamType="live" host="{FlexGlobals.topLevelApplication.parameters.videoStreamURL}">
            <s:DynamicStreamingVideoItem id="videoItemLow" streamName="{FlexGlobals.topLevelApplication.parameters.videoLow}" bitrate="{FlexGlobals.topLevelApplication.parameters.videoLowBitrate}" />
            <s:DynamicStreamingVideoItem id="videoItemMedium" streamName="{FlexGlobals.topLevelApplication.parameters.videoMedium}" bitrate="{FlexGlobals.topLevelApplication.parameters.videoMediumBitrate}" />
            <s:DynamicStreamingVideoItem id="videoItemHigh" streamName="{FlexGlobals.topLevelApplication.parameters.videoHigh}" bitrate="{FlexGlobals.topLevelApplication.parameters.videoHighBitrate}" />
        </s:DynamicStreamingVideoSource>
    </s:source>
</s:VideoDisplay>

Answer 2

As a variant you may handle NetStream.Play.PublishNotify from NetStream object.

var _source:DynamicStreamingResource;
_source = new DynamicStreamingResource("rtmp://...", StreamType.LIVE);

var streamItems:Vector.<DynamicStreamingItem> = new Vector.<DynamicStreamingItem>();
streamItems.push(new DynamicStreamingItem(streamName, 0));

_source.streamItems = streamItems;

_rtmpDynamicStreamingNetLoader = new RTMPDynamicStreamingNetLoader();
_rtmpDynamicStreamingNetLoader.addEventListener(LoaderEvent.LOAD_STATE_CHANGE, rtmpDynamicStreamingNetLoaderStateChangeHandler);

var cvp:VideoDisplay = new VideoDisplay();

_source.mediaType = MediaType.VIDEO;

var videoElement:MediaElement = new VideoElement(_source, _rtmpDynamicStreamingNetLoader);

cvp.source = videoElement;

private function rtmpDynamicStreamingNetLoaderStateChangeHandler(event:LoaderEvent):void
{
    var netStream:NetStream = event.loadTrait["netStream"] as NetStream;
    if (netStream != null && !netStream.hasEventListener(NetStatusEvent.NET_STATUS)) {
        netStream.addEventListener(NetStatusEvent.NET_STATUS, netStreamNetStatusHandler, false, 0, true);
    }
}

private function netStreamNetStatusHandler(event:NetStatusEvent):void
{
    if (event.info.code == "NetStream.Play.UnpublishNotify") {

    }
    if (event.info.code == "NetStream.Play.PublishNotify") {

    }
 }

Answer 3

I used Johnatan's code along with JayPea's idea to solve my problem!

I used all that Johnatan gave, with the following small change in the netStreamNetStatusHandler():

private function netStreamNetStatusHandler(event:NetStatusEvent):void
{
    trace(event.info.code);

    if (event.info.code == "NetStream.Play.PublishNotify")
    {
        try
        {
            cvp.source = ''; //Doesn't need to be a valid path. Empty string should suffice.
        }
        catch (error:Error)
        {
            trace('Video source error: ' + error.message);
        }

        cvp.source = videoElement;
    }
}

This resets the source when the stream stops and restarts, thus causing the video display to play again.

NOTE: The video display's autoPlay property needs to be set as 'true'.

Answer 4

I know this question was asked many years ago, but it still helped me solving my problem encouraging me diving into the sources of VideoDisplay (since there obviously is no "clean" solution ;-(

And for those who have the same problem my "solution" ,ight be helpful too:

I had to restart the same video after the user clicked abort but then decided to play it again. Without "resetting" VideoDisplay this resulted in a black screen.

Here's how I solved the issue after I found out that in VideoDisplay an internal function "setupSource()" was called when in the commitProperties() function no thumnailSource was defined.

Since the setupSource() function was not publicly accessible I used this:

        myVideoDisplaySpark.enabled = false; // changes properties
        myVideoDisplaySpark.source = "";    // does not harm ;-)
        myVideoDisplaySpark.mx_internal::thumbnailSource = null; // forces a setupSource in commitProperties
        myVideoDisplaySpark.enabled = true;  // finally results in the call if setupSource

That's at least what I understood; and at the end it worked for me ;-)