golang+vue 通过RTSP播放海康威视摄像头画面

摄像头信息

摄像头型号：DS-2CD3T87WD-L

视频编码配置：H.265
音频编码配置：AAC
这几个应该是主要配置的内容。

后端服务

FFMPEG工具

golang代码

1. 运行代码

package main

import (
	"fmt"
	"io"
	"net/http"
	"os"
	"regexp"

	"github.com/gin-gonic/gin"
)

// ffmpeg -i rtsp://admin:ZAQ1xsw2@192.0.0.64:554/streaming/channels/1 -c:v copy -c:a aac -f hls -hls_time 10 -hls_list_size 1 ./video/output.m3u8
func main() {
	r := gin.Default()
	r.Use(Cors())
	// r.GET("/ws", Ping)
	r.GET("/", func(c *gin.Context) {
		// Serve the HLS playlist file
		c.Writer.Header().Set("conten-type", "application/x-mpegURL")
		file, _ := os.Open("./video/output.m3u8")
		defer file.Close()
		io.Copy(c.Writer, file)
	})

	r.GET("/:name", func(c *gin.Context) {
		name := c.Param("name")
		matched, err := regexp.MatchString("^output\\d+\\.ts$", name)
		if err != nil {
			fmt.Println("match err =", err)
		}
		if matched {
			// Serve the HLS .ts segment files
			c.Writer.Header().Set("conten-type", "video/MP2T")
			fmt.Println(c.Request.URL.Path)
			file, _ := os.Open("./video/"+c.Request.URL.Path[1:])
			defer file.Close()
			io.Copy(c.Writer, file)
		}
	})

	r.Run(":8080")
}

func Cors() gin.HandlerFunc {
	return func(c *gin.Context) {
		method := c.Request.Method
		origin := c.Request.Header.Get("Origin")
		c.Header("Access-Control-Allow-Origin", origin)
		c.Header("Access-Control-Allow-Headers", "Content-Type,AccessToken,X-CSRF-Token, Authorization, Token,X-Token,X-User-Id")
		c.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS,DELETE,PUT")
		c.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers, Content-Type")
		c.Header("Access-Control-Allow-Credentials", "true")

		// 放行所有OPTIONS方法
		if method == "OPTIONS" {
			c.AbortWithStatus(http.StatusNoContent)
		}
		// 处理请求
		c.Next()
	}
}

2. 运行ffmpeg工具
   这里也可以通过golang的cmd包在代码中运行，这里是测试就在命令行直接运行了。
   命令：ffmpeg -i rtsp://admin:ZAQ1xsw2@192.0.0.64:554/streaming/channels/1 -c:v copy -c:a aac -f hls -hls_time 10 -hls_list_size 1 ./video/output.m3u8
   为了生成hls格式的视频文件，这里会生成.u3m8文件和对应的.ts文件

• -i :是数据流的输入源
• -c:v copy: 将视频流从输入端复制到输出端，不进行任何转码，这样更快，避免质量损失
• -c:a acc : 将音频流转码为AAC格式。HLS需要AAC格式音频
• -f hls : 指定输出格式问HLS
• -hls_time 10：将每个HLS段的持续时间设置为10秒。目前看就是每个ts文件有10秒长度
• -hls_list_size 1：将播放列表中最大HLS段的数量设置为1。？这个目前还没有搞清楚
  ./video/output.m3u8：输出的文件，得到一个output.m3u8文件和很多持续生成n个output0.ts…outputn.ts。

vue前端

以下是主要的依赖，要使用vue3

<template>
  <div>
    <video ref="v1" id="my-video" class="video-js vjs-default-skin" controls style="width: 100%;height: auto">

    </video>
  </div>
</template>
<script>

import videojs from 'video.js'
import 'videojs-contrib-hls'
import 'video.js/dist/video-js.css'
import Hls from 'hls.js'

export default {
  name: "myVideo",
  data() {
    return {
    }
  },
  mounted() {
    const m3u8="http://localhost:8080"//请求m3u8文件的后端接口，相当于请求静态资源
    const options = {
      autoplay: false, // 是否自动播放
      controls: true, // 是否显示控制条
      preload: 'auto', // 预加载
      aspectRatio: '16:9', // 播放器宽高比
      sources: [{ // 视频源
        src: 'http://localhost:8080/',
        type: 'application/x-mpegURL'
      }],//留下这个配置显示live

      html5: {
        hls: {
          withCredentials: false, // 是否携带跨域证书
          overrideNative_: true
        }
      },
      plugins: { // 加载插件
      }
    }
    const player = videojs(this.$refs.v1, options,{techOrder:['html5']})
    console.log("player===",player)
    player.on('canplay',function (){
      console.log("player.on---player.tech()===",player.tech())
    })
    if (Hls.isSupported()) {//判断浏览器是否支持HLS
      // let player = videojs('my-video', options)
      let hls = new Hls()
      //hls.loadSource(m3u8)
      console.log("player.tech()===",player.tech())
      hls.attachMedia(player.tech().el())
    } else {
      player.src({
        src:m3u8,
        type:'application/x-mpegURL'
      })
      player.currentType('application/x-mpegURL')
    }
  },
}
</script>

<style scoped>

</style>

不要hls.loadSource(m3u8)，在option配置的话，视频显示livez。
在hls.loadSource(m3u8)配置，不在option配置的话，进度条就是显示多个短时间的视频