pipeline_model.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 1500 1500">
  <title>MSE Diagram</title>
  <style><![CDATA[
  :focus path, :focus polygon, :focus ellipse { stroke-width: 4}
  .hoverable:hover rect, .hoverable:hover path, .hoverable:hover circle { stroke-width: 4}
  :focus text, g:hover text { stroke: black; stroke-width: .5}
  .sbpl { fill:#cfe2f3;fill-opacity:1;stroke:#000000;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1 }
  .arrow { fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#TriangleOutL);stroke-miterlimit:4;stroke-dasharray:none }
  .videoarrow { fill:none;fill-rule:evenodd;stroke:#e06666;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#TriangleOutLVideo);stroke-miterlimit:4;stroke-dasharray:none }
  .audioarrow { fill:none;fill-rule:evenodd;stroke:#00aa00;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#TriangleOutLAudio);stroke-miterlimit:4;stroke-dasharray:none }
  .line { fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none }
  .audioline { fill:none;fill-rule:evenodd;stroke:#00aa00;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none }
  .interface { fill:none;fill-rule:evenodd;stroke:#666666;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:15 }
  .label { font-style:normal;font-weight:normal;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1 }
  .video { fill:#e06666 }
  .audio { fill:#d9ead3 }
  ]]></style>
  <defs
      id="defs">
    <marker
	orient="auto"
	refY="0.0"
	refX="0.0"
	id="TriangleOutL"
	style="overflow:visible">
      <path
          d="M 5.77,0.0 L -2.88,5.0 L -2.88,-5.0 L 5.77,0.0 z "
          style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1"
          transform="scale(0.8)" />
    </marker>
    <marker
	orient="auto"
	refY="0.0"
	refX="0.0"
	id="TriangleOutLVideo"
	style="overflow:visible">
      <path
          d="M 5.77,0.0 L -2.88,5.0 L -2.88,-5.0 L 5.77,0.0 z "
          style="fill-rule:evenodd;stroke:#e06666;stroke-width:1pt;stroke-opacity:1;fill:#e06666;fill-opacity:1"
          transform="scale(0.8)" />
    </marker>
    <marker
	orient="auto"
	refY="0.0"
	refX="0.0"
	id="TriangleOutLAudio"
	style="overflow:visible">
      <path
          d="M 5.77,0.0 L -2.88,5.0 L -2.88,-5.0 L 5.77,0.0 z "
          style="fill-rule:evenodd;stroke:#00aa00;stroke-width:1pt;stroke-opacity:1;fill:#00aa00;fill-opacity:1"
          transform="scale(0.8)" />
    </marker>
  </defs>

  <g id="MediaSource" transform="translate(450,30)"
     class="hoverable">
    <rect
	class="sbpl"
	width="300"
	height="50"
	x="0"
	y="0"
	ry="8.924449" />
    <text
	xml:space="preserve"
	class="label"
	style="font-size: 26px;"
	x="70"
	y="35">MediaSource
    </text>
  </g>
  <g id="MediaSourceToSourceBuffer">
    <path
	class="arrow"
	d="m 600,80 0,60"/>
  </g>
  <g id="MediaSourceToSourceBuffer">
    <path
	class="arrow"
	d="m 600,80 345,67"/>
  </g>
  <g id="MediaSourceToSourceBuffer">
    <path
	class="arrow"
	d="m 600,80 -345,67"/>
  </g>

  <!-- Media Pipeline 1 -->

  <g id="MediaPipeLine1" transform="translate(150,150)">
    <g id="SourceBufferPipeLine">
      <g id="SourceBuffer" class="hoverable">
	<rect
	    class="sbpl"
	    id="rect4316"
	    width="200"
	    height="80"
	    x="0"
	    y="0"
	    ry="10" />
	<text
	    xml:space="preserve"
	    class="label"
	    style="font-size: 26px;"
	    x="20"
	    y="50">SourceBuffer
	</text>
      </g>
      <g id="SourceBufferToMediaElement">
	<path
	    class="arrow"
	    d="m 100,80 0,80"/>
      </g>
      <g id="MediaElement" class="hoverable">
	<path
	    class="sbpl"
	    d="m 35,250 130,0 -65,-80 z"/>
      </g>
    </g>
    <g id="MediaElementToTrackBuffer">
      <path
	  class="arrow"
	  d="m 100,250 0,80"/>
    </g>
    <g id="MediaElementToTrackBuffer">
      <path
	  class="arrow"
	  d="m 100,250 150,85"/>
    </g>
    <g id="MediaElementToTrackBuffer">
      <path
	  class="arrow"
	  d="m 100,250 -150,85"/>
    </g>
    <g id="TrackBufferPipeline1" transform="translate(-120,350)" >
      <g id="TrackBuffer"  class="hoverable">
	<path
	    class="sbpl"
	    d="m 10,-10 0,80 c 0,0 0,5 30,5 25,0 40,-20 65,-20 25,0 25,5 25,5 l 0,-70 z"/>
	<path
	    class="sbpl"
	    d="m 5,-5 0,80 c 0,0 0,5 30,5 25,0 40,-20 65,-20 25,0 25,5 25,5 l 0,-70 z"/>
	<path
	    class="sbpl"
	    d="m 0,0 0,80 c 0,0 0,5 30,5 25,0 40,-20 65,-20 25,0 25,5 25,5 l 0,-70 z"/>
	<text
	    xml:space="preserve"
	    class="label"
	    style="font-size: 26px;"
	    x="0"
	    y="0">
	  <tspan
	      x="25"
	      y="30">Track
	  </tspan>
	  <tspan
	      x="25"
	      y="60">Buffer
	  </tspan>
	</text>
      </g>
      <g id="TrackBufferToDecoder">
	<path
	    class="arrow"
	    d="m 65,74 0,80"/>
      </g>
      <g id="Decoder"  class="hoverable">
	<rect
	    class="sbpl video"
	    width="130"
	    height="90"
	    x="0"
	    y="165"/>
	<text
	    xml:space="preserve"
	    class="label"
	    style="font-size: 28px"
	    x="0"
	    y="0">
	  <tspan
	      x="20"
	      y="200">Video
	  </tspan>
	  <tspan
	      x="9"
	      y="230">Decoder
	  </tspan>
	</text>
      </g>
      <g id="VideoDecodelToSwitch">
	<path
	    class="videoarrow"
	    d="m 65,255 0,295 890,0"/>
      </g>
    </g>
    <g id="TrackBufferPipeline2" transform="translate(35,350)" >
      <g id="TrackBuffer"  class="hoverable">
	<path
	    class="sbpl"
	    d="m 10,-10 0,80 c 0,0 0,5 30,5 25,0 40,-20 65,-20 25,0 25,5 25,5 l 0,-70 z"/>
	<path
	    class="sbpl"
	    d="m 5,-5 0,80 c 0,0 0,5 30,5 25,0 40,-20 65,-20 25,0 25,5 25,5 l 0,-70 z"/>
	<path
	    class="sbpl"
	    d="m 0,0 0,80 c 0,0 0,5 30,5 25,0 40,-20 65,-20 25,0 25,5 25,5 l 0,-70 z"/>
	<text
	    xml:space="preserve"
	    class="label"
	    style="font-size: 26px;"
	    x="0"
	    y="0">
	  <tspan
	      x="25"
	      y="30">Track
	  </tspan>
	  <tspan
	      x="25"
	      y="60">Buffer
	  </tspan>
	</text>
      </g>
      <g id="TrackBufferToDecoder">
	<path
	    class="arrow"
	    d="m 65,74 0,80"/>
      </g>
      <g id="Decoder"  class="hoverable">
	<rect
	    class="sbpl audio"
	    width="130"
	    height="90"
	    x="0"
	    y="165"/>
	<text
	    xml:space="preserve"
	    class="label"
	    style="font-size: 28px"
	    x="0"
	    y="0">
	  <tspan
	      x="20"
	      y="200">Audio
	  </tspan>
	  <tspan
	      x="9"
	      y="230">Decoder
	  </tspan>
	</text>
      </g>
      <g id="AudioDecoderSwitch">
	<path
	    class="audioline"
	    d="m 65,255 0,55 20,30"/>
	<circle cx="65" cy="340" r="5" stroke="black" stroke-width="3" fill="white" />
	<path
	    class="audioarrow"
	    d="m 65,345 130,65"/>
      </g>
    </g>
    <g id="TrackBufferPipeline3" transform="translate(190,350)" >
      <g id="TrackBuffer"  class="hoverable">
	<path
	    class="sbpl"
	    d="m 10,-10 0,80 c 0,0 0,5 30,5 25,0 40,-20 65,-20 25,0 25,5 25,5 l 0,-70 z"/>
	<path
	    class="sbpl"
	    d="m 5,-5 0,80 c 0,0 0,5 30,5 25,0 40,-20 65,-20 25,0 25,5 25,5 l 0,-70 z"/>
	<path
	    class="sbpl"
	    d="m 0,0 0,80 c 0,0 0,5 30,5 25,0 40,-20 65,-20 25,0 25,5 25,5 l 0,-70 z"/>
	<text
	    xml:space="preserve"
	    class="label"
	    style="font-size: 26px;"
	    x="0"
	    y="0">
	  <tspan
	      x="25"
	      y="30">Track
	  </tspan>
	  <tspan
	      x="25"
	      y="60">Buffer
	  </tspan>
	</text>
      </g>
      <g id="TrackBufferToDecoder">
	<path
	    class="arrow"
	    d="m 65,74 0,80"/>
      </g>
      <g id="Decoder"  class="hoverable">
	<rect
	    class="sbpl audio"
	    width="130"
	    height="90"
	    x="0"
	    y="165"/>
	<text
	    xml:space="preserve"
	    class="label"
	    style="font-size: 28px"
	    x="0"
	    y="0">
	  <tspan
	      x="20"
	      y="200">Audio
	  </tspan>
	  <tspan
	      x="9"
	      y="230">Decoder
	  </tspan>
	</text>
      </g>
      <g id="AudioDecoderSwitch">
	<path
	    class="audioline"
	    d="m 65,255 0,55 8,38"/>
	<circle cx="65" cy="340" r="5" stroke="black" stroke-width="3" fill="white" />
	<path
	    class="audioarrow"
	    d="m 65,343 0,55"/>
      </g>
    </g>
  </g>

  <!-- Media Pipeline 1 end -->


  <!-- Media Pipeline 2 -->

  <g id="MediaPipeLine2" transform="translate(500,150)">
    <g id="SourceBufferPipeLine">
      <g id="SourceBuffer" class="hoverable">
	<rect
	    class="sbpl"
	    id="rect4316"
	    width="200"
	    height="80"
	    x="0"
	    y="0"
	    ry="10" />
	<text
	    xml:space="preserve"
	    class="label"
	    style="font-size: 26px;"
	    x="20"
	    y="50">SourceBuffer
	</text>
      </g>
      <g id="SourceBufferToMediaElement">
	<path
	    class="arrow"
	    d="m 100,80 0,80"/>
      </g>
      <g id="MediaElement" class="hoverable">
	<path
	    class="sbpl"
	    d="m 35,250 130,0 -65,-80 z"/>
      </g>
    </g>
    <g id="MediaElementToTrackBuffer">
      <path
	  class="arrow"
	  d="m 100,250 0,80"/>
    </g>
    <g id="TrackBufferPipeline2" transform="translate(35,350)" >
      <g id="TrackBuffer"  class="hoverable">
	<path
	    class="sbpl"
	    d="m 10,-10 0,80 c 0,0 0,5 30,5 25,0 40,-20 65,-20 25,0 25,5 25,5 l 0,-70 z"/>
	<path
	    class="sbpl"
	    d="m 5,-5 0,80 c 0,0 0,5 30,5 25,0 40,-20 65,-20 25,0 25,5 25,5 l 0,-70 z"/>
	<path
	    class="sbpl"
	    d="m 0,0 0,80 c 0,0 0,5 30,5 25,0 40,-20 65,-20 25,0 25,5 25,5 l 0,-70 z"/>
	<text
	    xml:space="preserve"
	    class="label"
	    style="font-size: 26px;"
	    x="0"
	    y="0">
	  <tspan
	      x="25"
	      y="30">Track
	  </tspan>
	  <tspan
	      x="25"
	      y="60">Buffer
	  </tspan>
	</text>
      </g>
      <g id="TrackBufferToDecoder">
	<path
	    class="arrow"
	    d="m 65,74 0,80"/>
      </g>
      <g id="Decoder"  class="hoverable">
	<rect
	    class="sbpl video"
	    width="130"
	    height="90"
	    x="0"
	    y="165"/>
	<text
	    xml:space="preserve"
	    class="label"
	    style="font-size: 28px"
	    x="0"
	    y="0">
	  <tspan
	      x="20"
	      y="200">Video
	  </tspan>
	  <tspan
	      x="9"
	      y="230">Decoder
	  </tspan>
	</text>
      </g>
      <g id="VideoDecoderToSwitch">
	<path
	    class="videoarrow"
	    d="m 65,255 0,265 385,0"/>
      </g>
    </g>
  </g>

  <!-- Media Pipeline 2 end -->

  <!-- Media Pipeline 3 -->

  <g id="MediaPipeLine2" transform="translate(850,150)">
    <g id="SourceBufferPipeLine">
      <g id="SourceBuffer" class="hoverable">
	<rect
	    class="sbpl"
	    id="rect4316"
	    width="200"
	    height="80"
	    x="0"
	    y="0"
	    ry="10" />
	<text
	    xml:space="preserve"
	    class="label"
	    style="font-size: 26px;"
	    x="20"
	    y="50">SourceBuffer
	</text>
      </g>
      <g id="SourceBufferToMediaElement">
	<path
	    class="arrow"
	    d="m 100,80 0,80"/>
      </g>
      <g id="MediaElement" class="hoverable">
	<path
	    class="sbpl"
	    d="m 35,250 130,0 -65,-80 z"/>
      </g>
    </g>
    <g id="MediaElementToTrackBuffer">
      <path
	  class="arrow"
	  d="m 100,250 0,80"/>
    </g>
    <g id="TrackBufferPipeline2" transform="translate(35,350)" >
      <g id="TrackBuffer"  class="hoverable">
	<path
	    class="sbpl"
	    d="m 10,-10 0,80 c 0,0 0,5 30,5 25,0 40,-20 65,-20 25,0 25,5 25,5 l 0,-70 z"/>
	<path
	    class="sbpl"
	    d="m 5,-5 0,80 c 0,0 0,5 30,5 25,0 40,-20 65,-20 25,0 25,5 25,5 l 0,-70 z"/>
	<path
	    class="sbpl"
	    d="m 0,0 0,80 c 0,0 0,5 30,5 25,0 40,-20 65,-20 25,0 25,5 25,5 l 0,-70 z"/>
	<text
	    xml:space="preserve"
	    class="label"
	    style="font-size: 26px;"
	    x="0"
	    y="0">
	  <tspan
	      x="25"
	      y="30">Track
	  </tspan>
	  <tspan
	      x="25"
	      y="60">Buffer
	  </tspan>
	</text>
      </g>
      <g id="TrackBufferToDecoder">
	<path
	    class="arrow"
	    d="m 65,74 0,80"
	    id="path4679"/>
      </g>
      <g id="Decoder"  class="hoverable">
	<rect
	    class="sbpl audio"
	    width="130"
	    height="90"
	    x="0"
	    y="165"/>
	<text
	    xml:space="preserve"
	    class="label"
	    style="font-size: 28px"
	    x="0"
	    y="0">
	  <tspan
	      x="20"
	      y="200">Audio
	  </tspan>
	  <tspan
	      x="9"
	      y="230">Decoder
	  </tspan>
	</text>
      </g>
      <g id="AudioDecoderSwitch">
	<path
	    class="audioline"
	    d="m 65,255 0,55 8,38"/>
	<circle cx="65" cy="340" r="5" stroke="black" stroke-width="3" fill="white" />
	<path
	    class="audioarrow"
	    d="m 65,345 -515,70"/>
      </g>
    </g>
  </g>

  <!-- Media Pipeline 3 end -->


  <!-- Audio mixer -->
  <g id="Audio mixer" transform="translate(405,940)"
     class="hoverable">
    <circle cx="0" cy="0" r="30" stroke="black" stroke-width="3" class="audio" />
    <path
	class="line"
	d="m -22,-22 44,44"/>
    <path
	class="line"
	d="m 22,-22 -44,44"/>
    <path
	class="audioarrow"
	d="m 30,0 653,0"/>
  </g>
  <!-- Audio mixer end -->
  
  <!-- Audio Device -->

  <g id="AudioDevice" transform="translate(1100,900)"
     class="hoverable">
    <path
	class="sbpl audio"
	d="m 0,40 40,40 170,0 c 50,0 50,-80 0,-80 l -170,0 z"/>
    <text
	xml:space="preserve"
	class="label"
	style="font-size: 28px;"
	x="40"
	y="50">Audio Device
    </text>
  </g>

  <!-- Audio Device end -->
  
  <!-- Video source selector -->
  <g id="VideoSourceSelector" transform="translate(1000,1020)" class="hoverable">
	<circle cx="0" cy="0" r="5" stroke="black" stroke-width="3" fill="white" />
	<circle cx="0" cy="15" r="5" stroke="black" stroke-width="3" fill="white" />
	<circle cx="0" cy="30" r="5" stroke="black" stroke-width="3" fill="white" />
	<path
	    class="videoarrow"
	    d="m 3,3 30,15 56,0"/>
  </g>
  <!-- Video source selector end -->

  <!-- Video Tag Display Region -->
  <g id="VideoTagDisplayRegion" transform="translate(1100,1000)"
     class="hoverable">
    <path
	class="sbpl video"
	d="m 0,40 40,40 170,0 c 50,0 50,-80 0,-80 l -170,0 z"/>
    <text
	xml:space="preserve"
	class="label"
	style="font-size: 26px;">
      <tspan x="40" y="35">Video Tag</tspan>
      <tspan x="40" y="65">Display Region</tspan>
    </text>
  </g>

  <!-- Video Tag Display Region end -->

  <!-- Interface boundary -->
  <g id="InterfaceBoundary" class="hoverable">
    <text
	xml:space="preserve"
	class="label"
	x="20" y="310"
	style="font-size: 20px;fill:#666666;">Media Source API
    </text>
    <path
	class="interface"
	d="m 20,320 1140,0"/>
    <text
	xml:space="preserve"
	class="label"
	x="20" y="345"
	style="font-size: 20px;fill:#666666;">HTML Media Element
    </text>
  </g>
  <!-- Interface boundary end-->

</svg>