npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

rtsp-web-player

v1.1.4

Published

web rtsp player

Downloads

9

Readme

rtsp-web-player

介绍

支持WEB浏览器播放RTSP流前端播放器,需要依赖客户端插件服务(exe文件进行安装。插件需要本地一些操作权限,为了更好使用该插件,安装时请以管理员身份运行安装),客户端插件服务安装启动后可接入当前前端插件包进行对接。

软件架构

前端插件以typescript 编写支持npm安装引入、cdn方式引入,不限于技术栈如vuejs、react、angularjs目前市面上主流MVVM框架结构

安装

npm命令行,

npm install rtsp-web-player --save
or
yarn add rtsp-web-player

使用说明

入口文件样式引入

import 'rtsp-web-player/dist/style/index.css'

vue3引入示例

<template>
  <div class="hello">
    <div id="playerRef" style="height: 700px"></div>
    <button @click="handlePlay">播放</button>
    <button @click="handlePlayByWnd">指定窗口播放</button>
    <button @click="handleSwitchWnd">切换窗口</button>
    <button @click="handleSnapshot">抓拍</button>
    <button @click="handleClear">清空</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue';
import RtspPlayer, { RtspWindowEnum } from 'rtsp-web-player';
export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup() {
    let player: RtspPlayer | null = null;
    const init = () => {
      player = new RtspPlayer({
        timeOut: 30000,
        theme: {
          primaryColor: '#8528EE',
          backgroundColor: '#18181C',
          borderColor: '#2D2D30',
          fontColor: '#909092'
        },
        wnd: RtspWindowEnum.SIX,
        target: document.querySelector('#playerRef') as HTMLElement,
        onWindowActiveEvent: (wndInfo) => {
        },
        onEvents: (event) => {
        }
      });
    };
    const handlePlay = () => {
      player?.play({
        rtspUrl: 'rtsp://xxx:xx@[email protected]/LiveMedia/ch1/Media1',
        cameraName: '252'
      });
    };
    const handleSwitchWnd = () => {
      player?.switchWindow(RtspWindowEnum.SIXTEEN);
    };
    const handlePlayByWnd = () => {
      player?.play({
        rtspUrl: 'rtsp://xxx:xx10.40.147.252/LiveMedia/ch1/Media1',
        cameraName: '252',
        wnd: 1
      });
    };
    const handleClear = () => {
      player?.clearPlayer();
    };
    const handleSnapshot = () => {
      player?.localSnapshot({ wnd: 1, isDownload: false }).then((res) => {
        console.log(
          '🚀 ~ file: HelloWorld.vue ~ line 56 ~ player?.localSnapshot ~ res',
          res
        );
      });
    };
    onMounted(() => {
      init();
    });
    return {
      handlePlay,
      handleSwitchWnd,
      handleClear,
      handlePlayByWnd,
      handleSnapshot
    };
  }
});
</script>

RtspPlayer实例

| 名称 | 构造参数 | 默认值 | 说明 | | ---------- | ----------- | ---- | ---------- | | RtspPlayer | RtspOptions | 无 | 初始化的基础参数信息 |

RtspOptions

| 名称 | 类型 | 默认值 | 说明 | | ------------------- | --------------------- | ------------------------------ | -------------------------------------- | | wnd | RtspWindowEnum | 默认9窗格 | 默认窗口数,支持[1,4,6,9,12,16] | | target | HTMLElement | 无 | 插件承载的元素容器 | | quality | number | 100 | 画面的质量数值越高质量越好,最大值为100,数值越低性能越好,图片质量较差。 | | imageStreamFormat | RtspImageFormat | jpeg | 帧画面格式,png和jpeg | | frameRate | number | 120 | 每秒推送的帧数最大25,数值越大性能要求越高,画面细节更多。 | | timeOut | number | | 播放器请求超时时间 | | snapshotPath | string | c:\soc\snapshot | 抓拍图片存储路径 | | videoPath | string | c:\soc\video | 本地录像存储路径 | | wndInfo | string | HTMLElement | | 空闲窗口显示内容 | | serverUrl | string | | 默认客户端插件服务地址,如果是手机端需要填写服务端地址 | | theme | PlayerTheme | | 播放器主题颜色 | | onError | function | (err: ErrorMessage) => void | 异常上报事件回调 | | onEvents | function | (data: PlayerEvents) => void; | 播放器事件上报回调函数 | | onWindowActiveEvent | function | (data: any) => void | 窗口激活事件 |

方法

| 名称 | 参数类型 | 默认值 | 返回值 | 说明 | | ----------------- | ------------------------- | ---- | ------- | --------- | | play | PlayOptions | 无 | Promise | 实时画面/录像回放 | | batchPlay | ( PlayOptions[],callback) | 无 | void | 批量播放实况/录像 | | switchWindow | RtspWindowEnum | 无 | void | 设置窗口数 | | closePlayerWindow | number | 无 | void | 关闭指定窗口 | | clearPlayer | 无 | 无 | void | 清空所有窗口 | | localSnapshot | SnapshotOptions | 无 | Promise | 抓拍 | | startRec | wnd | 激活窗口 | void | 开启本地录像 | | stopRec | wnd | 激活窗口 | void | 停止本地录像 | | destroy | 无 | 无 | void | 播放器销毁 |

RtspWindowEnum 枚举

| 枚举名称 | 类型 | 枚举说明 | | ------- | ------ | :---- | | ONE | number | 1窗格数 | | FOUR | number | 4窗格数 | | SIX | number | 6窗格数 | | NINE | number | 9窗格数 | | TWELVE | number | 12窗格数 | | SIXTEEN | number | 16窗格数 |

PlayOptions

| 名称 | 类型 | 默认值 | 说明 | | ---------- | ------ | -------- | :----------- | | cameraName | string | | 摄像机名称 | | rtspUrl | string | | 媒体流地址 | | wnd | number | 自动获取空闲窗口 | 如若传入,则指定窗口播放 |

PlayerTheme

| 名称 | 类型 | 默认值 | 说明 | | --------------- | ------ | ---- | ---- | | primaryColor | string | | 主题颜色 | | fontColor | string | | 字体颜色 | | borderColor | string | | 边框颜色 | | backgroundColor | string | | 背景颜色 |

本地插件唤醒