media-stream-player/dist/esm/PlaybackArea.js

Player built on top of media-stream-library

import React from 'react';
import debug from 'debug';
import { WsRtspVideo } from './WsRtspVideo';
import { WsRtspCanvas } from './WsRtspCanvas';
import { StillImage } from './StillImage';
import { HttpMp4Video } from './HttpMp4Video';
const debugLog = debug('msp:api');
export var AxisApi;
(function (AxisApi) {
    AxisApi["AXIS_IMAGE_CGI"] = "AXIS_IMAGE_CGI";
    AxisApi["AXIS_MEDIA_AMP"] = "AXIS_MEDIA_AMP";
    AxisApi["AXIS_MEDIA_CGI"] = "AXIS_MEDIA_CGI";
})(AxisApi || (AxisApi = {}));
export var Format;
(function (Format) {
    Format["RTP_H264"] = "RTP_H264";
    Format["RTP_JPEG"] = "RTP_JPEG";
    Format["JPEG"] = "JPEG";
    Format["MP4_H264"] = "MP4_H264";
})(Format || (Format = {}));
export var Protocol;
(function (Protocol) {
    Protocol["HTTP"] = "http:";
    Protocol["HTTPS"] = "https:";
    Protocol["WS"] = "ws:";
    Protocol["WSS"] = "wss:";
})(Protocol || (Protocol = {}));
export const FORMAT_API = {
    RTP_H264: AxisApi.AXIS_MEDIA_AMP,
    RTP_JPEG: AxisApi.AXIS_MEDIA_AMP,
    MP4_H264: AxisApi.AXIS_MEDIA_CGI,
    JPEG: AxisApi.AXIS_IMAGE_CGI,
};
const wsUri = (protocol, host) => {
    return host.length !== 0 ? `${protocol}//${host}/rtsp-over-websocket` : '';
};
const rtspUri = (host, searchParams) => {
    return host.length !== 0
        ? `rtsp://${host}/axis-media/media.amp?${searchParams}`
        : '';
};
const mediaUri = (protocol, host, searchParams) => {
    return host.length !== 0
        ? `${protocol}//${host}/axis-cgi/media.cgi?${searchParams}`
        : '';
};
const imgUri = (protocol, host, searchParams) => {
    return host.length !== 0
        ? `${protocol}//${host}/axis-cgi/jpg/image.cgi?${searchParams}`
        : '';
};
/**
 * User-specified URI parameters.
 *
 * Note that parameters such as `videocodec` or `container` are automatically
 * set based on the chosen format (since they effect which component to use).
 */
const PARAMETERS = {
    [AxisApi.AXIS_IMAGE_CGI]: [
        'resolution',
        'camera',
        'compression',
        'rotation',
        'palette',
        'squarepixel',
        'timestamp',
    ],
    [AxisApi.AXIS_MEDIA_AMP]: [
        'camera',
        'resolution',
        'h264profile',
        'streamprofile',
        'recordingid',
        'audio',
        'compression',
        'colorlevel',
        'color',
        'palette',
        'clock',
        'date',
        'text',
        'textstring',
        'textcolor',
        'textbackgroundcolor',
        'rotation',
        'textpos',
        'overlayimage',
        'overlaypos',
        'duration',
        'nbrofframes',
        'fps',
        'pull',
        'event',
        'timestamp',
        'videocodec',
    ],
    [AxisApi.AXIS_MEDIA_CGI]: [
        'container',
        'camera',
        'resolution',
        'h264profile',
        'streamprofile',
        'recordingid',
        'audio',
        'compression',
        'colorlevel',
        'color',
        'palette',
        'clock',
        'date',
        'text',
        'textstring',
        'textcolor',
        'textbackgroundcolor',
        'rotation',
        'textpos',
        'overlayimage',
        'overlaypos',
        'duration',
        'nbrofframes',
        'fps',
        'pull',
        'event',
        'timestamp',
        'videocodec',
    ],
};
/**
 * searchParams
 *
 * Produce a (URI-encoded) search parameter string for use in a URL
 * from a list of key,value pairs. The keys are checked against the
 * known keys for a particular API.
 *
 * @param searchParamList a list of [key, value] pairs
 */
const searchParams = (api, parameters = {}) => {
    const parameterList = PARAMETERS[api];
    return Object.entries(parameters)
        .map(([key, value]) => {
        if (!parameterList.includes(key)) {
            debugLog(`undocumented VAPIX parameter ${key}`);
        }
        return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
    })
        .join('&');
};
export const PlaybackArea = ({ forwardedRef, host, format, parameters = {}, play, offset, refresh, onPlaying, onSdp, metadataHandler, secure = window.location.protocol === Protocol.HTTPS, autoRetry = false, }) => {
    const timestamp = refresh.toString();
    if (format === Format.RTP_H264) {
        const ws = wsUri(secure ? Protocol.WSS : Protocol.WS, host);
        const rtsp = rtspUri(host, searchParams(FORMAT_API[format], {
            ...parameters,
            timestamp,
            videocodec: 'h264',
        }));
        return (React.createElement(WsRtspVideo, { key: refresh, forwardedRef: forwardedRef, ...{
                ws,
                rtsp,
                play,
                offset,
                onPlaying,
                onSdp,
                metadataHandler,
                autoRetry,
            } }));
    }
    if (format === Format.RTP_JPEG) {
        const ws = wsUri(secure ? Protocol.WSS : Protocol.WS, host);
        const rtsp = rtspUri(host, searchParams(FORMAT_API[format], {
            ...parameters,
            timestamp,
            videocodec: 'jpeg',
        }));
        return (React.createElement(WsRtspCanvas, { key: refresh, forwardedRef: forwardedRef, ...{ ws, rtsp, play, offset, onPlaying, onSdp } }));
    }
    if (format === Format.JPEG) {
        const src = imgUri(secure ? Protocol.HTTPS : Protocol.HTTP, host, searchParams(FORMAT_API[format], {
            ...parameters,
            timestamp,
        }));
        return (React.createElement(StillImage, { key: refresh, forwardedRef: forwardedRef, ...{ src, play, onPlaying } }));
    }
    if (format === Format.MP4_H264) {
        const src = mediaUri(secure ? Protocol.HTTPS : Protocol.HTTP, host, searchParams(FORMAT_API[format], {
            ...parameters,
            timestamp,
            videocodec: 'h264',
            container: 'mp4',
        }));
        return (React.createElement(HttpMp4Video, { key: refresh, forwardedRef: forwardedRef, ...{ src, play, onPlaying } }));
    }
    console.warn(`Error: unknown format: ${format},
please use one of ${[
        Format.RTP_H264,
        Format.JPEG,
        Format.MP4_H264,
        Format.RTP_JPEG,
    ].join(', ')}`);
    return null;
};
//# sourceMappingURL=PlaybackArea.js.map