Tracking de l'application VApp (IHM du jeu)

VApp/node_modules/@videojs/http-streaming/docs/images/dash-playlist-loader-states.nomnoml.svg

@@ -0,0 +1,12 @@
+<svg width="280" height="310" version="1.1" baseProfile="full" viewbox="0 0 280 310" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" style="font-weight:bold; font-size:10pt; font-family:'Arial', Helvetica, sans-serif;;stroke-width:2;stroke-linejoin:round;stroke-linecap:round"><text x="160" y="111" style="font-weight:normal;">load()</text>
+<path d="M140 81 L140 105 L140 129 L140 129 " style="stroke:#33322E;fill:none;stroke-dasharray:none;"></path>
+<path d="M136.8 121 L140 125 L143.2 121 L140 129 Z" style="stroke:#33322E;fill:#33322E;stroke-dasharray:none;"></path>
+<text x="160" y="211" style="font-weight:normal;">media()</text>
+<path d="M140 181 L140 205 L140 229 L140 229 " style="stroke:#33322E;fill:none;stroke-dasharray:none;"></path>
+<path d="M136.8 221 L140 225 L143.2 221 L140 229 Z" style="stroke:#33322E;fill:#33322E;stroke-dasharray:none;"></path>
+<rect x="63" y="30" height="50" width="154" style="stroke:#33322E;fill:#eee8d5;stroke-dasharray:none;"></rect>
+<text x="83" y="60" style="">HAVE_NOTHING</text>
+<rect x="30" y="130" height="50" width="220" style="stroke:#33322E;fill:#eee8d5;stroke-dasharray:none;"></rect>
+<text x="50" y="160" style="">HAVE_MAIN_MANIFEST</text>
+<rect x="56" y="230" height="50" width="168" style="stroke:#33322E;fill:#eee8d5;stroke-dasharray:none;"></rect>
+<text x="76" y="260" style="">HAVE_METADATA</text></svg>

VApp/node_modules/@videojs/http-streaming/docs/images/h264-nal.svg

@@ -0,0 +1,125 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="744.09448819"
+   height="1052.3622047"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.2 r9819"
+   sodipodi:docname="New document 1">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.74898074"
+     inkscape:cx="405.31989"
+     inkscape:cy="721.1724"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1165"
+     inkscape:window-height="652"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g3832">
+      <g
+         transform="translate(-80,0)"
+         id="g3796">
+        <rect
+           style="fill:none;stroke:#000000;stroke-width:4.99253178;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+           id="rect3756"
+           width="195.00757"
+           height="75.007133"
+           x="57.496265"
+           y="302.08554" />
+        <text
+           xml:space="preserve"
+           style="font-size:39.94025421px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
+           x="80.563461"
+           y="353.93951"
+           id="text3758"
+           sodipodi:linespacing="125%"
+           transform="scale(0.99841144,1.0015911)"><tspan
+             sodipodi:role="line"
+             id="tspan3760"
+             x="80.563461"
+             y="353.93951">Header</tspan></text>
+      </g>
+      <g
+         transform="translate(-80,0)"
+         id="g3801">
+        <text
+           xml:space="preserve"
+           style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
+           x="278.44489"
+           y="354.50266"
+           id="text3762"
+           sodipodi:linespacing="125%"><tspan
+             sodipodi:role="line"
+             id="tspan3764"
+             x="278.44489"
+             y="354.50266">Raw Bitstream Payload (RBSP)</tspan></text>
+        <rect
+           style="fill:none;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+           id="rect3768"
+           width="660.63977"
+           height="75"
+           x="252.5"
+           y="302.09293" />
+      </g>
+    </g>
+    <text
+       xml:space="preserve"
+       style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
+       x="10.078175"
+       y="432.12851"
+       id="text3806"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan3808"
+         x="10.078175"
+         y="432.12851">1 byte</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
+       x="-31.193787"
+       y="252.32137"
+       id="text3810"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan3812"
+         x="-31.193787"
+         y="252.32137">H264 Network Abstraction Layer (NAL) Unit</tspan></text>
+  </g>
+</svg>

VApp/node_modules/@videojs/http-streaming/docs/images/playlist-loader-states.nomnoml.svg

