media-stream-player
Version:
Player built on top of media-stream-library
285 lines • 8.85 kB
JavaScript
import React, { useState, useEffect, useMemo } from 'react';
import ReactDOM from 'react-dom';
import { BasicPlayer } from './BasicPlayer';
import { Player } from './Player';
var PlayerVariants;
(function (PlayerVariants) {
PlayerVariants["BASIC"] = "basic";
PlayerVariants["ADVANCED"] = "advanced";
})(PlayerVariants || (PlayerVariants = {}));
/**
* Create a custom element that uses React to mount the actual Player component.
*
* Note that this does not use a shadow DOM to avoid certain issues with React.
*/
export class MediaStreamPlayer extends HTMLElement {
attributeChangeSubscriber(cb) {
this._setState = cb;
}
static get observedAttributes() {
return [
'variant',
'hostname',
'autoplay',
'format',
'compression',
'resolution',
'rotation',
'camera',
'fps',
'audio',
'clock',
'date',
'text',
'textstring',
'textcolor',
'textbackgroundcolor',
'textpos',
'secure',
];
}
get allAttributes() {
const { variant, hostname, autoplay, format, compression, resolution, rotation, camera, fps, audio, clock, date, text, textstring, textcolor, textbackgroundcolor, textpos, secure, } = this;
return {
variant,
hostname,
autoplay,
format,
compression,
resolution,
rotation,
camera,
fps,
audio,
clock,
date,
text,
textstring,
textcolor,
textbackgroundcolor,
textpos,
secure,
};
}
get variant() {
var _a;
return (_a = this.getAttribute('variant')) !== null && _a !== void 0 ? _a : PlayerVariants.ADVANCED;
}
set variant(value) {
this.setAttribute('variant', value);
}
get hostname() {
var _a;
return (_a = this.getAttribute('hostname')) !== null && _a !== void 0 ? _a : '';
}
set hostname(value) {
this.setAttribute('hostname', value);
}
get autoplay() {
return this.hasAttribute('autoplay');
}
set autoplay(value) {
if (value !== undefined) {
this.setAttribute('autoplay', '');
}
else {
this.removeAttribute('autoplay');
}
}
get format() {
var _a;
return (_a = this.getAttribute('format')) !== null && _a !== void 0 ? _a : 'JPEG';
}
set format(value) {
this.setAttribute('format', value);
}
get compression() {
var _a;
return (_a = this.getAttribute('compression')) !== null && _a !== void 0 ? _a : '';
}
set compression(value) {
this.setAttribute('compression', value);
}
get resolution() {
var _a;
return (_a = this.getAttribute('resolution')) !== null && _a !== void 0 ? _a : '';
}
set resolution(value) {
this.setAttribute('resolution', value);
}
get rotation() {
var _a;
return (_a = this.getAttribute('rotation')) !== null && _a !== void 0 ? _a : '';
}
set rotation(value) {
this.setAttribute('rotation', value);
}
get camera() {
var _a;
return (_a = this.getAttribute('camera')) !== null && _a !== void 0 ? _a : '';
}
set camera(value) {
this.setAttribute('camera', value);
}
get fps() {
var _a;
return (_a = this.getAttribute('fps')) !== null && _a !== void 0 ? _a : '';
}
set fps(value) {
this.setAttribute('fps', value);
}
get audio() {
var _a;
return (_a = this.getAttribute('audio')) !== null && _a !== void 0 ? _a : '';
}
set audio(value) {
this.setAttribute('audio', value);
}
get clock() {
var _a;
return (_a = this.getAttribute('clock')) !== null && _a !== void 0 ? _a : '';
}
set clock(value) {
this.setAttribute('clock', value);
}
get date() {
var _a;
return (_a = this.getAttribute('date')) !== null && _a !== void 0 ? _a : '';
}
set date(value) {
this.setAttribute('date', value);
}
get text() {
var _a;
return (_a = this.getAttribute('text')) !== null && _a !== void 0 ? _a : '';
}
set text(value) {
this.setAttribute('text', value);
}
get textstring() {
var _a;
return (_a = this.getAttribute('textstring')) !== null && _a !== void 0 ? _a : '';
}
set textstring(value) {
this.setAttribute('textstring', value);
}
get textcolor() {
var _a;
return (_a = this.getAttribute('textcolor')) !== null && _a !== void 0 ? _a : '';
}
set textcolor(value) {
this.setAttribute('textcolor', value);
}
get textbackgroundcolor() {
var _a;
return (_a = this.getAttribute('textbackgroundcolor')) !== null && _a !== void 0 ? _a : '';
}
set textbackgroundcolor(value) {
this.setAttribute('textbackgroundcolor', value);
}
get textpos() {
var _a;
return (_a = this.getAttribute('textpos')) !== null && _a !== void 0 ? _a : '';
}
set textpos(value) {
this.setAttribute('textpos', value);
}
get secure() {
return this.hasAttribute('secure');
}
set secure(value) {
if (value !== undefined) {
this.setAttribute('secure', '');
}
else {
this.removeAttribute('secure');
}
}
connectedCallback() {
const userGroupUrl = new URL(`http://${this.hostname}/axis-cgi/usergroup.cgi`);
userGroupUrl.protocol = this.secure === true ? 'https' : 'http';
window
.fetch(userGroupUrl.href, {
credentials: 'include',
mode: 'no-cors',
})
.then(() => {
ReactDOM.render(React.createElement(PlayerComponent
// eslint-disable-next-line react/jsx-no-bind
, {
// eslint-disable-next-line react/jsx-no-bind
subscribeAttributesChanged: (cb) => this.attributeChangeSubscriber(cb), initialAttributes: {
...this.allAttributes,
} }), this);
})
.catch((err) => {
console.error(`Authorization failed: ${err.message}`);
});
}
disconnectedCallback() {
ReactDOM.unmountComponentAtNode(this);
}
attributeChangedCallback(attrName, _, value) {
if (this._setState === undefined) {
console.warn(`ignored attribute change: ${attrName}=${value}`);
return;
}
this._setState({
...this.allAttributes,
});
}
}
const PlayerComponent = ({ subscribeAttributesChanged, initialAttributes, }) => {
const [state, setState] = useState(initialAttributes);
useEffect(() => {
subscribeAttributesChanged(setState);
}, [subscribeAttributesChanged]);
const { variant, hostname, autoplay, format, compression, resolution, rotation, camera, fps, audio, clock, date, text, textstring, textcolor, textbackgroundcolor, textpos, secure, } = state;
const vapixParameters = useMemo(() => {
const params = [
{ compression },
{ resolution },
{ rotation },
{ camera },
{ fps },
{ audio },
{ clock },
{ date },
{ text },
{ textstring },
{ textcolor },
{ textbackgroundcolor },
{ textpos },
]
.filter((item) => Object.values(item)[0] !== '')
.map((item) => {
var _a;
return { [Object.keys(item)[0]]: (_a = Object.values(item)[0]) !== null && _a !== void 0 ? _a : '' };
});
return Object.assign({}, ...params);
}, [
compression,
resolution,
rotation,
camera,
fps,
audio,
clock,
date,
text,
textstring,
textcolor,
textbackgroundcolor,
textpos,
]);
switch (variant) {
case PlayerVariants.ADVANCED:
return (React.createElement(Player, { hostname: hostname, autoPlay: autoplay, initialFormat: format, vapixParams: vapixParameters, secure: secure }));
case PlayerVariants.BASIC:
return (React.createElement(BasicPlayer, { hostname: hostname, autoPlay: autoplay, format: format, vapixParams: vapixParameters, secure: secure }));
default:
console.error('No player variant selected');
return null;
}
};
//# sourceMappingURL=MediaStreamPlayer.js.map