light9 Changeset - 3ae1e7f8db23

Changeset - 3ae1e7f8db23

Parent rev.

Child rev.

[Not reviewed]

default

0 8 0

Drew Perttula - 6 years ago 2019-06-06 02:28:28
drewp@bigasterisk.com

vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Ignore-this: 6daccf686fd66561029f3252ed4dbafd

8 files changed with 198 insertions and 50 deletions:

bin/vidref

light9/ascoltami/webapp.py

light9/vidref/index.html

light9/vidref/videorecorder.py

light9/web/light9-vidref-live.js

light9/web/light9-vidref-replay-stack.js

light9/web/light9-vidref-replay.js

light9/web/style.css

0 comments (0 inline, 0 general)

bin/vidref

➞

Show inline comments

@@ @@ -24,9 +24,9 @@ from light9 import networking, showconfi @@
 from light9.vidref import videorecorder
 from rdflib import URIRef
 from light9.newtypes import Song
 from light9.namespaces import L9
 from rdfdb.syncedgraph import SyncedGraph
 from cycloneerr import PrettyErrorHandler
 from typing import cast
 parser = optparse.OptionParser()
 parser.add_option("-v", "--verbose", action="store_true", help="logging.DEBUG")
@@ @@ -96,13 +96,12 @@ class Time(cyclone.web.RequestHandler): @@
         self.set_status(202)
 def takeUri(songPath: bytes):
     p = songPath.decode('ascii').split('/')
     take = p[-1].replace('.mp4', '')
     song = p[-2].split('_')
     return URIRef('/'.join(
         ['http://light9.bigasterisk.com/show', song[-2], song[-1], take]))
 class Clips(PrettyErrorHandler, cyclone.web.RequestHandler):
     def delete(self):
         clip = URIRef(self.get_argument('uri'))
         videorecorder.deleteClip(clip)
 class ReplayMap(PrettyErrorHandler, cyclone.web.RequestHandler):
@@ @@ -120,12 +119,12 @@ class ReplayMap(PrettyErrorHandler, cycl @@
                          ):].decode('ascii')
             clips.append({
                 'uri': takeUri(vid),
+                'uri': videorecorder.takeUri(vid),
                 'videoUrl': url,
                 'songToVideo': pts
             })
         clips.sort(key=lambda c: len(c['songToVideo']))
+        clips.sort(key=lambda c: len(cast(list, c['songToVideo'])))
         clips = clips[-3:]
         clips.sort(key=lambda c: c['uri'], reverse=True)
