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

學(xué)無(wú)先后，達(dá)者為師

網(wǎng)站首頁(yè) 編程語(yǔ)言 正文

在web頁(yè)面播放rtsp流視頻（webrtc）

作者：祁_z 更新時(shí)間： 2022-07-11 編程語(yǔ)言

所需環(huán)境

node.js + FFmpeg

此方式客戶端只需要通過(guò)video標(biāo)簽就可播放

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

FFmpeg環(huán)境安裝

1. 安裝FFmpeg的依賴yasm

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

yum install yasm -y

# 編譯
./configure

# 安裝
make && make install

2. 安裝FFmpeg

?wget獲取ffmpeg，有可能下載不下來(lái)，建議用我提供的ffmpeg-4.1.8.tar.bz2手動(dòng)上傳到服務(wù)器

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

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

# 進(jìn)入解壓目錄
cd ffmpeg-4.1.8

# 編譯
./configure

# 安裝
make && make install

3. 驗(yàn)證是否安裝成功

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

NodeJS環(huán)境安裝

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

2. 安裝rtsp2web插件

# 創(chuàng)建一個(gè)目錄，目錄名稱不能是rtsp2web，進(jìn)入目錄執(zhí)行以下命令安裝rtsp2web插件
npm init --yes
npm i rtsp2web

3. 創(chuàng)建?index.js，并運(yùn)行，運(yùn)行命令node index.js

// index.js

const RTSP2web = require('rtsp2web')

// 服務(wù)端長(zhǎng)連接占據(jù)的端口號(hào)；端口號(hào)可以自定義
const port = 9999
new RTSP2web({
    port
})

至此視頻轉(zhuǎn)碼服務(wù)安裝完成。

在此提供公開(kāi)的rtsp流可用于測(cè)試：

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

驗(yàn)證html播放實(shí)時(shí)視頻

<!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服務(wù)所在的服務(wù)地址，端口為rtsp2web設(shè)置的端口
    new JSMpeg.Player("ws://localhost:9999/rtsp?url="+btoa(rtsp), {
       canvas: document.getElementById("canvas")
    })
  }
</script>
</html>

將該html copy到桌面打開(kāi)看看效果。

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

欄目分類
最近更新