@besovideo/webrtc-player 0.8.2 → 0.8.3

package/README.md

@@ -1,290 +1,290 @@
-# @besovideo/webrtc-player
-
-![npm](https://img.shields.io/npm/v/@besovideo/webrtc-player) ![NPM](https://img.shields.io/npm/l/@besovideo/webrtc-player) ![npm](https://img.shields.io/npm/dt/@besovideo/webrtc-player)
-
-[![NPM](https://nodei.co/npm/@besovideo/webrtc-player.png)](https://nodei.co/npm/@besovideo/webrtc-player/)
-
-## 简介 Introduction
-
-> 设备视频播放、对讲封装
-
-## 安装 Installation
-
-**use npm**
-
-```shell
-npm i @besovideo/webrtc-player
-```
-
-**use yarn**
-
-```
-yarn add @besovideo/webrtc-player
-```
-
-## 示例 Example
-
-**视频**
-
-```typescript
-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,
-  },
-  // (可选) 是否静音
-  muted: false,
-  // (可选) 指定video如何适应容器 (fill: 填充容器 ; contain :保持视频比例适应容器)
-  videoFit: "fill",
-  // (可选) 指定请求url路径前缀 可使用protocol+host 如：http://192.168.6.111: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"],
-});
-
-// setVideoFit 更改videoFit
-instance.setVideoFit("contain");
-// setToken 更改请求时的token
-instance.setToken("newTTTTToken");
-// setPuOption 更改请求的设备信息
-instance.setPuOption({
-  id: "PU_12345test",
-  index: 123,
-});
-// setApiPrefix 更改请求时的url前缀
-instance.setApiPrefix("/测试改前缀");
-// open 异步 先关闭再开始建立连接 (可选参数: muted:boolean = false 是否静音打开)
-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 控制项列表
-
-```typescript
-// 全部控制项
-[
-  "volume",
-  "volumeSlider",
-  "information",
-  "screenshot",
-  "record",
-  "fullscreen",
-  "rotate",
-  "ptzControl",
-]
-// 在创建实例时 传入参数disabledControls数组 可关闭相关功能
-// 如不使用全屏按钮、云台控制器
-disabledControls: ["fullscreen", "ptzControl"]
-
-```
-
-**对讲**
-
-```typescript
-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",
-});
-```
-
-**会议**
-
-```typescript
-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",
-});
-```
-
-**Vue 示例**
-
-```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>
-```
-
-## 开发 Dev
-
-```shell
-# 开发运行
-yarn
-yarn start
-
-# 打包和发布
-make publish
-
-```
-
-[环境变量切换方式](https://github.com/entropitor/dotenv-cli/pull/44)
+# @besovideo/webrtc-player
+
+![npm](https://img.shields.io/npm/v/@besovideo/webrtc-player) ![NPM](https://img.shields.io/npm/l/@besovideo/webrtc-player) ![npm](https://img.shields.io/npm/dt/@besovideo/webrtc-player)
+
+[![NPM](https://nodei.co/npm/@besovideo/webrtc-player.png)](https://nodei.co/npm/@besovideo/webrtc-player/)
+
+## 简介 Introduction
+
+> 设备视频播放、对讲封装
+
+## 安装 Installation
+
+**use npm**
+
+```shell
+npm i @besovideo/webrtc-player
+```
+
+**use yarn**
+
+```
+yarn add @besovideo/webrtc-player
+```
+
+## 示例 Example
+
+**视频**
+
+```typescript
+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,
+  },
+  // (可选) 是否静音
+  muted: false,
+  // (可选) 指定video如何适应容器 (fill: 填充容器 ; contain :保持视频比例适应容器)
+  videoFit: "fill",
+  // (可选) 指定请求url路径前缀 可使用protocol+host 如：http://192.168.6.111: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"],
+});
+
+// setVideoFit 更改videoFit
+instance.setVideoFit("contain");
+// setToken 更改请求时的token
+instance.setToken("newTTTTToken");
+// setPuOption 更改请求的设备信息
+instance.setPuOption({
+  id: "PU_12345test",
+  index: 123,
+});
+// setApiPrefix 更改请求时的url前缀
+instance.setApiPrefix("/测试改前缀");
+// open 异步 先关闭再开始建立连接 (可选参数: muted:boolean = false 是否静音打开)
+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 控制项列表
+
+```typescript
+// 全部控制项
+[
+  "volume",
+  "volumeSlider",
+  "information",
+  "screenshot",
+  "record",
+  "fullscreen",
+  "rotate",
+  "ptzControl",
+]
+// 在创建实例时 传入参数disabledControls数组 可关闭相关功能
+// 如不使用全屏按钮、云台控制器
+disabledControls: ["fullscreen", "ptzControl"]
+
+```
+
+**对讲**
+
+```typescript
+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",
+});
+```
+
+**会议**
+
+```typescript
+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",
+});
+```
+
+**Vue 示例**
+
+```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>
+```
+
+## 开发 Dev
+
+```shell
+# 开发运行
+yarn
+yarn start
+
+# 打包和发布
+make publish
+
+```
+
+[环境变量切换方式](https://github.com/entropitor/dotenv-cli/pull/44)