@@ -0,0 +1,26 @@
+<svg width="304" height="610" version="1.1" baseProfile="full" viewbox="0 0 304 610" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" style="font-weight:bold; font-size:10pt; font-family:'Arial', Helvetica, sans-serif;;stroke-width:2;stroke-linejoin:round;stroke-linecap:round"><text x="172" y="111" style="font-weight:normal;">load()</text>
+<path d="M152 81 L152 105 L152 129 L152 129 " style="stroke:#33322E;fill:none;stroke-dasharray:none;"></path>
+<path d="M148.8 121 L152 125 L155.2 121 L152 129 Z" style="stroke:#33322E;fill:#33322E;stroke-dasharray:none;"></path>
+<text x="172" y="211" style="font-weight:normal;">media()</text>
+<path d="M152 181 L152 205 L152 229 L152 229 " style="stroke:#33322E;fill:none;stroke-dasharray:none;"></path>
+<path d="M148.8 221 L152 225 L155.2 221 L152 229 Z" style="stroke:#33322E;fill:#33322E;stroke-dasharray:none;"></path>
+<text x="172" y="311" style="font-weight:normal;">media()/ start()</text>
+<path d="M152 281 L152 305 L152 329 L152 329 " style="stroke:#33322E;fill:none;stroke-dasharray:none;"></path>
+<path d="M148.8 321 L152 325 L155.2 321 L152 329 Z" style="stroke:#33322E;fill:#33322E;stroke-dasharray:none;"></path>
+<path d="M152 381 L152 405 L152 429 L152 429 " style="stroke:#33322E;fill:none;stroke-dasharray:4 4;"></path>
+<path d="M148.8 421 L152 425 L155.2 421 L152 429 Z" style="stroke:#33322E;fill:#33322E;stroke-dasharray:none;"></path>
+<path d="M155.2 389 L152 385 L148.8 389 L152 381 Z" style="stroke:#33322E;fill:#33322E;stroke-dasharray:none;"></path>
+<path d="M152 481 L152 505 L152 529 L152 529 " style="stroke:#33322E;fill:none;stroke-dasharray:4 4;"></path>
+<path d="M148.8 521 L152 525 L155.2 521 L152 529 Z" style="stroke:#33322E;fill:#33322E;stroke-dasharray:none;"></path>
+<path d="M155.2 489 L152 485 L148.8 489 L152 481 Z" style="stroke:#33322E;fill:#33322E;stroke-dasharray:none;"></path>
+<rect x="75" y="30" height="50" width="154" style="stroke:#33322E;fill:#eee8d5;stroke-dasharray:none;"></rect>
+<text x="95" y="60" style="">HAVE_NOTHING</text>
+<rect x="42" y="130" height="50" width="220" style="stroke:#33322E;fill:#eee8d5;stroke-dasharray:none;"></rect>
+<text x="62" y="160" style="">HAVE_MAIN_MANIFEST</text>
+<rect x="56" y="230" height="50" width="192" style="stroke:#33322E;fill:#eee8d5;stroke-dasharray:none;"></rect>
+<text x="76.3" y="260" style="">SWITCHING_MEDIA</text>
+<rect x="68" y="330" height="50" width="168" style="stroke:#33322E;fill:#eee8d5;stroke-dasharray:none;"></rect>
+<text x="88" y="360" style="">HAVE_METADATA</text>
+<text x="67" y="460" style="font-weight:normal;font-style:italic;">mediaupdatetimeout</text>
+<rect x="30" y="530" height="50" width="244" style="stroke:#33322E;fill:#eee8d5;stroke-dasharray:none;"></rect>
+<text x="50" y="560" style="">HAVE_CURRENT_METADATA</text></svg>

VApp/node_modules/@videojs/http-streaming/docs/images/sources/dash-playlist-loader-pc-mg-sequence.puml

