rtsp视频网页播放

标签：网页 ffmpeg stream flvPlayer rtsp console const 播放

注意：目前都在windows上使用，服务器安装部署多多少少有些问题。

1、WebRtcStreamer

github:https://github.com/mpromonet/webrtc-streamer/releases 但是经常打不开，如果有需要私信我，因为太忙了没时间放网盘，见谅

里面有windows版也有linux版的

在本地使用，进入exe目录

启动，默认是8000

打开测试

默认是index.html，我们可以再html里面新建一个test.html修改一下

test.html

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script src="libs/adapter.min.js"></script>
    <script src="webrtcconfig.js"></script>
    <script src="webrtcstreamer.js"></script>
    <script>
      let options = webrtcConfig.options;
      let codec = webrtcConfig.codec;
      console.log(codec);
      window.onload = function () {
        this.webRtcServer = new WebRtcStreamer("video", webrtcConfig.url);
        webRtcServer.connect(
          "rtsp://stream.strba.sk:1935/strba/VYHLAD_JAZERO.stream",
          "",
          options,
          undefined,
          codec
        );
      };
      window.onbeforeunload = function () {
        this.webRtcServer.disconnect();
      };
    </script>
  </head>
  <body>
    <video id="video" muted playsinline controls></video>
    <!-- <iframe src="http://127.0.0.1:8000/webrtcstreamer.html?video=rtsp://stream.strba.sk:1935/strba/VYHLAD_JAZERO.stream"></iframe> -->
  </body>
</html>

其中我们测试的rtsp是 rtsp://stream.strba.sk:1935/strba/VYHLAD_JAZERO.stream

如果不知道网页上的rtsp是否可用，可以下载vlc-3.0.20-win64 播放器打开网络串流测试

可以播放即能使用。

打开test页面, 播放成功。

这个使用起来还是比较简单，但是linux服务器安装比较麻烦，目前还在实践中。

2、node websockt+ffmpeg转码成flv

node服务端调用ffmpeg转码然后前端使用

服务端

serve.js

const WebSocket = require('ws')
const webSocketStream = require('websocket-stream/stream')
// const ffmpeg = require('fluent-ffmpeg')
const ffmpegInstaller = require('@ffmpeg-installer/ffmpeg');
const ffmpeg = require('fluent-ffmpeg');
ffmpeg.setFfmpegPath(ffmpegInstaller.path);
// 建立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')
    // .outputFormat('flv').videoCodec('copy').noAudio() // 取消音频输出

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

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

创建一个package.json

{
  "name": "rtsp-vue-server",
  "version": "1.0.0",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "@ffmpeg-installer/ffmpeg": "^1.1.0",
    "express-ws": "^5.0.2",
    "fluent-ffmpeg": "^2.1.2",
    "node-media-server": "^2.6.2",
    "node-rtsp-stream": "^0.0.9",
    "websocket-stream": "^5.5.2"
  }
}

安装完必须的包后可以通过npm start启动。

启动完成。

然后下载一个windows版本ffmpeg进行转码

ffmpeg-N-103197-gbff7d662d7-win64-gpl 官网：https://www.ffmpeg.org/download.html#build-windows

解压完成后通过环境变量加入path，否则会找不到

测试 ffmpeg -v

然后前端使用

npm install flv.js --save
需要安装flv

import flvjs from 'flv.js';

<video
          muted="muted"
          controls
          width="600"
          height="600"
          style="width:100%; height:100%"
          ref="video"></video>
 
url: 'rtsp://stream.strba.sk:1935/strba/VYHLAD_JAZERO.stream',

createVideo() {
      if (flvjs.isSupported()) {
        const videoElement = this.$refs.video;
        this.flvPlayer = flvjs.createPlayer(
          {
            type: "flv",
            // isLive: false,
            // hasAudio: false,
            url: "ws://localhost:8888/" + this.url,
          },
          {
            cors: true, // 是否跨域
            // enableWorker: true, // 是否多线程工作
            enableStashBuffer: false, // 是否启用缓存
            // stashInitialSize: 128, // 缓存大小(kb)  默认384kb
            autoCleanupSourceBuffer: true, // 是否自动清理缓存
            fixAudioTimestampGap: false, //false才会音视频同步
          }
        );
        this.flvPlayer.attachMediaElement(videoElement);
        this.flvPlayer.load();
        this.flvPlayer.play();
        // 报错重连
        this.flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
          console.log("errorType:", errType);
          console.log("errorDetail:", errDetail);
          this.play();
        });
      }
    },
    // 销毁video
    destoryVideo() {
      if (this.flvPlayer) {
        this.flvPlayer.pause();
        this.flvPlayer.unload();
        this.flvPlayer.detachMediaElement();
        this.flvPlayer.destroy();
        this.flvPlayer = null;
      }
    },
    // 重播/播放
    play() {
      this.destoryVideo();
      this.createVideo();
    },

加载片刻后即可播放

目前也还在实践linux部署。

标签：网页,ffmpeg,stream,flvPlayer,rtsp,console,const,播放
From： https://www.cnblogs.com/shuangzikun/p/17969786/fengtao_rtsp

相关文章

赞助商

阅读排行