前端播放.flv视频流视频

Posted 野人也有爱

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端播放.flv视频流视频相关的知识，希望对你有一定的参考价值。

首先提供一个测试.flv视频是否可以播放的小工具：

一、测试工具使用
可以自己下载potplayer这个软件，很小的一个软件，使用很方便，可以自己测试视频流是否可用。下载链接如下：
https://potplayer.en.softonic.com/download

具体使用方法如下：
在软件屏幕上右击，然后选择【打开】–> 【打开链接】

 

 

然后在上方输入在线测试的链接，然后点击【确定】


如果当前在线链接可以用，就会播放出视频，否则的话就会报错，如下图，就知道当前的视频流不可用了。

二、flv

我在页面需要展示一个监控画面，所以拿到了一个.flv+token形式的的地址。

因为前端vue的<video>标签src不支持播放这种格式，所以引入了flv。过程很多报错，尝试换用慧视云平台的SDK发现不支持这种格式的视频。（  http/flv协议 h264编码的 ）

所以又继续用flv。网上可以查到用法，主要是mounted里，可能本地会报网络错误，可以暴露下地址在其他电脑试试看。

<template>
  <div>
    <video id="videoElement" controls autoplay muted >
    </video>
  </div>
</template>

<script>
import flvjs from \'flv.js\'
export default
  props:
    url:
      type: String
   
  ,
  data()
    return
      flvPlayer: null
   
  ,
  mounted()
    console.log(\'这里接收URL\', this.url)
    if (flvjs.isSupported())
      console.log(\'走了\')
      var videoElement = document.getElementById(\'videoElement\')
      this.flvPlayer = flvjs.createPlayer(
        type: \'flv\',
        isLive: true,
        hasAudio: false,
        url: this.url   // 自己的flv视频流
      )
      this.flvPlayer.attachMediaElement(videoElement)
      this.flvPlayer.load()
      this.flvPlayer.play()
   
  ,
  methods:
    play()
      this.flvPlayer.play()
   
  ,
  beforeDestroy()
    this.url = \'\'
 
</script>

13 rtsp视频服务 基于node+ffmpeg 转换为 flv 视频服务

前言

接上一篇文章 rtsp视频服务 转换为 rtmp服务 转换为前端可用的服务

继续讨论 前端播放 rtsp 视频服务  

rtsp视频服务 转换为 rtmp服务 转换为前端可用的服务 会使用到 ffmpeg 来实现 rtsp 服务转换为 rtmp 服务, nginx-http-flv 来实现 rtmp 服务转换为 http-flv 服务, 因此 前端可以直接播放视频 

这里使用 node 作为后台服务, 使用 ffmpeg 基于 websocket 协议将 rtsp 直接转换为 前端可用的 flv 视频数据 

我们这里 参考的代码来自于 GitHub - LorinHan/flvjs_test: 采用flvjs实现摄像头直播

主要包含一个 node 作为代理服务器, 加上一个测试的前端项目 

node 代理服务器 

index.js 如下, 代码来自于 GitHub - LorinHan/flvjs_test: 采用flvjs实现摄像头直播 中的 index.js,并做了一定的调整 

服务启动步骤如下 

npm install 
node index.js

其中的主要处理为, 启动一个 websocket 服务器, 代理 以 "/rtsp" 打头的 websocket 请求, 然后获取查询字符串中的 url, 基于 ffmpeg 将 rtsp 视频数据转换为 flv 视频数据, 然后 响应回去 

ffmpeg -re -i $rtspUrl -rtsp_transport tcp -buffer_size 102400 -vcodec copy -an -f flv 
// 然后将转换之后的结果响应给 客户端
var express =  require("express");
var expressWebSocket = require("express-ws");
var ffmpeg = require("fluent-ffmpeg");
ffmpeg.setFfmpegPath("ffmpeg");
var webSocketStream = require("websocket-stream/stream");
var WebSocket = require("websocket-stream");
var http = require("http");

// config
let rtspServerPort = 9999

function localServer() 
    let app = express();
    app.use(express.static(__dirname));
    expressWebSocket(app, null, 
        perMessageDeflate: true
    );
    app.ws("/rtsp/:id/", rtspRequestHandle)
    app.listen(rtspServerPort);
    console.log("express listened on port : " + rtspServerPort)


function rtspRequestHandle(ws, req) 
    console.log("rtsp request handle");
    const stream = webSocketStream(ws, 
        binary: true,
        browserBufferTimeout: 1000000
    , 
        browserBufferTimeout: 1000000
    );

    let url = req.query.url;
    console.log("rtsp url:", url);
    console.log("rtsp params:", req.params);
    try 
        ffmpeg(url)
            .addInputOption("-rtsp_transport", "tcp", "-buffer_size", "102400")  // 这里可以添加一些 RTSP 优化的参数
            .on("start", function () 
                console.log(url, "Stream started.");
            )
            .on("codecData", function () 
                console.log(url, "Stream codecData.")
             // 摄像机在线处理
            )
            .on("error", function (err) 
                console.log(url, "An error occured: ", err.message);
            )
            .on("end", function () 
                console.log(url, "Stream end!");
             // 摄像机断线的处理
            )
            .outputFormat("flv").videoCodec("copy").noAudio().pipe(stream);
     catch (error) 
        console.log(error);
    


localServer();

测试的 HelloWorld.vue 

如下 rtsp 服务为 rtsp://localhost:8554/rtsp/test_rtsp 

创建一个 flvPlayer, 视频输入为 ws://localhost:9999/rtsp/xxx/?url=rtsp://localhost:8554/rtsp/test_rtsp 

然后 启动项目, 能够正常看到视频 即成功 

<template>
    <div class="video-wrapper">
        <video class="demo-video" ref="player" muted autoplay></video>
    </div>
</template>
<script>
import flvjs from "flv.js";
export default 
    data () 
        return 
          id: "xxx",
          rtsp: "rtsp://localhost:8554/rtsp/test_rtsp",
          player: null
        
    ,
    mounted () 
        if (flvjs.isSupported()) 
            let video = this.$refs.player;
            if (video) 
                this.player = flvjs.createPlayer(
                    type: "flv",
                    isLive: true,
                    url: `ws://localhost:9999/rtsp/$this.id/?url=$this.rtsp`
                );
                this.player.attachMediaElement(video);
                try 
                    this.player.load();
                    this.player.play();
                 catch (error) 
                    console.log(error);
                
            
        
    ,
    beforeDestroy () 
        this.player.destory();
    

</script>
<style>

	    .video-wrapper 
	        max-width: 880px;
	        max-height: 660px;
			border:1px solid red;
	    
    .demo-video 
        max-width: 880px;
        max-height: 660px;
    
</style>

测试页面展示效果如下 

FlvUsage.html 

也可以使用一个普通的 html 来进行测试 

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.min.js"></script>
  <!--  <script src="./js/flv.min.js"></script>-->
  <style>
    body, center 
      padding: 0;
      margin: 0;
    

    .v-container 
      width: 640px;
      height: 360px;
      border: solid 1px red;
    

    video 
      width: 100%;
      height: 100%;
    
  </style>

</head>
<body>
<div class="v-container">

  <video id="player1" muted autoplay="autoplay" preload="auto" controls="controls">
  </video>

</div>

<script>
  if (flvjs.isSupported()) 
    var videoElement = document.getElementById('player1');
    var flvPlayer = flvjs.createPlayer(
      type: 'flv',
      url: 'ws://localhost:9999/rtsp/xxx/?url=rtsp://localhost:8554/rtsp/test_rtsp'
    );
    flvPlayer.attachMediaElement(videoElement);
    flvPlayer.load();
  </script>

</body>
</html>

测试页面展示效果如下 

完 

以上是关于前端播放.flv视频流视频的主要内容，如果未能解决你的问题，请参考以下文章

Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流

13 rtsp视频服务 基于node+ffmpeg 转换为 flv 视频服务

13 rtsp视频服务 基于node+ffmpeg 转换为 flv 视频服务

前端视频流播放

winform中如何播放flv视频？

网页播放视频(js,flv,flash)问题