@besovideo/webrtc-player v0.8.70

@besovideo/webrtc-player

简介 Introduction

设备视频播放、对讲封装

安装 Installation

use npm

npm i @besovideo/webrtc-player

use yarn

yarn add @besovideo/webrtc-player

示例 Example

视频

import {
  PuPlayer,
  IPuPlayerProps,
  IPuPlayerInstance,
  clearAllDialog,
} from "@besovideo/webrtc-player";
import "@besovideo/webrtc-player/dist/main.es.css";

const { instance } = PuPlayer({
  // (可选) 容器节点 注意一个容器内只能存在一个实例  当container为假值（包括false、null、undefined）时 将返回实例引用的dom节点 容器必须指定高度 参考高德地图
  container: document.getElementById("player_container"),
  // 必填 设备选项
  puOption: {
    // 设备id
    id: "PU_123456",
    // 设备通道号
    index: 0,
  },
  // 必填 用户授权令牌
  token: "Y3UrQ1VfYWRtestYDHYUAStest",
  // (可选) peer connection 连接媒体配置
  defaultMediaOption: {
    // 启用音频
    audio: true,
    // 启用视频
    video: true,
  },
  // (可选) 传输协议
  type: "webrtc" | "ws-bvrtc" | "auto";
  // (可选) 是否静音
  muted: false,
  // (可选) 指定video如何适应容器 (fill: 填充容器 ; contain :保持视频比例适应容器)
  videoFit: "fill",
  // (可选) 指定请求url路径前缀 可使用protocol+host 如：http://192.168.88.11:9780
  // apiPrefix: "/test_api/prefix",

  // (可选) 用于测试播放视频 (存在时优先使用url播放，为浏览器直接播放)
  // testUrl: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4",
  // (可选) 连接建立后回调
  onConnected: () => {},
  // (可选) 连接建立失败时的回调
  onConnectedFailed: () => {},
  // (可选) 连接断开后回调
  onDisConnected: () => {},
  // (可选) 双击是否全屏
  fullScreenOnDblclick: true,
  // (可选) 启用控制器
  enableController: false,
  // (可选) 禁用控制器的控制项 下面示例中禁用了云台控制
  disabledControls: ["ptzControl"],
  // (可选) 设置最大重连间隔(s)，默认不自动重连，setDefaultProps设置的maxReconnectInterval高于props
  maxReconnectInterval: 30,
  // (可选) 设置webrtc下视频预览，当没有视频时有音频情况下，是否展示音频波形
  noVideoRendeAudioWaveform: false,
  // (可选) 设置语言支持中文zh、英文en，默认中文
  locale: "zh",
  // (可选) bvrtc配置
  bvrtcConfig: {
    // (可选) 是否启用webcodecs解码，默认启用
    enableWebcodes: boolean,
    // (可选) 设置解码实时性 范围 0-10, 0 -- 流畅性最大, 10 -- 实时性最大
    realTimeLevel: number
  }
});

// setVideoFit 更改videoFit
instance.setVideoFit("contain");
// setToken 更改请求时的token
instance.setToken("newTTTTToken");
// setPuOption 更改请求的设备信息
instance.setPuOption({
  id: "PU_12345test",
  index: 123,
});
// setApiPrefix 更改请求时的url前缀
instance.setApiPrefix("/测试改前缀");
// open 的可选参数muted如果为undefined, 是否静音将使用之前的状态
// open 异步 先关闭再开始建立连接 (可选参数: muted:boolean = false 是否静音打开,可选参数: protocol = type 选择协议(type = "auto" | "webrtc" | "ws-bvrtc") 不填默认为auto)
instance.open();
// close 异步 释放dialog 并关闭 当前的 peer connection
instance.close();
// destroy 执行close 并从dom移除PuPlayer节点
instance.destroy();
// moveTo 将节点移动至新的容器
instance.moveTo(document.getElementById("new_player_container"));
// getCurrentContainer 获得当前所在的容器
instance.getCurrentContainer();
// hidden 隐藏 异步 (可选参数: muted?:boolean 是否静音 可不传)
instance.hidden(true);
// display 显示 (可选参数: muted?:boolean 是否静音 可不传)
instance.display();
// play 播放 异步
instance.play();
// mute 切换静音 (可选参数: muted:boolean = false 是否静音)
instance.mute(true);
// 获取puPlayer的div
instance.getPlayerElement();
// 获取内部引用的video元素
instance.getVideoElement();

// clearAllDialog 异步 释放全部打开的dialog 不管是音视频还是对讲
clearAllDialog();

• Controls 控制项列表

// 全部控制项
[
  "fullscreen",
  "ptzControl",
  "rotate",
  "record",
  "screenshot",
  "volumeSlider",
  "volume",
  "mike",
  "information"
];
// 在创建实例时 传入参数disabledControls数组 可关闭相关功能
// 如不使用全屏按钮、云台控制器
disabledControls: ["fullscreen", "ptzControl"];

对讲

import {
  Intercom,
  IIntercomProps,
  IIntercomInstance,
} from "@besovideo/webrtc-player";
import "@besovideo/webrtc-player/dist/main.es.css";

