Jessibuca演示

最新推荐文章于 2024-09-19 13:04:00 发布

nov4th

最新推荐文章于 2024-09-19 13:04:00 发布

阅读量1.7k

点赞数

文章标签：前端实时音视频视频编解码

本文链接：https://blog.csdn.net/nov4th/article/details/124420469

版权

介绍

Jessibuca是一款开源的纯H5直播流播放器，通过Emscripten将音视频解码库编译成Js（ams.js/wasm)运行于浏览器之中。兼容几乎所有浏览器，可以运行在PC、手机、微信中，无需额外安装插件。

支持解码H.264视频(Baseline, Main, High Profile全支持，支持解码B帧视频)
支持解码H.265视频（flv id == 12）
支持解码AAC音频(LC,HE,HEv2 Profile全支持)
支持解码PCMA音频以及PCMU音频格式
可设置播放缓冲区时长，可设置0缓冲极限低延迟（网络抖动会造成卡顿现象）
支持智能不花屏丢帧，长时间播放绝不累积延迟。
可创建多个播放实例
程序精简，经CDN加速，GZIP压缩（实际下载500k），加载速度更快
同时支持http-flv和websocket-flv协议以及websocket-raw私有协议（裸数据，传输量更小，需要搭配Monibuca服务器）注：以http-flv请求时，存在跨域请求的问题，需要设置access-control-allow-origin,websocket-flv默认不存在此问题
支持HTTPS/WSS加密视频传输，保证视频内容传输安全
手机浏览器内打开视频不会变成全屏播放

参考文档

官网
 gitee

演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.container {
			    background: rgb(13, 14, 27);
			    width: 450px;
			    height: 250px;
			}
		</style>
	</head>
	<body>
		<div class="container" id="container"></div>
		
		<script src="js/renderer.js"></script>
		<script>
			var $container = document.getElementById('container');
			
			var jessibuca = new Jessibuca({
			    container: $container,	//容器
			    videoBuffer: 0.2,		//延迟时间
			    decoder: "js/ff.js", 	// 默认是 ff.js
				hasAudio: false,		//不开启声音
			    isResize: false, 		// 是否自适应尺寸
			    loadingText: '加载中' 	// 加载文案。 默认'加载中。。。。。'
			});
			
			jessibuca.onLog = msg => console.error(msg);
			jessibuca.onRecord = (status) => console.log('onRecord', status);
			jessibuca.onPause = () => console.log('onPause');
			jessibuca.onPlay = () => console.log('onPlay');
			jessibuca.onFullscreen = msg => console.log('onFullscreen', msg);
			jessibuca.onMute = msg => console.log('onMute', msg);


			setTimeout(function() {
					jessibuca.play("ws://192.168.1.111:9080/ws.flv?token=8f9d3e2b-9752-a745-f804-220a51eaf14b");
			}, 1000);
		</script>
	</body>
</html>