使用jessibuca+wvp+zlm实现html无插件播放摄像头实时画面
环境
- wvp+zlm
- jessibuca.js
- html5+jquery
- crypto-js.min.js
一、flv、hls简易版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易版</title>
</head>
<body class="page">
<div class="root">
<div class="container-shell">
<div id="container" style="width: 700px;height: 500px"></div>
<div class="input">
<button id="play">播放</button>
<button id="pause" style="display: none">停止</button>
<button id="destroy">销毁</button>
</div>
</div>
</div>
<script src="./js/jquery-3.5.1.min.js"></script>
<script src="./js/jessibuca.js"></script>
<script>
var showOperateBtns = true; // 是否显示按钮
var jessibuca = null; // 播放器对象
//初始化播放器
function create() {
jessibuca = new Jessibuca({
container: document.getElementById('container'), //播放器容器
decoder: './js/decoder.js', //decoder.js和decoder.wasm必须在同级目录
videoBuffer: 0.2, // 缓存时长
isResize: false,
text: "",
loadingText: "加载中",
debug: true,
showBandwidth: showOperateBtns, // 显示网速
operateBtns: {
fullscreen: showOperateBtns,
screenshot: showOperateBtns,
play: showOperateBtns,
audio: showOperateBtns,
},
isNotMute: false,
}, );
$("#play").show();
$("#pause").hide();
$("#destroy").hide();
}
create();
$("#play").on('click', function() {
//wvp平台获取到的资源地址
var href = "ws://192.168.1.199:80/test/test.live.flv";
if (href) {
jessibuca.play(href); //播放
$("#play").hide();
$("#pause").show();
$("#destroy").show();
}
})
$("#pause").on('click', function() {
$("#play").show();
$("#pause").hide();
jessibuca.pause(); //停止
})
$("#destroy").on('click', function() {
if (jessibuca) {
jessibuca.destroy(); //销毁
}
create();
})
</script>
</body>
</html>
二、进阶操作
访问wvp的api文档：http://IP:18080/doc.html
- 可以通过http请求进行拉流操作，实现html中无需在wvp平台配置即可查看实时监控
- 大部分接口需要登录后使用
- 登录时密码需要进行md5加密
- 实时画面的推荐使用无人观看时停用，时间区间录像推荐使用无人观看时移除
- flv、hls方式的延迟大概在3-5s，低延迟需要使用webrtc的方式（当前方式暂时无法实现）
- webrtc的可以通过webrtcstreamer.js实现