const { instance } = Intercom({
  // 必填 设备选项
  puOption: {
    // 设备id
    id: "PU_123456",
    // 设备通道号
    index: 0,
  },
  // 必填 用户授权令牌
  token: "Y3UrQ1VfYWRtestYDHYUAStest",
  // (可选) 连接建立后回调
  onConnected: () => {},
  // (可选) 连接建立失败时的回调
  onConnectedFailed: () => {},
  // (可选) 连接断开后回调
  onDisConnected: () => {},
  //(可选) 无法获取用户麦克风时
  onGetUserMediaFailed: () => {},
  // (可选) 指定请求url的前缀 方便代理请求
  // apiPrefix: "/test_api/prefix",
});

// open 异步 先关闭再开始建立连接 (可选参数: protocol = type 选择协议(type = "auto" | "webrtc" | "ws-bvrtc") 不填默认为auto)
install.open(type);

会议

import {
  Conference,
  IConferenceProps,
  IConferenceInstance,
} from "@besovideo/webrtc-player";
import "@besovideo/webrtc-player/dist/main.es.css";

const { instance } = Conference({
  // 必填 设备选项
  confOption: {
    // 会议id
    id: "test89312",
    // 会议成员ID
    index: 0,
  },
  // 必填 用户授权令牌
  token: "Y3UrQ1VfYWRtestYDHYUAStest",
  // (可选) 连接建立后回调
  onConnected: () => {},
  // (可选) 连接建立失败时的回调
  onConnectedFailed: () => {},
  // (可选) 连接断开后回调
  onDisConnected: () => {},
  //(可选) 无法获取用户麦克风时
  onGetUserMediaFailed: () => {},
  // (可选) 指定请求url的前缀 方便代理请求
  // apiPrefix: "/test_api/prefix",
});

// open 异步 先关闭再开始建立连接 (可选参数: protocol = type 选择协议(type = "auto" | "webrtc" | "ws-bvrtc") 不填默认为auto)
install.open(type);

Vue 示例

<template>
  <div ref="testRef" class="container"></div>
  <div ref="test2Ref" class="container2"></div>
  <button @click="close">关闭</button>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { PuPlayer, IPuPlayerInstance } from "@besovideo/webrtc-player";
import "@besovideo/webrtc-player/dist/main.es.css";

export default defineComponent({
  name: "Test",
  props: {
    // 设备id号
    puId: {
      type: String,
      required: true,
    },
    // 设备通道号
    index: {
      type: Number,
      required: true,
    },
  },
  setup(props) {
    const testRef = ref(null);
    const test2Ref = ref(null);
    const instanceRef = ref<IPuPlayerInstance | null>(null);

    const init = async () => {
      const { instance } = PuPlayer({
        container: testRef.value,
        puOption: { id: props.puId, index: props.index },
        token:
          "Y3UrQ1VfYWRtaW4rYWRtaW4rMTQzOSsxOTMwMTUrMTYyNTIwMjU3OCthN2I0Y2JiZDliMzkwZWUy",
      });
      console.log("初始化播放器完成：", instance);
      instanceRef.value = instance;

      try {
        await instance.open();
      } catch (e) {}

      setTimeout(() => {
        // 测试移动到另一个容器内
        console.log("移动节点");
        instance.moveTo(test2Ref.value);
      }, 5000);
    };

    onMounted(() => {
      init();
    });

    return {
      testRef,
      test2Ref,
      close: () => instanceRef.value?.close(),
    };
  },
});
</script>

<style lang="scss" scoped>
.container {
  height: 300px;
}
</style>

特别说明

• 项目是原生 JS、JQuery 写的,项目中没有导入导出功能的,可以使用暴露出来的"bvPlayer"实例对象进行使用

• 在项目中引入 besovideo/webrtc-player dist 文件夹下面的"main.browser.css"和"main.browser.js"两个文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="./main.browser.css" type="text/css" rel="stylesheet" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./main.browser.js"/>
    
    <title>Document</title>
  </head>
  <body>
    
    
  </body>

  <script>
    const playerEle = document.createElement("div")
    playerEle.style.height = "300px"
    playerEle.style.width = "300px"
    playerEle.style.backgroundColor = "black"
    document.body.appendChild(playerEle);
      const {instance} = window.bvPlayer.PuPlayer({
        // (可选) 容器节点 注意一个容器内只能存在一个实例  当container为假值（包括false、null、undefined）时 将返回实例引用的dom节点 容器必须指定高度 参考高德地图
        container: playerEle,
        // 必填 设备选项
        puOption: {
          // 设备id
          id: "PU_123456",
          // 设备通道号
          index: 0,
        },
        // 必填 用户授权令牌
        token: "Y3UrQ1VfYWRtestYDHYUAStest",
      });
      instance.open()
    </script>
</html>

升级 Upgrade

yarn upgrade @besovideo/webrtc-player@latest

开发 Dev

# 开发运行
yarn
yarn start

# 打包和发布（可直接使用 make publish ）
# npm login / yarn login
yarn version
yarn build
yarn publish
# 版本号按照 Major.Minor.Patch 规范
# 可参考https://www.jianshu.com/p/c675121a8bfd

环境变量切换方式