使用flv.js播放视频的时候，报错 _typeof is not defined

Posted 2023-03-31 婷婷心慌

使用flv.js播放视频的时候，报错 _typeof is not defined。

发现自己的版本是最新的：1.6.2

考虑到版本过高导致的问题，就降低了版本:
先把自己项目的flv.js卸载了

npm unnstall flv.js

然后安装对应的版本，选择了1.5.0的

npm install flv.js@1.5.0

启动项目之后就可以正常播放视频了。

有时候自己本地的package.json文件是自己想要的插件版本号，但是还是不行？？？？
可能是下载的插件依赖依然不是自己想要的版本号，检查一下对应的版本号或者查看package-lock.json里面的版本号；相对应的删除之后手动安装指定版本号；
在提交至远程仓库时，如果有指定的版本号会受到影响，在过滤文件中不要保留package-lock.json；
.gitignore文件夹把过滤的package-lock.json给移除提交至远程仓库；
在别人拉取或者自己拉取的时候就会根据里面的东西对应安装而不至于每次npm i便会升至最新版本了。

package.json文件只能锁定大版本，也就是版本号的第一位，并不能锁定后面的小版本，你每次npm install都是拉取的该大版本下的最新的版本，为了稳定性考虑我们几乎是不敢随意升级依赖包的，这将导致多出来很多工作量，测试/适配等，所以package-lock.json文件出来了，当你每次安装一个依赖的时候就锁定在你安装的这个版本
因此npm最新的版本就开始提供自动生成package-lock.json功能，为的是让开发者知道只要你保存了源文件，到一个新的机器上、或者新的下载源，只要按照这个package-lock.json所标示的具体版本下载依赖库包，就能确保所有库包与你上次安装的完全一样。

使用flv.js + websokect播放rtsp格式视频流

1.问题背景

　　在最近的项目中，涉及到海康接入的视频播放的问题，海康这边获取到的视频流是rtsp格式，web端目前没有直接可以播放的组件，于是最开始是后端处理了视频流，返回hls格式的m3u8地址，这样用videojs插件就可以播放了，但是问题就是处理了的m3u8地址播放效果非常差，第一次加载时间较长，且播放过程中很卡，尤其是项目的界面做的是视频监控墙，不止一个视频，导致没办法看了。想着最好的方式还是直接播放rtsp地址，不经过转码。于是问题回到了如何播放rtsp.

2.方案的筛选

　　播放rtsp格式的视频流，网上有很多方式，除了上述的转m3u8，还有转rtmp的，或者使用WebRTC、streamedian、h5stream等，其中webRTC我不太了解，看了一下文档，也比较复杂，就放弃了。然后是streamedian、h5stream这两个，前者是需要收费，另一个我看了文档，没有可以动态设置rtsp地址的地方，只有在配置文件里写好，这样不符合项目的要求，也放弃了，就在纠结到底该怎么办的时候，同事大佬提出了一个建议，看看人家bilibili也有直播，人家是怎么做的呢，于是顺手搜了一下B站直播原理，看到了一篇博文是说bilibili开发的flv.js，讲述了里面的用法，我看了看，确实算是一个比较可行的方法了，于是开干起来。

3.实际运用

　　首先了解这个方案的大致流程：1.需要一个node服务器处理rtsp流，转为flv流，2.前端安装flv.js显示flv视频流。其中第一步搭建的服务器实际上是搭建了一个websokect服务器，前端通过flv里提供的方法，通过websokect连接到node服务器，这样flv流就源源不断的送到了前端，虽然这里也对rtsp进行了处理，但是效果却出奇的好，比m3u8格式的效果好太多，基本上3、4s就加载出来了，如果同时加载的视频很多，那么差不多也在5-8s内加载出来了，最多的一次12个视频，最后一个加载出来用了12s左右。总得来说比之前m3u8单个都要加载10s左右，视频多了甚至加载不出来好太多了。

