当前位置：首页 > news >正文

使用jessibuca+wvp+zlm实现html无插件播放摄像头实时画面

news 来源：原创 2025/5/31 5:15:47

使用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>