@vanwei-wcs/wwav-player

v0.1.20

Published

4 months ago

a wwav video player

Downloads

0High
0Medium
0Low

播放 wwav 格式的视频 url 的播放器

安装

npm i @vanwei-wcs/wwav-player

import WWAVPlayer from "@vanwei-wcs/wwav-player";
const url =
	"ws://192.168.8.120:3094/mts/wwav/W867651902yzwfQzpCcNPUd283Gjs.wwav";
const token = "c70mxehw";

var player = new WWAVPlayer({
	debug: false, // 当前只有这一个属性
});

方法

attachVideoElement()
attachCanvasElement()
open()
play()
pause()
muted()
on()
off()
destroy()

attachVideoElement()

player.attachVideoElement(node:HTMLVideoElement,options:Options)

用来配置播放 h264 流需要用来到的 dom 和参数

Options |属性|说明|类型|可选值|默认值| |---|---|---|---|---| |mode|播放模式|string|both、video、audio|video| |flushingTime|buffer 缓冲区刷新毫秒间隔|number|-|500| |maxDelay|最大毫秒延迟|number|-|500| |debug|是否开启 h264 播放器的 debug 模式|boolean|-|false|

attachCanvasElement()

player.attachCanvasElement(node:HTMLCanvasElement,options:Options)

用来配置播放 h265 流需要用来到的 dom 和参数

Options

baseLibPath

设置此属性时，请先在 statics/h265 文件夹下面找到 libffmpeg_265.js、libffmpeg_265.wasm 这两个文件。

此属性用来在 web worker 中拼接出 libffmpeg_265.js、libffmpeg_265.wasm 两个文件的下载路径，然后使用 importScript(libffmpeg_265.js) 和 fetch(libffmpeg_265.wasm) 下载这两个文件，默认值为 /lib/。

有两种设置方式

相对路径

拼接规则为 location.origin + baseLibPath + 'libffmpeg_265.js'，例如：baseLibPath = '/public/'，当前运行脚本的 location.origin 为 http://192.168.1.10:9000，则最后的拼接地址为 http://192.168.1.10:9000/public/libffmpeg_265.js

一种是绝对路径，拼接规则为 baseLibPath + 'libffmpeg_265.js'
绝对路径

拼接规则为 baseLibPath + 'libffmpeg_265.js'，例如：baseLibPath = 'http://192.168.1.10:9000/public/' ，则最后的拼接地址为 http://192.168.1.10:9000/public/libffmpeg_265.js

无论设置哪一种方式，都必须要求可以通过此链接访问 libffmpeg_265.js 文件内容， libffmpeg_265.js、libffmpeg_265.wasm 这两个文件必须在同一个文件夹下面

debug

开启 H265 播放器 debug 模式

decoderLogLevel

设置 H265 解码器的日志等级，js-0; wasm-1; ffmpeg-2

open()

player.open(url:string,token:string)

获取视频流,url 为 wwav 格式的视频地址，token 为视频地址密码

openTalk()

player.openTalk(url:string,token:string)

开启对讲流,url 为 wwav 格式的视频地址，token 为视频地址密码

closeTalk()

关闭对讲流

play()

当视频暂停后，调用此方法可以开始播放视频

pause()

当视频正在播放时，调用此方法可以暂停视频播放

muted(false | true)

当视频正在播放时，调用此方法可以控制是否禁音 Boolean,默认静音

on()

监听播放器回调事件，具体定义参看下方静态属性 PlayerEvents |事件|说明|参数| |---|---|---| |error|播放发生错误，具体错误参考下方错误回调|{errorType,detail,info}| |play|视频开始播放|event| |pause|视频暂停播放|event| |media_info|解码出来的视频信息，format（流格式 H264/H265），width（视频分辨率宽度），height（视频分辨率高度）|{format,width,height}|

player.on("media_info", ({ format, width, height }) => {
	console.log("media_info", format, width, height);
});

off()

取消 on 方法监听的事件的回调

// off(eventName,listener)
player.off("media_info");
// 不指定listener，则取消事件名对应的所有回调

如果需要取消所有回调，调用 offAll() 方法

destroy()

销毁播放器，异步方法，返回 promise

静态属性和方法

PlayerEvents

回调事件枚举属性

{
	ERROR: 'error',
	PLAY: 'play',
	PAUSE: 'pause',
	MEDIA_INFO: 'media_info'
}

player.on(WWAVPlayer.PlayerEvents.ERROR, (errorType, detail, info) => {
	console.log("media_info", errorType, detail, info);
	// errorType 对应于下方 ErrorTypes 的值
	// detail 对应于下方 ErrorDetails 的值
});

ErrorTypes

error 回调事件的错误类型枚举

ErrorTypes = {
	NETWORK_ERROR: "network_error",
	MEDIA_ERROR: "media_error",
	OTHER_ERROR: "other_error",
};

| 类型 | 说明 | | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | | network_error | 通常是提供的视频地址无法连接，密码不正确无法认证等网络错误 | | media_error | 通常是没有提供视频需要的正确 dom 元素，最好在播放前把 video 和 canvas 元素都绑定，因为无法提前确定当前视频 url 获取到的视频流是 H264 还是 H265 | | other_error | 其他错误 |

ErrorDetails

error 回调事件的错误描述枚举

ErrorDetails = {
	NETWORK_AUTH_FAILED: "network_auth_failed",
	NETWORK_ON_CLOSE: "network_close",
	NETWORK_ON_ERROR: "network_error",

	MEDIA_INVALID_ELEMENT: "media_invalid_element",
};

| 类型 | 说明 | | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | network_auth_failed | 视频 url 认证失败错误，通常是密码不正确 | | network_close | 连接视频 url 的 websocket 实例断开连接的回调 | | network_error | 通常是提供的视频地址 url 无法连接，或连接异常断开 | | media_invalid_element | 获取到视频流后，发现提供的 dom 元素不是所需要的，就会触发此错误。例如接收到的是 H264 流，但是没有绑定 video dom 元素，或接收到的是 H265 流，但是没有绑定 canvas dom 元素 |

isSupported()

检查当前浏览器是否支持播放

const isSuppotred = WWAVPlayer.isSupported();

demo

<script>
	var video = document.getElementById("video");
	var canvas = document.getElementById("canvas");

	var player = null;

	var url = "ws://192.168.8.10/xxxxxfesfsfsf.wwav";
	var token = "xxxxxx";

	function open() {
		try {
			if (player) {
				player.destroy();
			}
			player = new WWAVPlayer({
				debug: false,
			});

			player.attachVideoElement(video);
			player.attachCanvasElement(canvas, {
				baseLibPath: "/statics/h265/",
				debug: false,
			});

			player.on("error", (error_type, detail, info) => {
				console.error("player error", error_type, detail, info);
				errorSpan.innerHTML =
					detail + (info.message ? " : " + info.message : "");
			});
			player.on("play", (event) => {
				console.log("play", event);
			});
			player.on("pause", (event) => {
				console.log("pause", event);
			});
			player.on("media_info", (event) => {
				console.log("media_info", event);
			});

			player.open(url, token);
		} catch (error) {
			console.error("error", error);
		}
	}

	function stop() {
		if (player) {
			player.destroy();
		}
		player = null;
	}

	function play() {
		if (player) {
			player.play();
		}
	}
	function pause() {
		if (player) {
			player.pause();
		}
	}

	function muted(e) {
		if (player) {
			player.muted(e);
		}
	}
</script>