@@ @@ -153,6 +152,7 @@ reactor.listenTCP( @@
                 'default_filename': 'setup.html'
             }),
             (r'/live', Live),
             (r'/clips', Clips),
             (r'/replayMap', ReplayMap),
             (r'/snapshot', Snapshot),
             (r'/snapshot/(.*)', SnapshotPic, {

light9/ascoltami/webapp.py

➞

Show inline comments

@@ @@ -154,6 +154,14 @@ class seekPlayOrPause(PrettyErrorHandler @@
             player.pause()
             player.seek(data['scrub'])
             return
         if 'action' in data:
             if data['action'] == 'play':
                 player.resume()
             elif data['action'] == 'pause':
                 player.pause()
             else:
                 raise NotImplementedError
             return
         if player.isPlaying():
             player.pause()
         else:

light9/vidref/index.html

➞

Show inline comments

@@ @@ -3,25 +3,50 @@ @@
   <head>
     <title>vidref</title>
     <meta charset="utf-8" />
     <style>
+     <link rel="stylesheet" href="/style.css">
     </style>
     <script src="/lib/debug/debug-build.js"></script>
     <script>
      debug.enable('*');
     </script>
     <script src="/lib/jquery/dist/jquery.slim.min.js"></script>
     <script src="/websocket.js"></script>
     <script type="module" src="/light9-vidref-live.js"></script>
     <script type="module" src="/light9-vidref-replay-stack.js"></script>
   </head>
   <body>
-    Live:
+    <h1>vidref</h1>
     <div>
       <light9-vidref-live></light9-vidref-live>
     </div>
     <light9-vidref-replay-stack></light9-vidref-replay-stack>
     <light9-vidref-replay-stack id="rs"></light9-vidref-replay-stack>
     <div class="keys">Keys:
       <span class="keyCap">s</span> stop,
       <span class="keyCap">p</span> play,
       <span class="keyCap">,/.</span> step
     </div>
       <script>
        const log = debug('index');
        document.addEventListener('keypress', (ev) => {
          const nudge = (dt) => {
            const newTime = document.querySelector('#rs').songTime + dt;
            fetch('/ascoltami/seekPlayOrPause', {
              method: 'POST',
              body: JSON.stringify({scrub: newTime}),
            });
          };
 stats of all disk usage
          if (ev.code == 'KeyP') {
            fetch('/ascoltami/seekPlayOrPause',
                  {method: 'POST', body: JSON.stringify({action: 'play'})});
          } else if (ev.code == 'KeyS') {
            fetch('/ascoltami/seekPlayOrPause',
                  {method: 'POST', body: JSON.stringify({action: 'pause'})});
          } else if (ev.code == 'Comma') {
            nudge(-.1);
          } else if (ev.code == 'Period') {
            nudge(.1);
+         }
        });
       </script>
   </body>
 </html>

light9/vidref/videorecorder.py

➞

Show inline comments

@@ @@ -11,6 +11,7 @@ import PIL.Image @@
 from gi.repository import Gst
 from rx.subject import BehaviorSubject
 from twisted.internet import threads
 from rdflib import URIRef
 import moviepy.editor
 import numpy
@@ @@ -42,6 +43,22 @@ def songDir(song: Song) -> bytes: @@
         showconfig.root(), b'video',
         song.replace('http://', '').replace('/', '_').encode('ascii'))
 def takeUri(songPath: bytes) -> URIRef:
     p = songPath.decode('ascii').split('/')
     take = p[-1].replace('.mp4', '')
     song = p[-2].split('_')
     return URIRef('/'.join(
         ['http://light9.bigasterisk.com/show', song[-2], song[-1], take]))
 def deleteClip(uri: URIRef):
     # uri http://light9.bigasterisk.com/show/dance2019/song6/take_155
     # path show/dance2019/video/light9.bigasterisk.com_show_dance2019_song6/take_155.*
     w = uri.split('/')[-4:]
     path = '/'.join([w[0], w[1], 'video',
                      f'light9.bigasterisk.com_{w[0]}_{w[1]}_{w[2]}', w[3]])
     log.info(f'deleting {uri} {path}')
     for fn in [path + '.mp4', path + '.timing']:
         os.remove(fn)
 class FramesToVideoFiles:
     """
@@ @@ -66,7 +83,7 @@ class FramesToVideoFiles: @@
         self.root = root
         self.nextImg: Optional[CaptureFrame] = None
         self.currentOutputClip = None
+        self.currentOutputClip: Optional[moviepy.editor.VideoClip] = None
         self.currentOutputSong: Optional[Song] = None
         self.nextWriteAction = 'ignore'
         self.frames.subscribe(on_next=self.onFrame)
@@ @@ -101,7 +118,7 @@ class FramesToVideoFiles: @@
         """
         return threads.deferToThread(self._bg_save, outBase)
     def _bg_save(self, outBase):
+    def _bg_save(self, outBase: bytes):
         os.makedirs(os.path.dirname(outBase), exist_ok=True)
         self.frameMap = open(outBase + b'.timing', 'wt')
@@ @@ -109,6 +126,8 @@ class FramesToVideoFiles: @@
         # we get to call write_frame on a FFMPEG_VideoWriter instead
         # of it calling us back.
         self.currentClipFrameCount = 0
         # (immediately calls make_frame)
         self.currentOutputClip = moviepy.editor.VideoClip(self._bg_make_frame,
                                                           duration=999.)
@@ @@ -117,12 +136,13 @@ class FramesToVideoFiles: @@
         self.currentOutputClip.fps = 10
         log.info(f'write_videofile {outBase} start')
         try:
             self.currentOutputClip.write_videofile(outBase.decode('ascii') +
                                                    '.mp4',
             self.outMp4 = outBase.decode('ascii') + '.mp4'
             self.currentOutputClip.write_videofile(self.outMp4,
                                                    codec='libx264',
                                                    audio=False,
                                                    preset='ultrafast',
                                                    logger=None,
                                                    ffmpeg_params=['-g', '10'],
                                                    bitrate='150000')
         except (StopIteration, RuntimeError):
             self.frameMap.close()
@@ @@ -130,6 +150,11 @@ class FramesToVideoFiles: @@
         log.info('write_videofile done')
         self.currentOutputClip = None
         if self.currentClipFrameCount < 400:
             log.info('too small- deleting')
             deleteClip(takeUri(self.outMp4.encode('ascii')))
     def _bg_make_frame(self, video_time_secs):
         if self.nextWriteAction == 'close':
             raise StopIteration  # the one in write_videofile
@@ @@ -146,6 +171,7 @@ class FramesToVideoFiles: @@
         cf, self.nextImg = self.nextImg, None
         self.frameMap.write(f'video {video_time_secs:g} = song {cf.t:g}\n')
         self.currentClipFrameCount += 1
         return numpy.asarray(cf.img)

light9/web/light9-vidref-live.js

➞

Show inline comments

@@ @@ -14,15 +14,6 @@ class Light9VidrefLive extends LitElemen @@
         };
+    }
     static get styles() {
         return css`
         :host {
             border: 2px solid #46a79f;
             display: inline-block;
+        }
         `;
+    }
     constructor() {
         super();
         this.live = null;
@@ @@ -52,12 +43,21 @@ class Light9VidrefLive extends LitElemen @@
+    }
     static get styles() {
         return css`
         :host {
             display: inline-block;
+        }
 #live {
 border: 4px solid orange;
+}
         `;
+    }
     render() {
         return html`
 <div>
   <label><input type="checkbox" id="enabled" ?checked="${this.enabled}" @change="${this.onEnabled}">Show live</label>
   <div id="liveWidget"><img id="live" ></div>
 </div>
   <div id="liveWidget" style="display: none"><img id="live" ></div>
 `;
+    }

light9/web/light9-vidref-replay-stack.js

➞

Show inline comments

@@ @@ -23,17 +23,19 @@ class Light9VidrefReplayStack extends Li @@
     setVideoTimesFromSongTime() {
         this.shadowRoot.querySelectorAll('light9-vidref-replay').forEach(
             (r) => {
                 r.setVideoTimeFromSongTime(this.songTime);
+                r.setVideoTimeFromSongTime(this.songTime, this.musicState.playing);
             });
+    }
     nudgeTime(dt) {
         this.songTime += dt;
         log('song now', this.songTime);
+    }
     fineTime() {
         if (this.musicState.playing) {
             const sinceLastUpdate = (Date.now() - this.musicState.reportTime) / 1000;
             this.songTime = sinceLastUpdate + this.musicState.tStart;
             this.songTimeRangeInput.value = this.songTime;
         } else  {
-            //this.songTime = this.musicState.t;
             this.songTime = this.musicState.t;
+        }
         requestAnimationFrame(this.fineTime.bind(this));
+    }
@@ @@ -63,7 +65,6 @@ class Light9VidrefReplayStack extends Li @@
         if (this.musicState.song != this.song) {
             this.song = this.musicState.song;
             this.getReplayMapForSong(this.song);
+        }
+    }
@@ @@ -87,8 +88,6 @@ class Light9VidrefReplayStack extends Li @@
             node.uri = msg[i].uri;
             node.videoUrl = msg[i].videoUrl;
             node.songToVideo = msg[i].songToVideo;
         });
         this.setVideoTimesFromSongTime();
