Mercurial > code > home > repos > light9
annotate web/light9-vidref-live.js @ 2376:4556eebe5d73
topdir reorgs; let pdm have its src/ dir; separate vite area from light9/
author | drewp@bigasterisk.com |
---|---|
date | Sun, 12 May 2024 19:02:10 -0700 |
parents | light9/web/light9-vidref-live.js@3ae1e7f8db23 |
children |
rev | line source |
---|---|
1939
6f49dc917aa3
start vidref web version. v4l camera frames to web page is working
Drew Perttula <drewp@bigasterisk.com>
parents:
diff
changeset
|
1 import { LitElement, TemplateResult, html, css } from '/node_modules/lit-element/lit-element.js'; |
1951
9f0f2b39ad95
vidref web is working
Drew Perttula <drewp@bigasterisk.com>
parents:
1946
diff
changeset
|
2 import { rounding } from '/node_modules/significant-rounding/index.js'; |
9f0f2b39ad95
vidref web is working
Drew Perttula <drewp@bigasterisk.com>
parents:
1946
diff
changeset
|
3 import './light9-vidref-replay.js'; |
9f0f2b39ad95
vidref web is working
Drew Perttula <drewp@bigasterisk.com>
parents:
1946
diff
changeset
|
4 |
1946
a362b892cb43
more makefile hacks to turn debug.js into an ES6 module
Drew Perttula <drewp@bigasterisk.com>
parents:
1945
diff
changeset
|
5 import debug from '/lib/debug/debug-build-es6.js'; |
a362b892cb43
more makefile hacks to turn debug.js into an ES6 module
Drew Perttula <drewp@bigasterisk.com>
parents:
1945
diff
changeset
|
6 const log = debug('live'); |
1939
6f49dc917aa3
start vidref web version. v4l camera frames to web page is working
Drew Perttula <drewp@bigasterisk.com>
parents:
diff
changeset
|
7 |
6f49dc917aa3
start vidref web version. v4l camera frames to web page is working
Drew Perttula <drewp@bigasterisk.com>
parents:
diff
changeset
|
8 class Light9VidrefLive extends LitElement { |
6f49dc917aa3
start vidref web version. v4l camera frames to web page is working
Drew Perttula <drewp@bigasterisk.com>
parents:
diff
changeset
|
9 |
6f49dc917aa3
start vidref web version. v4l camera frames to web page is working
Drew Perttula <drewp@bigasterisk.com>
parents:
diff
changeset
|
10 static get properties() { |
6f49dc917aa3
start vidref web version. v4l camera frames to web page is working
Drew Perttula <drewp@bigasterisk.com>
parents:
diff
changeset
|
11 return { |
1951
9f0f2b39ad95
vidref web is working
Drew Perttula <drewp@bigasterisk.com>
parents:
1946
diff
changeset
|
12 description: { type: String }, |
9f0f2b39ad95
vidref web is working
Drew Perttula <drewp@bigasterisk.com>
parents:
1946
diff
changeset
|
13 enabled: { type: Boolean } |
1939
6f49dc917aa3
start vidref web version. v4l camera frames to web page is working
Drew Perttula <drewp@bigasterisk.com>
parents:
diff
changeset
|
14 }; |
6f49dc917aa3
start vidref web version. v4l camera frames to web page is working
Drew Perttula <drewp@bigasterisk.com>
parents:
diff
changeset
|
15 } |
1951
9f0f2b39ad95
vidref web is working
Drew Perttula <drewp@bigasterisk.com>
parents:
1946
diff
changeset
|
16 |
9f0f2b39ad95
vidref web is working
Drew Perttula <drewp@bigasterisk.com>
parents:
1946
diff
changeset
|
17 constructor() { |
9f0f2b39ad95
vidref web is working
Drew Perttula <drewp@bigasterisk.com>
parents:
1946
diff
changeset
|
18 super(); |
9f0f2b39ad95
vidref web is working
Drew Perttula <drewp@bigasterisk.com>
parents:
1946
diff
changeset
|
19 this.live = null; |
9f0f2b39ad95
vidref web is working
Drew Perttula <drewp@bigasterisk.com>
parents:
1946
diff
changeset
|
20 } |
9f0f2b39ad95
vidref web is working
Drew Perttula <drewp@bigasterisk.com>
parents:
1946
diff
changeset
|
21 |
9f0f2b39ad95
vidref web is working
Drew Perttula <drewp@bigasterisk.com>
parents:
1946
diff
changeset
|
22 onEnabled() { |
9f0f2b39ad95
vidref web is working
Drew Perttula <drewp@bigasterisk.com>
parents:
1946
diff
changeset
|
23 if (this.shadowRoot.querySelector('#enabled').checked) { |
9f0f2b39ad95
vidref web is working
Drew Perttula <drewp@bigasterisk.com>
parents:
1946
diff
changeset
|
24 |
9f0f2b39ad95
vidref web is working
Drew Perttula <drewp@bigasterisk.com>
parents:
1946
diff
changeset
|
25 this.live = reconnectingWebSocket( |
9f0f2b39ad95
vidref web is working
Drew Perttula <drewp@bigasterisk.com>
parents:
1946
diff
changeset
|
26 'live', (msg) => { |
9f0f2b39ad95
vidref web is working
Drew Perttula <drewp@bigasterisk.com>
parents:
1946
diff
changeset
|
27 this.shadowRoot.querySelector('#live').src = 'data:image/jpeg;base64,' + msg.jpeg; |
9f0f2b39ad95
vidref web is working
Drew Perttula <drewp@bigasterisk.com>
parents:
1946
diff
changeset
|
28 this.description = msg.description; |
9f0f2b39ad95
vidref web is working
Drew Perttula <drewp@bigasterisk.com>
parents:
1946
diff
changeset
|
29 }); |
9f0f2b39ad95
vidref web is working
Drew Perttula <drewp@bigasterisk.com>
parents:
1946
diff
changeset
|
30 this.shadowRoot.querySelector('#liveWidget').style.display = 'block'; |
9f0f2b39ad95
vidref web is working
Drew Perttula <drewp@bigasterisk.com>
parents:
1946
diff
changeset
|
31 } else { |
9f0f2b39ad95
vidref web is working
Drew Perttula <drewp@bigasterisk.com>
parents:
1946
diff
changeset
|
32 if (this.live) { |
9f0f2b39ad95
vidref web is working
Drew Perttula <drewp@bigasterisk.com>
parents:
1946
diff
changeset
|
33 this.live.disconnect(); |
9f0f2b39ad95
vidref web is working
Drew Perttula <drewp@bigasterisk.com>
parents:
1946
diff
changeset
|
34 this.live = null; |
9f0f2b39ad95
vidref web is working
Drew Perttula <drewp@bigasterisk.com>
parents:
1946
diff
changeset
|
35 this.shadowRoot.querySelector('#liveWidget').style.display = 'none'; |
9f0f2b39ad95
vidref web is working
Drew Perttula <drewp@bigasterisk.com>
parents:
1946
diff
changeset
|
36 } |
9f0f2b39ad95
vidref web is working
Drew Perttula <drewp@bigasterisk.com>
parents:
1946
diff
changeset
|
37 } |
1939
6f49dc917aa3
start vidref web version. v4l camera frames to web page is working
Drew Perttula <drewp@bigasterisk.com>
parents:
diff
changeset
|
38 } |
6f49dc917aa3
start vidref web version. v4l camera frames to web page is working
Drew Perttula <drewp@bigasterisk.com>
parents:
diff
changeset
|
39 |
1945 | 40 disconnectedCallback() { |
41 log('bye'); | |
1951
9f0f2b39ad95
vidref web is working
Drew Perttula <drewp@bigasterisk.com>
parents:
1946
diff
changeset
|
42 //close socket |
1945 | 43 |
44 } | |
1954
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
45 |
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
46 static get styles() { |
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
47 return css` |
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
48 :host { |
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
49 display: inline-block; |
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
50 } |
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
51 #live { |
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
52 border: 4px solid orange; |
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
53 } |
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
54 `; |
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
55 } |
1945 | 56 |
1939
6f49dc917aa3
start vidref web version. v4l camera frames to web page is working
Drew Perttula <drewp@bigasterisk.com>
parents:
diff
changeset
|
57 render() { |
6f49dc917aa3
start vidref web version. v4l camera frames to web page is working
Drew Perttula <drewp@bigasterisk.com>
parents:
diff
changeset
|
58 return html` |
1951
9f0f2b39ad95
vidref web is working
Drew Perttula <drewp@bigasterisk.com>
parents:
1946
diff
changeset
|
59 <label><input type="checkbox" id="enabled" ?checked="${this.enabled}" @change="${this.onEnabled}">Show live</label> |
1954
3ae1e7f8db23
vidref playback smoothness, autodelete short clips, manual-delete clips, vidref keyboard shortcuts
Drew Perttula <drewp@bigasterisk.com>
parents:
1951
diff
changeset
|
60 <div id="liveWidget" style="display: none"><img id="live" ></div> |
1939
6f49dc917aa3
start vidref web version. v4l camera frames to web page is working
Drew Perttula <drewp@bigasterisk.com>
parents:
diff
changeset
|
61 `; |
6f49dc917aa3
start vidref web version. v4l camera frames to web page is working
Drew Perttula <drewp@bigasterisk.com>
parents:
diff
changeset
|
62 |
6f49dc917aa3
start vidref web version. v4l camera frames to web page is working
Drew Perttula <drewp@bigasterisk.com>
parents:
diff
changeset
|
63 } |
6f49dc917aa3
start vidref web version. v4l camera frames to web page is working
Drew Perttula <drewp@bigasterisk.com>
parents:
diff
changeset
|
64 } |
6f49dc917aa3
start vidref web version. v4l camera frames to web page is working
Drew Perttula <drewp@bigasterisk.com>
parents:
diff
changeset
|
65 customElements.define('light9-vidref-live', Light9VidrefLive); |