@@ -0,0 +1,119 @@
+@startuml
+
+header DashPlaylistLoader sequences
+title DashPlaylistLoader sequences: Main Manifest with Alternate Audio
+
+Participant "PlaylistController" as PC #red
+Participant "MainDashPlaylistLoader" as MPL #blue
+Participant "mainSegmentLoader" as SL #blue
+Participant "AudioDashPlaylistLoader" as APL #green
+Participant "audioSegmentLoader" as ASL #green
+Participant "external server" as ext #brown
+Participant "mpdParser" as parser #orange
+Participant "mediaGroups" as MG #purple
+Participant Tech #lightblue
+
+== Initialization ==
+
+PC -> MPL : construct MainPlaylistLoader
+PC -> MPL: load()
+
+== Requesting Main Manifest ==
+
+MPL -> MPL : start()
+
+MPL -> ext: xhr request for main manifest
+ext -> MPL : response with main manifest
+
+MPL -> parser: parse manifest
+parser -> MPL: object representing manifest
+
+note over MPL #lightblue: trigger 'loadedplaylist'
+
+== Requesting Video Manifest ==
+
+note over MPL #lightblue: handling loadedplaylist
+MPL -> MPL: media(x)
+
+alt if no sidx
+  note over MPL #lightgray: zero delay to fake network request
+else if sidx
+  break
+    MPL -> ext: request sidx
+  end
+end
+
+note over MPL #lightblue: trigger 'loadedmetadata' on main loader [T1]
+
+note over MPL #lightblue: handling 'loadedmetadata'
+
+opt vod and preload !== 'none'
+
+  MPL -> SL: playlist()
+  MPL -> SL: load()
+
+end
+
+== Initializing Media Groups, Choosing Active Tracks ==
+
+MPL -> MG: setupMediaGroups()
+MG -> MG: initialize()
+
+== Initializing Alternate Audio Loader ==
+
+MG -> APL: create child playlist loader for alt audio
+
+MG -> MG: activeGroup and audio variant selected
+MG -> MG: enable activeTrack, onTrackChanged()
+MG -> ASL: reset audio segment loader
+
+== Requesting Alternate Audio Manifest ==
+
+MG -> MG: startLoaders()
+
+MG -> APL: load()
+APL -> APL: start()
+APL -> APL: zero delay to fake network request
+
+break finish pending tasks
+  MG -> Tech: add audioTrack
+  MPL -> PC: setupSourceBuffers_()
+  MPL -> PC: setupFirstPlay()
+
+  loop mainSegmentLoader.monitorBufferTick_()
+    SL -> ext: requests media segments
+    ext -> SL: response with media segment bytes
+  end
+end
+
+APL -> APL: zero delay over
+APL -> APL: media(x)
+
+alt if no sidx
+  note over APL #lightgray: zero delay to fake network request
+else if sidx
+  break
+    MPL -> ext: request sidx
+  end
+end
+
+== Requesting Alternate Audio Segments ==
+
+note over APL #lightblue: trigger 'loadedplaylist'
+note over APL #lightblue: handling 'loadedplaylist'
+APL -> ASL: playlist()
+
+
+note over ASL #lightblue: trigger 'loadedmetadata' [T2]
+note over APL #lightblue: handling 'loadedmetadata'
+APL -> ASL: playlist()
+APL -> ASL: load()
+
+loop audioSegmentLoader.monitorBufferTick_()
+
+  ASL -> ext: requests media segments
+  ext -> ASL: response with media segment bytes
+
+end
+
+@enduml

VApp/node_modules/@videojs/http-streaming/docs/images/sources/dash-playlist-loader-states.nomnoml.txt

@@ -0,0 +1,21 @@
+#title: DASH Playlist Loader States
+#arrowSize: 0.5
+#bendSize: 1
+#direction: down
+#gutter: 10
+#edgeMargin: 1
+#edges: rounded
+#fillArrows: false
+#font: Arial
+#fontSize: 10
+#leading: 1
+#lineWidth: 2
+#padding: 20
+#spacing: 50
+#stroke: #33322E
+#zoom: 1
+
+#.label: align=center visual=none italic
+
+[HAVE_NOTHING] load()-> [HAVE_MAIN_MANIFEST]
+[HAVE_MAIN_MANIFEST] media()-> [HAVE_METADATA]

VApp/node_modules/@videojs/http-streaming/docs/images/sources/playlist-loader-pc-mg-sequence.puml

