日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

在web頁面播放rtsp流視頻（webrtc）

作者：祁_z 更新時間： 2022-07-11 編程語言

所需環境

node.js + FFmpeg

此方式客戶端只需要通過video標簽就可播放

ffmpeg下載鏈接：https://pan.baidu.com/s/1ntOVSpxmtHO861V-dT5Kyg?pwd=nx7y?
提取碼：nx7y?

FFmpeg環境安裝

1. 安裝FFmpeg的依賴yasm

?yum方式安裝yasm，也可以通過Download - The Yasm Modular Assembler Project下載安裝

yum install yasm -y

# 編譯
./configure

# 安裝
make && make install

2. 安裝FFmpeg

?wget獲取ffmpeg，有可能下載不下來，建議用我提供的ffmpeg-4.1.8.tar.bz2手動上傳到服務器

wget https://ffmpeg.org/releases/ffmpeg-4.1.8.tar.bz2

# 解壓
tar -xjvf ffmpeg-4.1.8.tar.bz2

# 進入解壓目錄
cd ffmpeg-4.1.8

# 編譯
./configure

# 安裝
make && make install

3. 驗證是否安裝成功

輸入ffmpeg命令，查看控制臺是否有輸出，有則代表安裝ffmpeg成功。

NodeJS環境安裝

1. NodeJS的安裝步驟忽略。。

2. 安裝rtsp2web插件

# 創建一個目錄，目錄名稱不能是rtsp2web，進入目錄執行以下命令安裝rtsp2web插件
npm init --yes
npm i rtsp2web

3. 創建?index.js，并運行，運行命令node index.js

// index.js

const RTSP2web = require('rtsp2web')

// 服務端長連接占據的端口號；端口號可以自定義
const port = 9999
new RTSP2web({
    port
})

至此視頻轉碼服務安裝完成。

在此提供公開的rtsp流可用于測試：

rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4

驗證html播放實時視頻

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,viewport-fit=cover">
  <script src="https://jsmpeg.com/jsmpeg.min.js" charset="utf-8"></script>
  <title>播放rtsp</title>
</head>
<body>
<canvas id="canvas" style="width: 600px; height: 600px;"></canvas>
</body>
<script>
        // 改成你的rtsp流
    var rtsp = 'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4'
  window.onload = () => {
    // location為node服務所在的服務地址，端口為rtsp2web設置的端口
    new JSMpeg.Player("ws://localhost:9999/rtsp?url="+btoa(rtsp), {
       canvas: document.getElementById("canvas")
    })
  }
</script>
</html>

將該html copy到桌面打開看看效果。

原文鏈接：https://blog.csdn.net/qq_36881887/article/details/125423111

欄目分類
最近更新