@vtx/player 0.0.1

package/public/playctrl3/Decoder.worker.js

@@ -0,0 +1 @@
+"use strict";var Module={};var initializedJS=false;function threadPrintErr(){var text=Array.prototype.slice.call(arguments).join(" ");console.error(text)}function threadAlert(){var text=Array.prototype.slice.call(arguments).join(" ");postMessage({cmd:"alert",text:text,threadId:Module["_pthread_self"]()})}var err=threadPrintErr;self.alert=threadAlert;Module["instantiateWasm"]=function(info,receiveInstance){var instance=new WebAssembly.Instance(Module["wasmModule"],info);receiveInstance(instance);Module["wasmModule"]=null;return instance.exports};self.onmessage=function(e){try{if(e.data.cmd==="load"){Module["wasmModule"]=e.data.wasmModule;Module["wasmMemory"]=e.data.wasmMemory;Module["buffer"]=Module["wasmMemory"].buffer;Module["ENVIRONMENT_IS_PTHREAD"]=true;if(typeof e.data.urlOrBlob==="string"){importScripts(e.data.urlOrBlob)}else{var objectUrl=URL.createObjectURL(e.data.urlOrBlob);importScripts(objectUrl);URL.revokeObjectURL(objectUrl)}JSPlayerModule(Module).then(function(instance){Module=instance})}else if(e.data.cmd==="run"){Module["__performance_now_clock_drift"]=performance.now()-e.data.time;Module["__emscripten_thread_init"](e.data.threadInfoStruct,0,0);var max=e.data.stackBase;var top=e.data.stackBase+e.data.stackSize;Module["establishStackSpace"](top,max);Module["PThread"].receiveObjectTransfer(e.data);Module["PThread"].threadInit();if(!initializedJS){Module["___embind_register_native_and_builtin_types"]();initializedJS=true}try{var result=Module["invokeEntryPoint"](e.data.start_routine,e.data.arg);if(Module["keepRuntimeAlive"]()){Module["PThread"].setExitStatus(result)}else{Module["__emscripten_thread_exit"](result)}}catch(ex){if(ex!="unwind"){if(ex instanceof Module["ExitStatus"]){if(Module["keepRuntimeAlive"]()){}else{Module["__emscripten_thread_exit"](ex.status)}}else{Module["__emscripten_thread_exit"](-2);throw ex}}}}else if(e.data.cmd==="cancel"){if(Module["_pthread_self"]()){Module["__emscripten_thread_exit"](-1)}postMessage({"cmd":"cancelDone"})}else if(e.data.target==="setimmediate"){}else if(e.data.cmd==="processThreadQueue"){if(Module["_pthread_self"]()){Module["_emscripten_current_thread_process_queued_calls"]()}}else{err("worker.js received unknown command "+e.data.cmd);err(e.data)}}catch(ex){err("worker.js onmessage() captured an uncaught exception: "+ex);if(ex&&ex.stack)err(ex.stack);throw ex}};

package/rollup.config.js