好了，介绍的话太多了，还是回到如何搭建吧。node搭建的服务器需要配合ffmpeg。所以首先安装ffmpeg，这个我在Windows上测试的，直接下载了一个压缩包，解压就好，然后是搭建node服务器，将以下package.json直接复制到文件里，然后npm install就可以得到一个服务器环境（前提是已经安装了node哦）。

 1 
 2   "name": "ffmpeg-server",
 3   "version": "1.0.0",
 4   "description": "",
 5   "main": "index.js",
 6   "scripts": 
 7     "test": "echo \\"Error: no test specified\\" && exit 1"
 8   ,
 9   "author": "",
10   "license": "ISC",
11   "devDependencies": 
12     "express": "^4.17.1",
13     "express-ws": "^4.0.0",
14     "ffmpeg": "0.0.4",
15     "fluent-ffmpeg": "^2.1.2",
16     "http": "0.0.0",
17     "websocket-stream": "^5.5.0"
18   
19 

接下来是index.js

 1 var express =  require("express");
 2 var expressWebSocket = require("express-ws");
 3 var ffmpeg = require("fluent-ffmpeg");
 4 ffmpeg.setFfmpegPath("G:/ffmpeg/ffmpeg/ffmpeg-4.3.1-win64-static/bin/ffmpeg");
 5 var webSocketStream = require("websocket-stream/stream");
 6 var WebSocket = require("websocket-stream");
 7 var http = require("http");
 8 function localServer() 
 9     let app = express();
10     app.use(express.static(__dirname));
11     expressWebSocket(app, null, 
12         perMessageDeflate: true
13     );
14     app.ws("/rtsp/:id/", rtspRequestHandle)
15     app.listen(8888);
16     console.log("express listened")
17 
18 function rtspRequestHandle(ws, req) 
19     console.log("rtsp request handle");
20     const stream = webSocketStream(ws, 
21         binary: true,
22         browserBufferTimeout: 1000000
23     , 
24         browserBufferTimeout: 1000000
25     );
26     let url = req.query.url;
27     // console.log("rtsp url:", url);
28     // console.log("rtsp params:", req.params);
29     try 
30         ffmpeg(url)
31             .addInputOption("-rtsp_transport", "tcp", "-buffer_size", "102400")  // 这里可以添加一些 RTSP 优化的参数
32             .on("start", function () 
33                 console.log(url, "Stream started.");
34             )
35             .on("codecData", function () 
36                 console.log(url, "Stream codecData.")
37              // 摄像机在线处理
38             )
39             .on("error", function (err) 
40                 console.log(url, "An error occured: ", err.message);
41             )
42             .on("end", function () 
43                 console.log(url, "Stream end!");
44              // 摄像机断线的处理
45             )
46             .outputFormat("flv").videoCodec("copy").noAudio().pipe(stream);
47      catch (error) 
48         console.log(error);
49     
50 
51 localServer();

文件目录如下：

然后在backendNode这个文件下执行： node index.js就完成了服务器的搭建。

接下来是前端文件的写法：

前端也要先安装flv.js npm install flv.js -S -D

然后就是建一个文件显示视频：<template> <div class="video-box" v-loading="loading">

        <video class="demo-video" ref="player" muted  @dblclick="fullScreen"></video>
    </div>
</template>
<script>
import flvjs from 'flv.js'
export default 
  props: 
    rtsp: 
      type: String,
      default: ''
    ,
    id: 
      type: [String, Number],
      default: ''
    
  ,
  data () 
    return 
      // id: '1',
      player: null,
      loading: true
    
  ,
  watch: 
    rtsp: 
      handler: function (val) 
        if (val) 
          if (this.player) 
            this.player.unload()
            this.player.destroy()
            this.player = null
            this.loading = true
          
          this.$nextTick(() => 
            this.playVideo()
          )
        
      ,
      immediate: true
    
  ,
  methods: 
    fullScreen () 
      if (this.$refs.player.requestFullScreen) 
        this.$refs.player.requestFullScreen()
       else if (this.$refs.player.mozRequestFullScreen) 
        this.$refs.player.mozRequestFullScreen()
       else if (this.$refs.player.webkitRequestFullScreen) 
        this.$refs.player.webkitRequestFullScreen()
      
    ,
    playVideo () 
      const time1 = new Date().getTime()
      if (flvjs.isSupported()) 
        let video = this.$refs.player
        if (video) 
          this.player = flvjs.createPlayer(
            type: 'flv',
            isLive: true,
            url: `ws://localhost:8888/rtsp/$this.id/?url=$this.rtsp`
          )
          this.player.attachMediaElement(video)
          try 
            this.player.load()
            this.player.play().then(() => 
              console.log(new Date().getTime() - time1)
              this.loading = false
            )
           catch (error) 
            console.log(error)
          
        
      
    
  ,
  beforeDestroy () 
    if (this.player) 
      this.player.unload()
      this.player.destroy()
      this.player = null
    
  

