Mobile Widgets

MediaSensor and MediaControl

Introduction
Audio and video support
Display playing progression
Control audio and video playing

Introduction

This part presents how to control audio and video playing.
MediaSensor and MediaControl nodes can be used with audio and video nodes (MovieTexture and AudioClip).

Important:
Before, read basic audio/video tutorial.

Audio and video support

Use a MeMo Player with audio and video support.
See basic audio/video tutorial for more informations.

Display playing progression

MediaSensor node return information about playing progression.
MediaSensor interface:

MediaSensor {
  MFString url ""
  SFTime   mediaCurrentTime 0
  SFTime   mediaDuration 0
  SFBool   isActive FALSE
  MFString status []
}

See MediaSensor documentation for more informations about fields.

In first time we create a text node to display status and progression.

Note:
in a real widget, we can use a progress bar. See prototype tutorial.

Transform2D {
  translation 0 -70
  children [
    Shape {
      appearance Appearance {
        material Material2D {
          emissiveColor 0.0 0.0 0.0
        }
      }
      geometry DEF PROGRESS_TXT Text {
        string [ "progression" ]
        fontStyle FontStyle {
          size size 16
          style "italic"
          justify ["MIDDLE" "MIDDLE"]
        }
      }
    }
  ]
}

We add a MovieTexture node to display video.

Note:
Add video nodes before previous text nodes.

Shape {
  appearance Appearance {
    texture MovieTexture {
      url "http://localhost/arte.mpg"
    }
  }
  geometry Rectangle { size 160 120}
}

And we add the [MediaSensor].
MediaSensor and MovieTexture have the same URL.

DEF MY_MEDIA_SENSOR MediaSensor {
  url "http://localhost/arte.mpg"
}

We add a MovieTexture node to display video.

Note:
Add video nodes before previous text nodes.

Shape {
  appearance Appearance {
    texture MovieTexture {
      url "http://localhost/arte.mpg"
    }
  }
  geometry Rectangle { size 160 120}
}

And we add the MediaSensor.
MediaSensor and MovieTexture have the same URL.

DEF MY_MEDIA_SENSOR MediaSensor {
  url "http://localhost/arte.mpg"
}

We create JavaScript node to display MediaSensor event.
We listen two events:

mediaCurrentTime event (send during video playing): We display current position into media file (in percent).
status event (send media node state): We display current media state (stop, play, ...).

updateMediaProgression() function convert current time into percent value and display it.
updateMediaStatus() function display current media status.

DEF MY_SCRIPT Script {
  eventIn SFTime updateMediaProgression
  eventIn MFString updateMediaStatus
  field SFNode mediaSensor USE MY_MEDIA_SENSOR
  field SFNode progressText USE PROGRESS_TXT
  url "
    function updateMediaProgression () {
      if (mediaSensor.mediaCurrentTime <= 0) {
        progressText.string [0] = ' - ';
      } else {
        var percent = mediaSensor.mediaCurrentTime / mediaSensor.mediaDuration;
        if (percent < 1.0) {
          var roundPrecent = Math.ceil(percent * 100);
          progressText.string [0] = roundPrecent + '%';
        }
      }
    }
    function updateMediaStatus () {
      progressText.string [0] = updateMediaStatus [0];
    }
  "
}

Finally, route MediaSensor events to script functions:

ROUTE MY_MEDIA_SENSOR.mediaCurrentTime TO MY_SCRIPT.updateMediaProgression
ROUTE MY_MEDIA_SENSOR.status TO MY_SCRIPT.updateMediaStatus

Complete source code for this example:

Group {
  children [
    # Background
    Shape {
      appearance Appearance {
        material Material2D {
          emissiveColor 1.0 1.0 1.0
        }
      }
      geometry Rectangle { size 300 300}
    }
    # Video shape
    Shape {
      appearance Appearance {
        texture MovieTexture {
          url "http://localhost/arte.mpg"
        }
      }
      geometry Rectangle { size 160 120}
    }
    # Video sensor
    DEF MY_MEDIA_SENSOR MediaSensor {
      url "http://localhost/arte.mpg"
    }
    # Playing status
    Transform2D {
      translation 0 -70
      children [
        Shape {
          appearance Appearance {
            material Material2D {
              emissiveColor 0.0 0.0 0.0
            }
          }
          geometry DEF PROGRESS_TXT Text {
            string [ "progression" ]
            fontStyle FontStyle {
              size size 16
              style "italic"
              justify ["MIDDLE" "MIDDLE"]
            }
          }
        }
      ]
    }

    DEF MY_SCRIPT Script {
      eventIn SFTime updateMediaProgression
      eventIn MFString updateMediaStatus

      field SFNode mediaSensor USE MY_MEDIA_SENSOR
      field SFNode progressText USE PROGRESS_TXT
      url "
      function updateMediaProgression () {
        if (mediaSensor.mediaCurrentTime <= 0) {
          progressText.string [0] = ' - ';
        } else {
          var percent = mediaSensor.mediaCurrentTime / mediaSensor.mediaDuration;
          if (percent < 1.0) {
            var roundPrecent = Math.ceil(percent * 100);
            progressText.string [0] = roundPrecent + '%';
          }
        }

      }
      function updateMediaStatus () {
        progressText.string [0] = updateMediaStatus [0];
      }
      "
    }

    ROUTE MY_MEDIA_SENSOR.mediaCurrentTime TO MY_SCRIPT.updateMediaProgression
    ROUTE MY_MEDIA_SENSOR.status TO MY_SCRIPT.updateMediaStatus
  ]
}

Control audio and video playing

MediaControl node control media playing.
MediaControl interface:

MediaControl {
  MFString url ""
  SFTime   mediaStartTime 0
  SFTime   mediaStopTime 0
  SFBool   loop FALSE
  SFBool   preRoll TRUE
  SFBool   isPreRolled FALSE
  SFInt32  volume 50
  SFBool   pause FALSE
}

See MediaControl documentation for more informations about fields.