jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-11-10 19:40:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add WebRTC stream player (#10193)

Browse Source 
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Allen Porter
2021-10-13 01:14:33 -07:00
committed by GitHub
parent 7472545204
commit 4ad005f0bf
4 changed files with 219 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/components/ha-camera-stream.ts
View File

@@ -15,9 +15,12 @@ import {
CAMERA_SUPPORT_STREAM,
computeMJPEGStreamUrl,
fetchStreamUrl,
STREAM_TYPE_HLS,
STREAM_TYPE_WEB_RTC,
} from "../data/camera";
import { HomeAssistant } from "../types";
import "./ha-hls-player";
import "./ha-web-rtc-player";
@customElement("ha-camera-stream")
class HaCameraStream extends LitElement {
@@ -34,8 +37,8 @@ class HaCameraStream extends LitElement {
@property({ type: Boolean, attribute: "allow-exoplayer" })
public allowExoPlayer = false;
// We keep track if we should force MJPEG with a string
// that way it automatically resets if we change entity.
// We keep track if we should force MJPEG if there was a failure
// to get the HLS stream url. This is reset if we change entities.
@state() private _forceMJPEG?: string;
@state() private _url?: string;
@@ -48,7 +51,8 @@ class HaCameraStream extends LitElement {
!this._shouldRenderMJPEG &&
this.stateObj &&
(changedProps.get("stateObj") as CameraEntity | undefined)?.entity_id !==
this.stateObj.entity_id
this.stateObj.entity_id &&
this.stateObj!.attributes.stream_type === STREAM_TYPE_HLS
) {
this._forceMJPEG = undefined;
this._url = undefined;
@@ -70,43 +74,64 @@ class HaCameraStream extends LitElement {
if (!this.stateObj) {
return html``;
}
return html`
${__DEMO__ || this._shouldRenderMJPEG
? html`
<img
.src=${__DEMO__
? this.stateObj!.attributes.entity_picture!
: this._connected
? computeMJPEGStreamUrl(this.stateObj)
: ""}
.alt=${`Preview of the ${computeStateName(
this.stateObj
)} camera.`}
/>
`
: this._url
? html`
<ha-hls-player
autoplay
playsinline
.allowExoPlayer=${this.allowExoPlayer}
.muted=${this.muted}
.controls=${this.controls}
.hass=${this.hass}
.url=${this._url}
></ha-hls-player>
`
: ""}
`;
if (__DEMO__ || this._shouldRenderMJPEG) {
return html` <img
.src=${__DEMO__
? this.stateObj.attributes.entity_picture!
: this._connected
? computeMJPEGStreamUrl(this.stateObj)
: ""}
.alt=${`Preview of the ${computeStateName(this.stateObj)} camera.`}
/>`;
}
if (this.stateObj.attributes.stream_type === STREAM_TYPE_HLS && true) {
return this._url
? html` <ha-hls-player
autoplay
playsinline
.allowExoPlayer=${this.allowExoPlayer}
.muted=${this.muted}
.controls=${this.controls}
.hass=${this.hass}
.url=${this._url}
></ha-hls-player>`
: html``;
}
if (this.stateObj.attributes.stream_type === STREAM_TYPE_WEB_RTC) {
return html` <ha-web-rtc-player
autoplay
playsinline
.muted=${this.muted}
.controls=${this.controls}
.hass=${this.hass}
.entityid=${this.stateObj.entity_id}
></ha-web-rtc-player>`;
}
return html``;
}
private get _shouldRenderMJPEG() {
return (
this._forceMJPEG === this.stateObj!.entity_id ||
if (this._forceMJPEG === this.stateObj!.entity_id) {
// Fallback when unable to fetch stream url
return true;
}
if (
!isComponentLoaded(this.hass!, "stream") ||
!supportsFeature(this.stateObj!, CAMERA_SUPPORT_STREAM)
);
) {
// Steaming is not supported by the camera so fallback to MJPEG stream
return true;
}
if (
this.stateObj!.attributes.stream_type === STREAM_TYPE_WEB_RTC &&
typeof RTCPeerConnection === "undefined"
) {
// Stream requires WebRTC but browser does not support, so fallback to
// MJPEG stream.
return true;
}
// Render stream
return false;
}
private async _getStreamUrl(): Promise<void> {