vue项目播放海康,大华等rtsp视频流

浏览器不能直接播放rtsp格式视频

需要将rtsp转为flv，然后再使用flv.js播放

1.rtsp转flv(需要node)

首先电脑需要下载 ffmpeg(将resp转为flv主要使用他)

官网：Download FFmpeg

 

下载完需要配置环境变量

 

 

配置好后 cmd 运行  ffmpeg -version 输出版本信息则成功

2.node代码

下载node依赖

npm i fluent-ffmpeg ws websocket-stream

import WebSocket from 'ws'
import webSocketStream from 'websocket-stream/stream'
import ffmpeg from 'fluent-ffmpeg'

// 建立WebSocket服务
const wss = new WebSocket.Server({ port: 8888, perMessageDeflate: false })

// 监听连接
wss.on('connection', handleConnection)

// 连接时触发事件
function handleConnection (ws, req) {
  // 获取前端请求的流地址（前端websocket连接时后面带上流地址）
  const url = req.url.slice(1)
  // 传入连接的ws客户端 实例化一个流
  const stream = webSocketStream(ws, { binary: true })
  // 通过ffmpeg命令 对实时流进行格式转换 输出flv格式
  const ffmpegCommand = ffmpeg(url)
    .addInputOption('-analyzeduration', '100000', '-max_delay', '1000000')
    .on('start', function () { console.log('Stream started.') })
    .on('codecData', function () { console.log('Stream codecData.') })
    .on('error', function (err) {
      console.log('An error occured: ', err.message)
      stream.end()
    })
    .on('end', function () {
      console.log('Stream end!')
      stream.end()
    })
    .outputFormat('flv').videoCodec('copy').noAudio()

  stream.on('close', function () {
    ffmpegCommand.kill('SIGKILL')
  })

  try {
    // 执行命令 传输到实例流中返回给客户端
    ffmpegCommand.pipe(stream)
  } catch (error) {
    console.log(error)
  }
}

作者：有刃有鱼阮小六
链接：https://juejin.cn/post/6908641550046068744
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

3.vue代码

npm i flv.js

<template>
  <div class="wrap">
    <video class="video" muted autoplay controls ref="player"></video>
  </div>
</template>

<script>
import flvjs from 'flv.js' // 引入flvjs
export default {
  data () {
    return {
      player: null
    }
  },
  mounted () {
    // 如果浏览器支持flvjs，则执行相应的程序
    if (flvjs.isSupported()) {
      // 准备监控设备流地址
      const url = 'rtsp://admin:1234567@192.168.1.100:554/Streaming/Channels/101?transportmode=unicast'
      // 创建一个flvjs实例
      // 下面的ws://localhost:8888换成你搭建的websocket服务地址，后面加上设备流地址
      this.player = flvjs.createPlayer({
        type: 'flv',
        isLive: true,
        url: 'ws://localhost:8888/' + url
      })
      
      this.player.on('error', (e) => {
        console.log(e)
      })
      
     // 将实例挂载到video元素上面
      this.player.attachMediaElement(this.$refs.player)
      
      try {
        // 开始运行加载 只要流地址正常 就可以在h5页面中播放出画面了
        this.player.load()
        this.player.play()
      } catch (error) {
        console.log(error)
      }  
    }
  },
  beforeDestroy () {
    // 页面销毁前 关闭flvjs
    this.player.destroy()
  }
}
</script>

<style lang="scss" scoped>
  .wrap{
    .video {
      width: 300px;
      height: 300px;
    }
  }
</style>

作者：有刃有鱼阮小六
链接：https://juejin.cn/post/6908641550046068744
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。