使用flv.js和Jessibuca方式播放流媒体 rtmp/rtsp

原创

已于 2025-08-21 15:08:02 修改 · 1.7w 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

于 2021-08-01 20:36:40 首次发布

flvjs与FLV有什么区别和联系？

flv.js
是 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发，没有用到 Flash。由 bilibili 网站开源（Github）。

概览：

一个实现了在 HTML5 视频中播放 FLV 格式视频的 JavaScript 库。它的工作原理是将 FLV 文件流转码复用成 ISO BMFF（MP4 碎片）片段，然后通过 Media Source Extensions 将 MP4 片段喂进浏览器。

flv.js 是使用 ECMAScript 6 编写的，然后通过 Babel Compiler 编译成 ECMAScript 5，使用 Browserify 打包。

功能：

FLV 容器，具有 H.264 + AAC 编解码器播放功能
多部分分段视频播放
HTTP FLV 低延迟实时流播放
FLV 通过 WebSocket 实时流播放
兼容 Chrome, FireFox, Safari 10, IE11 和 Edge
十分低开销，并且通过你的浏览器进行硬件加速
FLV
HTTP FLV则是将RTMP封装在HTTP协议之上的，可以更好的穿透防火墙等。rtmp和http-flv的视频格式都是flv格式的，只是传输协议而不同。rtmp是tcp的传输协议，而http-flv是http长链接的传输协议。

总结
flvjs是一个H5播放器。FLV是一种协议。flvjs可以用于播放FLV格式的视频。

几种视频流比较。

协议	http-flv	rtmp	hls
传输方式	http流	tcp流	http流
视频封装格式	flv	flv	Ts文件
延迟	低	低	高
数据分段	连续流	连续流	切片文件
h5播放	flv.js	video.js	hls.js

vue中使用flvjs

1.使用npm安装flv.js

npm install --save flv.js

2.新建FlvLive.vue文件，在文件中引入

import flvjs from 'flv.js'

<script>
            if (flvjs.isSupported()) { // 判断当前浏览器是否支持flv。
                var videoElement = document.getElementById('videoElement'); 
                var flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    // isLive: true,
                    // hasAudio: false,
                    url:'http://127.0.0.1:8000/live/abc.flv'
                });
                flvPlayer.attachMediaElement(videoElement); // 挂载video标签。
                flvPlayer.load(); 
                flvPlayer.play(); // 播放
            }
        </script>

封装一个flv函数

function playVideo(demo, url) {
  demo = document.getElementById(demo);
  if (demo) {
    demo.pause()
    demo.unload()
    demo.detachMediaElement()
    demo.destroy()
    demo = null
  }
  if (flvjs.isSupported()) {
    var flvPlayer = flvjs.createPlayer({
      type: 'flv',
      hasAudio: false,
      url: url
    });
    flvPlayer.attachMediaElement(demo);
    flvPlayer.load(); //加载
  }
  demo.play();


//断开流链接，若不断开会一直占用带宽
function destoryVideo() {
        this.flvPlayer.pause();
        this.flvPlayer.unload();
        this.flvPlayer.detachMediaElement();
        this.flvPlayer.destroy();
        this.flvPlayer = null;
      },

H265格式请使用Jessibuca

支持h265和h264格式

GitHub - langhuihui/jessibuca: Jessibuca是一款开源的纯H5直播流播放器

前台框架： GitHub - 648540858/wvp-GB28181-pro: WEB VIDEO PLATFORM是一个基于GB28181-2016标准实现的网络视频平台，支持NAT穿透，支持海康、大华、宇视等品牌的IPC、NVR、DVR接入。支持国标级联，支持rtsp/rtmp等视频流转发到国标平台，支持rtsp/rtmp等推流转发到国标平台。

配置项：

let isShow = true
  window.flvPlayer = new Jessibuca({
    container: demo,
    autoWasm: true,
    background: "",
    controlAutoHide: false,
    debug: false,
    decoder: "static/js/jessibuca/decoder.js",
    forceNoOffscreen: true,
    hasAudio: false,
    hasVideo: true,
    heartTimeout: 5,
    heartTimeoutReplay: true,
    heartTimeoutReplayTimes: 3,
    hiddenAutoPause: false,
    hotKey: false,
    isFlv: false,
    isFullResize: false,
    isNotMute: false,
    isResize: false,
    keepScreenOn: false,
    loadingText: "请稍等, 视频加载中......",
    loadingTimeout: 10,
    loadingTimeoutReplay: true,
    loadingTimeoutReplayTimes: 3,
    openWebglAlignment: false,
    operateBtns: {
      fullscreen: isShow,
      screenshot: isShow,
      play: isShow,
      audio: isShow,
      record: false
    },
    recordType: "webm",
    rotate: 0,
    showBandwidth: false,
    supportDblclickFullscreen: false,
    timeout: 10,
    useMSE: true, //pc端true 渲染为canvas标签，false为video标签；移动端与之相反
    useOffscreen: false,
    useWCS: true,
    useWebFullScreen: false,
    videoBuffer: 0,
    wasmDecodeAudioSyncVideo: true,
    wasmDecodeErrorReplay: true,
    wcsUseVideoRender: true
  },);

Android端webView灰色按钮（默认的播放按钮）问题

android端自动起播在首帧出来之前会有一个灰色的播放按钮闪现，不同的手机或者android版本会略有不同，这个是webview中video内置的poster导致，前端无法隐藏

方案：

1.先设置useMSE:false保证是video标签渲染

1.设置Video的poster属性为一个透明的图片推荐使用poster="https://via.placeholder.com/1x1"

document.querySelector('video').poster="https://via.placeholder.com/1x1"

// 透明 base64
<video poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
// or 
<video poster="https://via.placeholder.com/1x1" />
// or
<video poster="noposter" />

poster="" 直接给空字符串会被忽略，所以需要设置一个透明的图片或者noposter

封装多画面组件

效果图：

cameraPlays.vue

<!-- 多画面播放视频 -->
<template>
  <div style="height: 100%; width: 100%" class="video_box">
    <transition name="modal" tag="div">
      <div style="height: 100%; width: 100%" v-if="visible">
        <div class="" style="height: 100%; width: 100%">
          <div
            class="user_skills comm-item"
            @mouseenter="onHover"
            @mouseleave="onLeave"
            style="
              width: 100%;
              padding-top: 0px;
              height: 103%;
              position: relative;
            "
          >
            <div
              style="width: 100%; height: 96%; z-index: 9"
              class="cameraPlay avatar video-avatar"
            ></div>
            &