+ return html`
`;
}
@@ -947,10 +954,76 @@ export class FrigateCard extends LitElement {
return null;
}
+ protected async _getJSMPEGURL(): Promise
{
+ if (!this._hass) {
+ return null;
+ }
+
+ const request = {
+ type: 'auth/sign_path',
+ path:
+ `/api/frigate/${this.config.frigate_client_id}` +
+ `/jsmpeg/${this.config.frigate_camera_name}`,
+ };
+ // Sign the path so it includes an authSig parameter.
+ let response;
+ try {
+ response = await this._makeWSRequest(signedPathSchema, request);
+ } catch (err) {
+ console.warn(err);
+ return null;
+ }
+ const url = this._hass.hassUrl(response.path);
+ return url.replace(/^http/i, 'ws');
+ }
+
+ protected _resetJSMPEGIfNecessary(): void {
+ if (!this._view.is('live') || this.config.live_provider != 'frigate-jsmpeg') {
+ if (this._jsmpegPlayer) {
+ this._jsmpegPlayer.destroy();
+ this._jsmpegPlayer = null;
+ }
+ this._jsmpegCanvasElement = null;
+ }
+ }
+
+ // Cleanup and/or start the JSMPEG player.
+ protected async _renderJSMPEG(): Promise {
+ if (!this._jsmpegCanvasElement) {
+ this._jsmpegCanvasElement = document.createElement('canvas');
+ this._jsmpegCanvasElement.className = 'media';
+ }
+
+ if (!this._jsmpegPlayer) {
+ const jsmpeg_url = await this._getJSMPEGURL();
+
+ if (!jsmpeg_url) {
+ return this._renderError('Could not retrieve or sign JSMPEG websocket path');
+ }
+
+ return new Promise((resolve) => {
+ this._jsmpegPlayer = new JSMpeg.VideoElement(
+ this,
+ jsmpeg_url,
+ {
+ canvas: this._jsmpegCanvasElement,
+ hooks: {
+ play: () => {
+ resolve(html`${this._jsmpegCanvasElement}`);
+ },
+ },
+ },
+ { protocols: [], videoBufferSize: 1024 * 1024 * 4 },
+ );
+ });
+ }
+ return html`${this._jsmpegCanvasElement}`;
+ }
+
// Render the live viewer.
// Note: The live viewer is the main element used to size the overall card. It
// is always rendered (but sometimes hidden).
- protected _renderLiveViewer(): TemplateResult {
+ protected async _renderLiveViewer(): Promise {
if (!this._hass || !(this.config.camera_entity in this._hass.states)) {
return this._renderAttentionIcon(
'mdi:camera-off',
@@ -960,6 +1033,9 @@ export class FrigateCard extends LitElement {
if (this._webrtcElement) {
return html`${this._webrtcElement}`;
}
+ if (this.config.live_provider == 'frigate-jsmpeg') {
+ return await this._renderJSMPEG();
+ }
return html`