+    }
@@ @@ -114,13 +113,12 @@ class Light9VidrefReplayStack extends Li @@
             method: 'POST',
             body: JSON.stringify({scrub: st}),
         });
+    }
     static get styles() {
         return css`
         :host {
+           display: inline-block;
+        }
         #songTime {
             width: 100%;
@@ @@ -129,19 +127,30 @@ class Light9VidrefReplayStack extends Li @@
 display: flex;
 flex-direction: column;
+}
         a {
             color: rgb(97, 97, 255);
+        }
         #songTime {
             font-size: 27px;
+        }
         `;
+    }
     render() {
         return html`
 <div>
   <div><input id="songTime" type="range" @input="${this.userMovedSongTime}" min="0" max="0" step=".001"></div>
   <div>${this.musicState.song}</div>
   <div>showing song time ${rounding(this.songTime, 3)} (${rounding(this.musicState.t, 3)})</div>
     <input id="songTime" type="range"
            .value="${this.songTime}"
            @input="${this.userMovedSongTime}"
            min="0" max="0" step=".001"></div>
   <div><a href="${this.musicState.song}">${this.musicState.song}</a></div>
   <div id="songTime">showing song time ${rounding(this.songTime, 3)}</div>
 <div>clips:</div>
 <div id="clips">
    ${this.players}
 </div>
   <div>
     <button @click="${this.onClipsChanged}">Refresh clips for song</button>
 </div>
 `;

light9/web/light9-vidref-replay.js

➞

Show inline comments

 import { LitElement, TemplateResult, html, css } from '/node_modules/lit-element/lit-element.js';
 import debug from '/lib/debug/debug-build-es6.js';
 import _ from '/lib/underscore/underscore-min-es6.js';
 import { rounding }  from '/node_modules/significant-rounding/index.js';
 const log = debug('replay');
@@ @@ -12,21 +13,60 @@ class Light9VidrefReplay extends LitElem @@
             videoUrl: { type: String },
             songToVideo: { type: Object },
             videoTime: { type: Number },
             outVideoCurrentTime: { type: Number },
             timeErr: { type: Number },
             playRate: { type: Number }
         };
