wwav-player-webdecodecs

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

安装

npm i @vanwei-wcs/wwav-player-webdecodecs

import WWAVPlayer from '@vanwei-wcs/wwav-player-webdecodecs'
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()
• 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 为视频地址密码

play()

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

pause()

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

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();
		}
	}
</script>