前端使用jessibuca播放.flv直播流

您所在的位置：网站首页 › clearview下载 › 前端使用jessibuca播放.flv直播流

前端使用jessibuca播放.flv直播流

2024-01-21 16:41| 来源: 网络整理| 查看: 265

jessibuca官网:jessibuca.monibuca.com/

退出页面时销毁直播流实例

重要的事情说三遍

第一步

在html区域创建播放直播流的屏幕

第二步

全局引入以下三个文件。这三个文件是可以正常进行直播流的必要文件。vue和react玩家们一般都是把文件放到public文件夹下然后配置全局引入。

这三个文件的获取地址：github.com/bosscheng/j…

第三步

因为是全局引入，不用在组件内再次引入，直接new一个实例即可。如下

jessibuca = new Jessibuca({ container: document.getElementById("container"), videoBuffer: 0, // 缓存时长 isResize: false, text: "", loadingText: "加载中", debug: true, decoder: "/decoder.js", showBandwidth: true, // 显示网速 operateBtns: { fullscreen: true, screenshot: true, play: true, audio: true, record: true }, forceNoOffscreen: true, isNotMute: false, heartTimeout: 100, },);

注意，decoder: "/decoder.js", 这个字段务必保证后面的路径是我们项目中可以被访问到的。

如果您实在不了解怎么访问公共资源

不知道自己项目的公共资源怎么访问。就把decoder.js和decoder.wasm文件放在当前页面的同级目录下，再直接使用“./decoder.js”访问也行。

最后一步

播放

jessibuca.play(`直播流地址`); 总结创建html视图区域映入三个必须的文件（Jessibuca.js/decoder.js/decoder.wasm）创建实例（注意实例中的decoder属性值一定要访问到decoder.js文件）开启播放

成功案例