+    }
     setVideoTimeFromSongTime(songTime) {
         if (!this.songToVideo || !this.outVideo) {
     estimateRate() {
         const n = this.songToVideo.length;
         const x0 = Math.round(n * .3);
         const x1 = Math.round(n * .6);
         const pt0 = this.songToVideo[x0];
         const pt1 = this.songToVideo[x1];
         return (pt1[1] - pt0[1]) / (pt1[0] - pt0[0]);
+    }
     setVideoTimeFromSongTime(songTime, isPlaying) {
         if (!this.songToVideo || !this.outVideo || this.outVideo.readyState < 1) {
             return;
+        }
         const i = _.sortedIndex(this.songToVideo, [songTime],
                                 (row) => { return row[0]; });
         this.videoTime = this.songToVideo[Math.max(0, i - 1)][1];
         this.outVideoCurrentTime = this.outVideo.currentTime;
         if (isPlaying) {
             if (this.outVideo.paused) {
                 this.outVideo.play();
                 this.setRate(this.estimateRate());
+            }
             const err = this.outVideo.currentTime - this.videoTime;
             this.timeErr = err;
             if (Math.abs(err) > window.thresh) {
         this.outVideo.currentTime = this.videoTime;
                 const p = window.p;
                 if (err > 0) {
                     this.setRate(this.playRate - err * p);
                 } else {
                     this.setRate(this.playRate - err * p);
+                }
+            }
         } else {
             this.outVideo.pause();
             this.outVideoCurrentTime = this.outVideo.currentTime = this.videoTime;
             this.timeErr = 0;
+        }
+    }
     setRate(r) {
         this.playRate = Math.max(.1, Math.min(4, r));
         this.outVideo.playbackRate = this.playRate;
+    }
     firstUpdated() {
         this.outVideo = this.shadowRoot.querySelector('#replay');
         this.playRate = this.outVideo.playbackRate = 1.0;
+    }
     onDelete() {
@@ @@ -42,23 +82,45 @@ class Light9VidrefReplay extends LitElem @@
     static get styles() {
         return css`
         :host {
             margin: 5px;
             border: 2px solid #46a79f;
             display: flex;
             flex-direction: column;
+        }
         div {
             padding: 5px;
+        }
         .num {
             display: inline-block;
             width: 4em;
             color: #29ffa0;
+        }
         a {
             color: rgb(97, 97, 255);
+        }
         `;
+    }
     render() {
         return html`
   <video id="replay" src="${this.videoUrl}"></video>
 <div>
   <div><video id="replay" src="${this.videoUrl}"></video></div>
   <div>take is ${this.uri} (${Object.keys(this.songToVideo).length} frames)</div>
   <!-- a little canvas showing what coverage we have -->
   <div>video time is ${this.videoTime}</div>
     take is <a href="${this.uri}">${this.uri}</a>
     (${Object.keys(this.songToVideo).length} frames)
   <button @click="${this.onDelete}">Delete</button>
 </div>
   <!-- here, put a little canvas showing what coverage we have with the
        actual/goal time cursors -->
   <div>
     video time should be <span class="num">${this.videoTime} </span>
     actual = <span class="num">${rounding(this.outVideoCurrentTime, 3)}</span>,
     err = <span class="num">${rounding(this.timeErr, 3)} </span>
     rate = <span class="num">${rounding(this.playRate, 3)}</span>
   </div>
 `;
+    }
+}
 customElements.define('light9-vidref-replay', Light9VidrefReplay);
 window.thresh=.3
 window.p=.3

light9/web/style.css

➞

Show inline comments

@@ @@ -73,6 +73,24 @@ button a { @@
 .key {
     color: #888;
+}
 div.keys {
     margin-top: 10px;
     padding: 5px;
+}
 .keyCap {
     color: #ccc;
     background: #525252;
     display: inline-block;
     border: 1px outset #b3b3b3;
     padding: 2px 3px;
     margin: 3px 0;
     font-size: 16px;
     box-shadow: 0.9px 0.9px 0px 2px #565656;
     border-radius: 2px;
+}
 .currentSong button {
     background: #a90707;
+}

0 comments (0 inline, 0 general)