</script>
<style lang="scss">
.video-box 
  width: 100%;
  height: 100%;
  video 
    width: 100%;
    height: 100%;
    object-fit: fill;
  
  //播放按钮
  video::-webkit-media-controls-play-button 
      display: none;
  
  video::-webkit-media-controls-current-time-display 
    display: none;
  
  video::-webkit-media-controls-timeline 
    display: none;
  

</style>

因为我是写成的一个组件，所以我的rtsp地址是传进来的。

这样就可以播放rtsp了，效果真的不错。

4，其他问题

　　出了上述的流程，还有其他的问题，比如这个是在本地搭建的，不存在代理的问题，如果要发布到线上环境，则node服务器肯定也是要搭建到线上的服务器的（线上搭建和之前的方式差不多，就是看服务器是Linux还是Windows了，两者区别在于ffmpeg的安装，其他index.js是一样的），就会涉及到代理websokect的问题。因为之前没有代理过，所以也有些坑。

1.首先是本地代理

　　用vue+axios，通常代理http的都是直接在配置文件里写的，代理websokect的需要在此基础上加上ws:true字段，如下：

'/streamWs/**': //
        target: 'ws:xxx',
        secure: false,
        changeOrigin: false,
        pathRewrite:  '^/streamWs': '' ,
        ws: true //开启ws, 如果是http代理此处可以不用设置
    

这个地方都不难，主要还是在调用代理的地方，需要这样写：

this.player = flvjs.createPlayer(
            type: 'flv',
            isLive: true,
            // url: `ws://localhost:8888/rtsp/$this.id/?url=$this.rtsp`　　　　　　　// 代理ws需要写上ws://$location.host，然后再是代理前缀/streamWs
            url: `ws://$location.host/streamWs/rtsp/$this.id/?url=$this.rtsp`
          )

通过这样设置，就可以成功代理了。

2.然后是线上的代理

　　线上我用的是nginx代理，重点在于两个地方：

第一个地方是http下面加的东西：

map $http_upgrade $connection_upgrade 
    default upgrade;
    ''  close;
    

第二个是在前端页面的端口下server下加的代理

location /streamWs/ # http地址是node服务器的地址
              proxy_pass http:xxx;
               proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 #重点是下面这三条，写上了才是代理ws
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection $connection_upgrade;
        

好了，经过这一系列的配置，就可以在线上环境看到了。

------------------------------------------------------------------分割线，我又来了，还是视频的问题，这次优化了，提出了新的方案----------------------------------------------------------------------------------------------------------------------

原因在于，用户方一直抱怨视频不能播放h265格式的视频，然后又说延时高，rtsp都被嫌弃延时高了，真的是没办法了，一直拖着没去解决，正好公司有个后端大佬有空，就一起解决这个问题。前端要改的地方不多，就是将url从ws变为了http://xxxxx.flv格式的，其他的处理都在后端了，包括搭建了一个流服务器，将h265格式的视频转码为h264(再也不用麻烦甲方去改视频流格式了)，然后推送给前端，使用的还是flv.js。值得一提的是，将rtsp换成了http-flv之后，加载视频的速度简直飞起了，基本上秒开了。之前我打印过时间戳，差不多网速好的时候，播放rtsp的视频，也要花费1000ms以上，这个直接就是250ms左右，看着真的是赏心悦目呀！