@@ -0,0 +1,52 @@
+import babel from '@rollup/plugin-babel';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+import url from '@rollup/plugin-url';
+import dts from 'rollup-plugin-dts';
+import external from 'rollup-plugin-peer-deps-external';
+import postcss from 'rollup-plugin-postcss';
+import { terser } from 'rollup-plugin-terser';
+
+const packageJson = require('./package.json');
+
+export default [
+  {
+    input: 'src/main.ts',
+    output: [
+      // 构建cjs格式包
+      {
+        file: packageJson.main,
+        format: 'cjs',
+        sourcemap: true,
+      },
+      // 构建esm格式包
+      {
+        file: packageJson.module,
+        format: 'esm',
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      external(), // 排除peerDependencies中的包不被压缩到输出文件中
+      resolve(), // 添加rollup引用第三方包支持
+      babel({
+        exclude: 'node_modules/**',
+        presets: [['@babel/preset-env']],
+        babelHelpers: 'bundled',
+      }),
+      commonjs(), // 添加commonJs支持
+      postcss(), // 处理css文件
+      url(), // 处理图片文件
+      typescript({ tsconfig: './tsconfig.json' }), //处理 typescript文件
+      terser(), // 文件压缩
+    ],
+  },
+  {
+    // 打包d.ts文件
+    input: 'dist/types/main.d.ts',
+    output: [{ file: packageJson.types, format: 'esm' }],
+    external: [/\.less$/],
+    plugins: [dts()],
+  },
+];

package/src/api/fetch.ts

@@ -0,0 +1,50 @@
+interface VMFetchProps {
+    /** 请求体 */
+    data?: any;
+    /** 请求头 */
+    headersEx?: object;
+}
+
+/**
+ * 数据fetch总入口
+ * @param props
+ */
+const Fetch = async <T>(
+    url: string,
+    type: 'GET' | 'POST' = 'GET',
+    params?: VMFetchProps
+): Promise<T> => {
+    const { data, headersEx } = params || {};
+    try {
+        let headers: HeadersInit = { 'content-type': 'application/json' };
+        if (headersEx) {
+            headers = { ...headers, ...headersEx };
+        }
+        if (type === 'GET' && data) {
+            const queryString = Object.keys(data)
+                .map((key) => key + '=' + data[key])
+                .join('&');
+
+            url += '?' + queryString;
+        }
+        const resp = await fetch(encodeURI(url), {
+            body: type === 'POST' ? JSON.stringify(data) : undefined,
+            headers,
+            method: type,
+        });
+
+        const json: Result<T> = await resp.json();
+        if (json.result === 0) return json.data;
+        else {
+            const error = {
+                exception: json.exception,
+                msg: json.msg,
+            };
+            throw error;
+        }
+    } catch (e) {
+        return Promise.reject(e);
+    }
+};
+
+export default Fetch;

package/src/api/index.ts

@@ -0,0 +1,44 @@
+import Fetch from './fetch';
+import * as Types from './types';
+
+/** 获取预览地址 */
+export const getPreviewUrl = (data: Types.GetPreviewUrlParams) =>
+    Fetch<Types.GetPreviewUrlResp>('/cloud/vis/base/np/artemis/previewUrl.smvc', 'GET', {
+        data,
+    });
+
+/** 获取历史地址 */
+export const getHistoryUrl = (data: Types.GetHistoryUrlParams) =>
+    Fetch<Types.GetHistoryUrlResp>('/cloud/vis/base/np/artemis/playbackUrl.smvc', 'GET', {
+        data,
+    });
+
+/** 获取视频信息 */
+export const loadVideoInfo = (data: Types.LoadVideoInfoParams) =>
+    Fetch<Types.LoadVideoInfoResp>('/cloud/vis/base/np/videoCommon/loadVideoInfos.smvc', 'GET', {
+        data,
+    });
+
+/** 云台控制 */
+export const cloudControl = (data: Types.CloudControlParams) =>
+    Fetch('/cloud/vis/base/np/artemis/controlling.smvc', 'GET', {
+        data,
+    });
+
+/**
+ * 获取通道信息
+ * @param channelId 通道ID
+ * @param tenantId 租户ID
+ * @returns 
+ */
+export const loadVideoChannel = async (channelId: string, tenantId: string) => {
+    const result = await Fetch<string>(
+        '/cloud/vis/base/np/videoDevice/loadTheVideoChannel.smvc',
+        'GET',
+        {
+            data: { parameters: JSON.stringify({ videoChannelId: channelId, tenantId }) },
+        }
+    );
+    const parseResult = JSON.parse(result) as Types.LoadVideoChannelResp[];
+    return parseResult[0];
+};

package/src/api/types.ts

@@ -0,0 +1,141 @@
+/** 获取预览地址Resp */
+export interface GetPreviewUrlResp {
+    /** 对讲地址 */
+    apiUrl: string;
+    /** 地址 */
+    url: string;
+    /** 设备名称 */
+    deviceName: string;
+    /** 设备ID */
+    deviceId:string;
+    /** 通道名称 */
+    channelName: string;
+    /** 通道编号 */
+    channelNum:string;
+    /** 播放器 */
+    player: string | null;
+    /** 是否可以对讲，1为可以，0为不可以 */
+    beenHasVideo?: 1 | 0;
+    /** 云台类型，1全功能，2不能转动，3不能变焦，4无功能 */
+    ptzType?: 1 | 2 | 3 | 4;
+}
+
+/** 获取预览地址Params */
+export interface GetPreviewUrlParams {
+    /** 租户ID */
+    tenantId: string;
+    /** 频道号 */
+    channelNum: string;
+    /** 设备ID */
+    deviceId: string;
+    /** 协议 */
+    protocol?: string;
+}
+
+/** 历史地址子项 */
+export interface HistoryUrlItem {
+    /** 开始时间 */
+    beginTime: string;
+    /** 结束时间 */
+    endTime: string;
+    /** 回放地址 */
+    playbackUrl: string | null;
+    /** 大小 */
+    size: number;
+}
+
+/** 获取历史地址Resp */
+export interface GetHistoryUrlResp {
+    /** 设备名称 */
+    deviceName: string;
+    /** 通道名称 */
+    channelName: string;
+    /** url列表 */
+    list: HistoryUrlItem[];
+    /** 播放器 */
+    player: string | null;
+    /** 全时播放地址 */
+    totalTimeUrl: string;
+    /** 地址 */
+    url: string;
+}
+
+/** 获取历史地址Params */
+export interface GetHistoryUrlParams {
+    /** 租户ID */
+    tenantId: string;
+    /** 频道号 */
+    channelNum: string;
+    /** 设备ID */
+    deviceId: string;
+    /** 协议 */
+    protocol?: string;
+    /** 开始时间，格式：2022-06-01 00:00:00 */
+    beginTime: string;
+    /** 结束时间，格式：2022-06-01 23:59:59 */
+    endTime: string;
+}
+
+/** 获取视频信息Params */
+export interface LoadVideoInfoParams {
+    /** 租户ID */
+    tenantId: string;
+    /** 业务ID */
+    billId: string;
+}
+
+export interface LoadVideoInfo {
+    /** 频道号 */
+    channelNum: string;
+    /** 设备ID */
+    videoDeviceId: string;
+    /** 通道名称 */
+    channelName: string;
+}
+/** 获取视频信息Resp */
+export type LoadVideoInfoResp = LoadVideoInfo[];
+
+/** 云台控制Params */
+export type CloudControlParams = {
+    /** 租户ID */
+    tenantId: string;
+    /** 频道号 */
+    channelNum: string;
+    /** 设备ID */
+    deviceId: string;
+    /** 操作：1为按下，0为放开 */
+    action: 1 | 0;
+    /** 命令 */
+    command: CloudControlCommandType;
+};
+
+/** 云台控制命令 */
+export type CloudControlCommandType =
+    | 'LEFT'
+    | 'RIGHT'
+    | 'UP'
+    | 'DOWN'
+    | 'LEFT_UP'
+    | 'LEFT_DOWN'
+    | 'RIGHT_UP'
+    | 'RIGHT_DOWN'
+    | 'ZOOM_IN'
+    | 'ZOOM_OUT'
+    | 'FOCUS_NEAR'
+    | 'FOCUS_FAR'
+    | 'IRIS_ENLARGE'
+    | 'IRIS_REDUCE';
+
+export type LoadVideoChannelParams = {
+    /** 租户ID */
+    tenantId: string;
+    /** 通道ID */
+    videoChannelId: string;
+};
+
+export type LoadVideoChannelResp = {
+    /** 通道号 */
+    channelNum: string;
+    /** 设备ID */
+    videoDeviceId: string;
+};

package/src/components/bill-player/index.less

@@ -0,0 +1,58 @@
+.vtx-bill-player {
+    .bill-tabs {
+        height: 100%;
+
+        .ant-tabs-content-holder {
+            height: 100%;
+
+            .ant-tabs-content {
+                height: 100%;
+            }
+        }
+    }
+
+    .player-panel {
+        display: flex;
+        height: 100%;
+
+        > .player-container {
+            flex-grow: 1;
+            width: 0;
+        }
+
+        .control-container {
+            width: 376px;
+            height: fit-content;
+            margin-left: 16px;
+            border: 1px solid #e8e8e8;
+            border-radius: 2px;
+
+            .header {
+                padding: 12px 24px;
+                font-weight: bold;
+                border-bottom: 1px solid #e8e8e8;
+            }
+
+            .list {
+                display: flex;
+                flex-direction: column;
+                padding: 12px 24px;
+
+                .ant-checkbox-wrapper {
+                    margin-bottom: 12px;
+                    margin-left: 0;
+                }
+            }
+
+            .form {
+                padding: 12px 24px;
+
+                .time-radio-group {
+                    .ant-radio-wrapper {
+                        margin-right: 4px;
+                    }
+                }
+            }
+        }
+    }
+}

package/src/components/bill-player/index.stories.mdx

@@ -0,0 +1,24 @@
+import BillPlayer from '.';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+
+import * as stories from './index.stories';
+
+<Meta title="组件/业务播放器" component={BillPlayer} />
+
+# 组件--按钮
+
+### 如何使用
+
+```js
+import { BillPlayer } from '@vtx/player';
+```
+
+### 属性
+
+<ArgsTable of={BillPlayer} />
+
+### 例子
+
+<Canvas>
+    <Story name="业务播放器" story={stories.Default} />
+</Canvas>

package/src/components/bill-player/index.stories.tsx

@@ -0,0 +1,14 @@
+import BillPlayer from '.';
+import { ComponentStory } from '@storybook/react';
+
+const Template: ComponentStory<typeof BillPlayer> = (args) => <BillPlayer {...args} />;
+export const Default = Template.bind({});
+Default.args = {
+    width: 1200,
+    height: 600,
+    params: {
+        tenantId: '60edef2faea44a39a6385146f4fa131c',
+        billId: 'shxq_qqq',
+    },
+};
+export default Template;

package/src/components/bill-player/index.tsx

@@ -0,0 +1,269 @@
+import './index.less';
+
+import { useRef } from 'react';
+
+import HistoryControl, { HistoryControlHandle } from '../history-control';
+import LiveControl, { LiveControlHandle } from '../live-control';
+import { useRequest, useSetState } from 'ahooks';
+import { Button, Checkbox, DatePicker, Form, Radio, RadioChangeEvent, Select, Tabs } from 'antd';
+import moment from 'moment';
+
+import { loadVideoInfo } from '@/api';
+import { LoadVideoInfoParams } from '@/api/types';
+import { TimeFormat } from '@/utils';
+
+const { TabPane } = Tabs;
+
+type HistoryFormData = {
+    /** 频道号 */
+    channelNum: string;
+    /** 开始时间，格式：2022-06-01 00:00:00 */
+    beginTime: string;
+    /** 结束时间，格式：2022-06-01 23:59:59 */
+    endTime: string;
+};
+
+interface State {
+    /** 日期选择器是否可用 */
+    datePickerDisabled: boolean;
+    /** 实时视频列表勾选状态 */
+    liveListState: Map<string, boolean>;
+    /** 设备ID */
+    deviceId: string;
+}
+
+interface BillPlayerProps {
+    /** 参数 */
+    params: LoadVideoInfoParams;
+    /** 宽度 */
+    width?: string | number;
+    /** 高度 */
+    height?: string | number;
+    /** 是否显示实时视频，默认为true */
+    live?: boolean;
+    /** 是否显示历史视频，默认为true */
+    history?: boolean;
+    /** 实时默认播放 */
+    defaultLivePlay?: boolean;
+    /** 历史默认播放 */
+    defaultHistoryPlay?: boolean;
+}
+export const BillPlayer = (props: BillPlayerProps) => {
+    const {
+        params,
+        live = true,
+        history = true,
+        height = '100%',
+        width = '100%',
+        defaultLivePlay = true,
+    } = props;
+    const [state, setState] = useSetState<State>({
+        datePickerDisabled: false,
+        liveListState: new Map(),
+        deviceId: '',
+    });
+    const { data } = useRequest(() => loadVideoInfo(params), {
+        refreshDeps: [params.billId],
+        onSuccess: (result) => {
+            if (defaultLivePlay) {
+                const livePlayer = liveRef.current;
+                if (livePlayer) {
+                    const liveListState = new Map();
+                    for (const item of result) {
+                        liveListState.set(item.channelNum, true);
+                    }
+                    setState({ liveListState, deviceId: result[0].videoDeviceId });
+                    livePlayer.multiLoad(
+                        result.map((item) => ({
+                            channelNum: item.channelNum,
+                            deviceId: item.videoDeviceId,
+                            tenantId: params.tenantId,
+                        }))
+                    );
+                }
+            }
+            form.setFieldsValue({ channelNum: result[0].channelNum });
+        },
+    });
+    const [form] = Form.useForm();
+    const liveRef = useRef<LiveControlHandle>(null);
+    const historyRef = useRef<HistoryControlHandle>(null);
+    const getLivePanel = () => {
+        const list = data?.map((item) => (
+            <Checkbox
+                key={item.channelNum}
+                checked={state.liveListState.get(item.channelNum)}
+                onChange={(e) => {
+                    const checked = e.target.checked;
+                    const liveControl = liveRef.current;
+                    if (liveControl) {
+                        if (checked) {
+                            liveControl.load({ ...item, deviceId: item.videoDeviceId });
+                        } else {
+                            liveControl.unLoad(item.channelNum);
+                        }
+                    }
+                }}
+            >
+                {item.channelName}
+            </Checkbox>
+        ));
+        return (
+            <div className="player-panel">
+                <div className="player-container">
+                    <LiveControl
+                        ref={liveRef}
+                        onChannelChange={(channelsNum) => {
+                            const liveListState = new Map(state.liveListState);
+                            for (const channelNum of channelsNum) {
+                                liveListState.set(channelNum, !liveListState.get(channelNum));
+                            }
+                            for (const item of liveListState) {
+                                if (channelsNum.includes(item[0])) liveListState.set(item[0], true);
+                                else liveListState.set(item[0], false);
+                            }
+                            setState({ liveListState });
+                        }}
+                    />
+                </div>
+                <div className="control-container">
+                    <div className="header">视频通道</div>
+                    <div className="list">{list}</div>
+                </div>
+            </div>
+        );
+    };
+    const onHistorySubmit = (values: HistoryFormData) => {
+        const historyControl = historyRef.current;
+        historyControl?.load({
+            channelNum: values.channelNum,
+            tenantId: params.tenantId,
+            deviceId: state.deviceId,
+            beginTime: moment(values.beginTime).format(TimeFormat.default),
+            endTime: moment(values.endTime).format(TimeFormat.default),
+        });
+    };
+    const onTimeRadioChange = (e: RadioChangeEvent) => {
+        const value = e.target.value;
+        if (value === 'custom') {
+            setState({ datePickerDisabled: false });
+        } else {
+            setState({ datePickerDisabled: true });
+            if (value === 'today') {
+                form.setFieldsValue({
+                    beginTime: moment().startOf('day'),
+                    endTime: moment(),
+                });
+            }
+            if (value === 'yesterday') {
+                form.setFieldsValue({
+                    beginTime: moment().subtract(1, 'day').startOf('day'),
+                    endTime: moment().subtract(1, 'day').endOf('day'),
+                });
+            }
+            if (value === 'dayBeforeYesterday') {
+                form.setFieldsValue({
+                    beginTime: moment().subtract(2, 'day').startOf('day'),
+                    endTime: moment().subtract(2, 'day').endOf('day'),
+                });
+            }
+        }
+    };
+    const getHistoryPanel = () => {
+        return (
+            <div className="player-panel">
+                <div className="player-container">
+                    <HistoryControl ref={historyRef} />
+                </div>
+                <div className="control-container">
+                    <div className="header">查询视频</div>
+                    <div className="form">
+                        <Form
+                            form={form}
+                            name="history"
+                            labelCol={{ span: 5 }}
+                            wrapperCol={{ span: 19 }}
+                            onFinish={onHistorySubmit}
+                            requiredMark={false}
+                            colon={false}
+                            initialValues={{
+                                beginTime: moment().subtract(1, 'day').startOf('day'),
+                                endTime: moment().subtract(1, 'day').endOf('day'),
+                            }}
+                            autoComplete="off"
+                        >
+                            <Form.Item label="选择时段">
+                                <Radio.Group
+                                    onChange={onTimeRadioChange}
+                                    defaultValue="custom"
+                                    className="time-radio-group"
+                                >
+                                    <Radio value="today">当日</Radio>
+                                    <Radio value="yesterday">昨日</Radio>
+                                    <Radio value="dayBeforeYesterday">前日</Radio>
+                                    <Radio value="custom">自选</Radio>
+                                </Radio.Group>
+                            </Form.Item>
+                            <Form.Item
+                                label="开始时间"
+                                name="beginTime"
+                                rules={[{ required: true, message: '请输入开始时间' }]}
+                            >
+                                <DatePicker
+                                    style={{ width: '100%' }}
+                                    showTime
+                                    disabled={state.datePickerDisabled}
+                                />
+                            </Form.Item>
+                            <Form.Item
+                                label="结束时间"
+                                name="endTime"
+                                rules={[{ required: true, message: '请输入结束时间' }]}
+                            >
+                                <DatePicker showTime disabled={state.datePickerDisabled} />
+                            </Form.Item>
+                            <Form.Item
+                                label="视频通道"
+                                name="channelNum"
+                                rules={[{ required: true, message: '请选择视频通道' }]}
+                            >
+                                <Select>
+                                    {data?.map((item) => (
+                                        <Select.Option
+                                            key={item.channelNum}
+                                            value={item.channelNum}
+                                        >
+                                            {item.channelName}
+                                        </Select.Option>
+                                    ))}
+                                </Select>
+                            </Form.Item>
+                            <Form.Item wrapperCol={{ span: 24 }}>
+                                <Button type="primary" htmlType="submit">
+                                    查询
+                                </Button>
+                            </Form.Item>
+                        </Form>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+    return (
+        <div className="vtx-bill-player" style={{ height, width }}>
+            {live && history && (
+                <Tabs defaultActiveKey="live" className="bill-tabs">
+                    <TabPane tab="实时视频" key="live">
+                        {getLivePanel()}
+                    </TabPane>
+                    <TabPane tab="历史视频" key="history">
+                        {getHistoryPanel()}
+                    </TabPane>
+                </Tabs>
+            )}
+            {live && !history && getLivePanel()}
+            {history && !live && getHistoryPanel()}
+        </div>
+    );
+};
+export default BillPlayer;