试玩平台网站开发录入客户信息的软件
使用jessibuca+wvp+zlm实现html无插件播放摄像头实时画面
- 环境
- 一、flv、hls简易版
- 二、进阶操作
环境
- 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实现