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

jessibuca官网:jessibuca.monibuca.com/

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

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

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

重要的事情说三遍

第一步

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

<div id="container" width={500} height={300}></div>

第二步

全局引入以下三个文件。这三个文件是可以正常进行直播流的必要文件。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(`直播流地址`);

总结

1. 创建html视图区域
2. 映入三个必须的文件（Jessibuca.js/decoder.js/decoder.wasm）
3. 创建实例（注意实例中的decoder属性值一定要访问到decoder.js文件）
4. 开启播放

成功案例

官网demo和api地址

各类demo地址：jessibuca.monibuca.com/demo.html#v…

API地址：jessibuca.monibuca.com/api.html

react的umi框架配置全过程

1.把上述三个文件放到public文件夹下

2.在config文件中引入

3.在组件中创建可视窗口

4.创建实例并播放直播流

温馨提示：退出播放页面的时候，记得销毁直播流，否则流量消耗很大。