Add WebRTC stream player (#10193)

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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 219 additions and 36 deletions

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> {

View File

@ -0,0 +1,135 @@
import {
css,
CSSResultGroup,
html,
LitElement,
PropertyValues,
TemplateResult,
} from "lit";
import { customElement, property, state, query } from "lit/decorators";
import { handleWebRtcOffer, WebRtcAnswer } from "../data/camera";
import type { HomeAssistant } from "../types";
import "./ha-alert";
/**
* A WebRTC stream is established by first sending an offer through a signal
* path via an integration. An answer is returned, then the rest of the stream
* is handled entirely client side.
*/
@customElement("ha-web-rtc-player")
class HaWebRtcPlayer extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property() public entityid!: string;
@property({ type: Boolean, attribute: "controls" })
public controls = false;
@property({ type: Boolean, attribute: "muted" })
public muted = false;
@property({ type: Boolean, attribute: "autoplay" })
public autoPlay = false;
@property({ type: Boolean, attribute: "playsinline" })
public playsInline = false;
@state() private _error?: string;
// don't cache this, as we remove it on disconnects
@query("#remote-stream") private _videoEl!: HTMLVideoElement;
protected render(): TemplateResult {
if (this._error) {
return html`<ha-alert alert-type="error">${this._error}</ha-alert>`;
}
return html`
<video
id="remote-stream"
?autoplay=${this.autoPlay}
.muted=${this.muted}
?playsinline=${this.playsInline}
?controls=${this.controls}
></video>
`;
}
public disconnectedCallback() {
super.disconnectedCallback();
this._cleanUp();
}
protected updated(changedProperties: PropertyValues<this>) {
if (!changedProperties.has("entityid")) {
return;
}
if (!this._videoEl) {
return;
}
this._startWebRtc();
}
private async _startWebRtc(): Promise<void> {
this._error = undefined;
const peerConnection = new RTCPeerConnection();
// Some cameras (such as nest) require a data channel to establish a stream
// however, not used by any integrations.
peerConnection.createDataChannel("dataSendChannel");
const offerOptions: RTCOfferOptions = {
offerToReceiveAudio: true,
offerToReceiveVideo: true,
};
const offer: RTCSessionDescriptionInit = await peerConnection.createOffer(
offerOptions
);
await peerConnection.setLocalDescription(offer);
let webRtcAnswer: WebRtcAnswer;
try {
webRtcAnswer = await handleWebRtcOffer(
this.hass,
this.entityid,
offer.sdp!
);
} catch (err: any) {
this._error = "Failed to start WebRTC stream: " + err.message;
return;
}
// Setup callbacks to render remote stream once media tracks are discovered.
const remoteStream = new MediaStream();
peerConnection.addEventListener("track", (event) => {
remoteStream.addTrack(event.track);
this._videoEl.srcObject = remoteStream;
});
// Initiate the stream with the remote device
const remoteDesc = new RTCSessionDescription({
type: "answer",
sdp: webRtcAnswer.answer,
});
await peerConnection.setRemoteDescription(remoteDesc);
}
private _cleanUp() {
if (this._videoEl) {
const videoEl = this._videoEl;
videoEl.removeAttribute("src");
videoEl.load();
}
}
static get styles(): CSSResultGroup {
return css`
video {
display: block;
}
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-web-rtc-player": HaWebRtcPlayer;
}
}

View File

@ -9,11 +9,15 @@ import { getSignedPath } from "./auth";
export const CAMERA_SUPPORT_ON_OFF = 1;
export const CAMERA_SUPPORT_STREAM = 2;
export const STREAM_TYPE_HLS = "hls";
export const STREAM_TYPE_WEB_RTC = "web_rtc";
interface CameraEntityAttributes extends HassEntityAttributeBase {
model_name: string;
access_token: string;
brand: string;
motion_detection: boolean;
stream_type: string;
}
export interface CameraEntity extends HassEntityBase {
@ -33,6 +37,10 @@ export interface Stream {
url: string;
}
export interface WebRtcAnswer {
answer: string;
}
export const computeMJPEGStreamUrl = (entity: CameraEntity) =>
`/api/camera_proxy_stream/${entity.entity_id}?token=${entity.attributes.access_token}`;
@ -78,6 +86,17 @@ export const fetchStreamUrl = async (
return stream;
};
export const handleWebRtcOffer = (
hass: HomeAssistant,
entityId: string,
offer: string
) =>
hass.callWS<WebRtcAnswer>({
type: "camera/web_rtc_offer",
entity_id: entityId,
offer: offer,
});
export const fetchCameraPrefs = (hass: HomeAssistant, entityId: string) =>
hass.callWS<CameraPreferences>({
type: "camera/get_prefs",

View File

@ -17,6 +17,7 @@ import {
CameraPreferences,
CAMERA_SUPPORT_STREAM,
fetchCameraPrefs,
STREAM_TYPE_HLS,
updateCameraPrefs,
} from "../../../data/camera";
import type { HomeAssistant } from "../../../types";
@ -82,7 +83,10 @@ class MoreInfoCamera extends LitElement {
if (
curEntityId &&
isComponentLoaded(this.hass!, "stream") &&
supportsFeature(this.stateObj!, CAMERA_SUPPORT_STREAM)
supportsFeature(this.stateObj!, CAMERA_SUPPORT_STREAM) &&
// The stream component for HLS streams supports a server-side pre-load
// option that client initiated WebRTC streams do not
this.stateObj!.attributes.stream_type === STREAM_TYPE_HLS
) {
// Fetch in background while we set up the video.
this._fetchCameraPrefs();