@@ -0,0 +1,114 @@
+@startuml
+
+header PlaylistLoader sequences
+title PlaylistLoader sequences: Main Manifest and Alternate Audio
+
+Participant "PlaylistController" as PC #red
+Participant "MainPlaylistLoader" as MPL #blue
+Participant "mainSegmentLoader" as SL #blue
+Participant "AudioPlaylistLoader" as APL #green
+Participant "audioSegmentLoader" as ASL #green
+Participant "external server" as ext #brown
+Participant "m3u8Parser" as parser #orange
+Participant "mediaGroups" as MG #purple
+Participant Tech #lightblue
+
+== Initialization ==
+
+PC -> MPL : construct MainPlaylistLoader
+PC -> MPL: load()
+
+MPL -> MPL : start()
+
+== Requesting Main Manifest ==
+
+MPL -> ext: xhr request for main manifest
+ext -> MPL : response with main manifest
+
+MPL -> parser: parse main manifest
+parser -> MPL: object representing manifest
+
+note over MPL #lightblue: trigger 'loadedplaylist'
+
+== Requesting Video Manifest ==
+
+note over MPL #lightblue: handling loadedplaylist
+MPL -> MPL : media()
+
+MPL -> ext : request child manifest
+ext -> MPL: child manifest returned
+
+MPL -> parser: parse child manifest
+parser -> MPL: object representing the child manifest
+
+note over MPL #lightblue: trigger 'loadedplaylist'
+note over MPL #lightblue: handleing 'loadedplaylist'
+
+MPL -> SL: playlist()
+MPL -> SL: load()
+
+== Requesting Video Segments ==
+
+note over MPL #lightblue: trigger 'loadedmetadata'
+note over MPL #lightblue: handling 'loadedmetadata'
+
+opt vod and preload !== 'none'
+
+  MPL -> SL: playlist()
+  MPL -> SL: load()
+
+end
+
+MPL -> MG: setupMediaGroups()
+
+== Initializing Media Groups, Choosing Active Tracks ==
+
+MG -> APL: create child playlist loader for alt audio
+
+MG -> MG: activeGroup and audio variant selected
+MG -> MG: enable activeTrack, onTrackChanged()
+MG -> SL: reset mainSegmentLoader
+
+== Requesting Alternate Audio Manifest ==
+
+MG -> MG: startLoaders()
+
+MG -> APL: load()
+APL -> APL: start()
+
+APL -> ext: request alt audio media manifest
+
+break finish pending tasks
+  MG -> Tech: add audioTracks
+  MPL -> PC: setupSourceBuffers()
+  MPL -> PC: setupFirstPlay()
+
+  loop on monitorBufferTick
+    SL -> ext: requests media segments
+    ext -> SL: response with media segment bytes
+  end
+end
+
+ext -> APL: responds with child manifest
+
+APL -> parser: parse child manifest
+parser -> APL: object representing child manifest returned
+
+== Requesting Alternate Audio Segments ==
+
+note over APL #lightblue: trigger 'loadedplaylist'
+note over APL #lightblue: handling 'loadedplaylist'
+APL -> ASL: playlist()
+
+note over APL #lightblue: trigger 'loadedmetadata'
+note over APL #lightblue: handling 'loadedmetadata'
+APL -> ASL: playlist()
+APL -> ASL: load()
+
+loop audioSegmentLoader.load()
+
+  ASL -> ext: requests media segments
+  ext -> ASL: response with media segment bytes
+end
+
+@enduml

VApp/node_modules/@videojs/http-streaming/docs/images/sources/playlist-loader-states.nomnoml.txt

@@ -0,0 +1,25 @@
+#title: Playlist Loader States
+#arrowSize: 0.5
+#bendSize: 1
+#direction: down
+#gutter: 10
+#edgeMargin: 1
+#edges: rounded
+#fillArrows: false
+#font: Arial
+#fontSize: 10
+#leading: 1
+#lineWidth: 2
+#padding: 20
+#spacing: 50
+#stroke: #33322E
+#zoom: 1
+
+#.label: align=center visual=none italic
+
+[HAVE_NOTHING] load()-> [HAVE_MAIN_MANIFEST]
+[HAVE_MAIN_MANIFEST] media()-> [SWITCHING_MEDIA]
+[SWITCHING_MEDIA] media()/ start()-> [HAVE_METADATA]
+
+[HAVE_METADATA] <--> [<label> mediaupdatetimeout]
+[<label> mediaupdatetimeout] <--> [HAVE_CURRENT_METADATA]