HLSHLS（Http Live Streaming) 是一個由蘋果公司提出的基于HTTP的流媒體網(wǎng)絡(luò)傳輸協(xié)議，直接把流媒體切片成一段段，信息" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

18143453325 或 在線咨詢 在線咨詢
18143453325 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > 三種視頻流瀏覽器播放解決方案

三種視頻流瀏覽器播放解決方案

時間：2023-04-18 18:10:02 | 來源：網(wǎng)站運營

時間：2023-04-18 18:10:02 來源：網(wǎng)站運營

三種視頻流瀏覽器播放解決方案：

視頻流介紹

視頻流大致分為三種：HLS,RTSP,RTMP，下面依次介紹下三種視頻流

HLS

HLS（Http Live Streaming) 是一個由蘋果公司提出的基于HTTP的流媒體網(wǎng)絡(luò)傳輸協(xié)議，直接把流媒體切片成一段段，信息保存到m3u列表文件中， 可以將不同速率的版本切成相應(yīng)的片；播放器可以直接使用http協(xié)議請求流數(shù)據(jù)。
優(yōu)勢：

劣勢:

RTMP

RTMP（Real Time Message Protocol）由 Adobe 公司提出流媒體協(xié)議，并且是私有協(xié)議，未完全公開，用來解決多媒體數(shù)據(jù)傳輸流的多路復(fù)用（Multiplexing）和分包（packetizing）的問題，RTMP協(xié)議一般傳輸?shù)氖?flv，f4v 格式流。一般在 TCP 1個通道上傳輸命令和數(shù)據(jù)。
優(yōu)勢：

劣勢：

RTSP

RTSP（Real-Time Stream Protocol）由Real Networks 和Netscape共同提出的流媒體協(xié)議，RTSP協(xié)議是共有協(xié)議，并有專門機(jī)構(gòu)做維護(hù)。是TCP/IP協(xié)議體系中的一個應(yīng)用層協(xié)議. RTSP協(xié)議一般傳輸?shù)氖?ts、mp4 格式的流，RTSP傳輸一般需要 2-3 個通道，命令和數(shù)據(jù)通道分離?；谖谋镜亩嗝襟w播放控制協(xié)議. RTSP定義流格式，流數(shù)據(jù)經(jīng)由RTP傳輸；
優(yōu)勢:

  1. RTSP實時效果非常好，適合視頻聊天，視頻監(jiān)控等方向。
劣勢：

  1. 瀏覽器不能直接播放，只能通過插件或者轉(zhuǎn)碼

播放解決方案

HLS與RTMP的播放解決方案

一、使用原生video
如果僅需要在移動設(shè)備的WebView上播放，我們可以選擇使用html中嵌入hls播放。如下html能夠在所有Safari或者安卓3.0以上的WebView上播放。這樣就不需要使用第三方的播放器。

<html lang="en"> <head> <meta charset=utf-8/> </head> <body> <div id='player'> <video width="640" height="320" controls> <source src="http://10.10.5.119/live/livestream.m3u8" type="application/x-mpegURL"> </video> </div> </body></html>缺點：

  1. 原生H5支持的媒體格式主要有MP4、OGG、WebM、M3U8
  2. M3U8格式播放在pc端瀏覽器上支持兼容性差
  3. 無法播放rtmp流的視頻，因為原生不支持flv
優(yōu)點：

  1. 使用原生video，不用安裝第三方插件

二、使用flv.js

flv.js是來自Bilibli的開源項目。它解析FLV文件喂給原生HTML5 Video標(biāo)簽播放音視頻數(shù)據(jù)，使瀏覽器在不借助Flash的情況下播放FLV成為可能.

import React, { PureComponent } from 'react';import Reflv from 'reflv';export class HttpFlv extends PureComponent { render() { return ( <Reflv url={`http://localhost:7001/live/test.flv`} type="flv" isLive cors /> ) }}缺點：

  1. 錄播，依賴 原生HTML5 Video標(biāo)簽 和 Media Source Extensions API
  2. 直播，依賴錄播所需要的播放技術(shù)，同時依賴 HTTP FLV 或者 WebSocket 中的一種協(xié)議來傳輸FLV。其中HTTP FLV需通過流式IO去拉取數(shù)據(jù)，支持流式IO的有fetch或者stream
  3. 由于依賴Media Source Extensions，目前所有iOS和Android4.4.4以下里的瀏覽器都不支持，也就是說目前對于移動端flv.js基本是不能用的。
優(yōu)點：

  1. 由于瀏覽器對原生Video標(biāo)簽采用了硬件加速，性能很好，支持高清
  2. 同時支持錄播和直播
  3. 去掉對Flash的依賴

三、video.js

video.js可以支持網(wǎng)頁在所有的瀏覽器播放，免費的使用很多高級功能。這兩種視頻流的播放可以使用video.js，由于前端使用react開發(fā)，因此需要安裝_video.js。_在進(jìn)行兩種不同流播放時需要注意的是設(shè)置不同的type,播放rtmp時type是 rtmp/flv，播放hls時type是 application/x-mpegURL。兩種視頻流都是基于flash的，因此需要flash的支持。

class VideoPlayer extend Component { constructor(props) { super(props); this.VideoOptions = { autoplay: true, controls: false, sources: [{ src: url, type: "application/x-mpegURL" }], fluid: 'true', playbackRates: [0.75, 1, 1.5, 2] } } componentDidMount() { this.player = videojs(this.videoNode, this.VideoOptions, function onPlayerReady() { }) } componentWillUnmount() { if (this.player) { this.player.dispose() } } render(){ return ( <video ref={node => this.videoNode = node} className='video-js vjs-16-9' /> ) }}缺點：

  1. 依賴flash
  2. 不支持rtsp流的播放
優(yōu)點：

  1. 它是開源免費的，你可以在github很容易的獲取它的最新代碼。
  2. 使用它非常的容易，只要花幾秒鐘就可以架起一個視頻播放頁面。
  3. 它幾乎兼容所有的瀏覽器，并且優(yōu)先使用html5，在不支持的瀏覽器中，會自動使用flash進(jìn)行播放。
  4. 界面可以定制，純javascript和css打造。說明文檔也非常的詳細(xì)

RTSP流播放解決方案

一、利用VLC插件轉(zhuǎn)流
瀏覽器安裝VLC插件進(jìn)行服務(wù)器映射轉(zhuǎn)碼，得到video標(biāo)簽?zāi)軌蛘４蜷_的ogg格式視頻然后播放

<object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410"> <param name='mrl' value='rtsp://admin:12345@192.168.10.235:554/h264/ch1/main/av_stream' /> <param name='volume' value='50' /> <param name='autoplay' value='true' /> <param name='loop' value='false' /> <param name='fullscreen' value='false' /> <param name='controls' value='false' /></object>優(yōu)缺點

二、html5_rtsp_player+ websocket_rtsp_proxy 實現(xiàn)視頻流直播

實現(xiàn)步驟

  1. 服務(wù)器安裝streamedian服務(wù)器
  2. 客戶端通過video標(biāo)簽播放
<video id="test_video" controls autoplay></video><script src="free.player.1.8.4.js"></script><script> if (window.Streamedian) { var errHandler = function(err){ console.log('err', err.message); }; var infHandler = function(inf) { console.log('info', inf) }; var playerOptions = { socket: "ws://localhost:8088/ws/", redirectNativeMediaErrors : true, bufferDuration: 30, errorHandler: errHandler, infoHandler: infHandler }; var html5Player = document.getElementById("test_video"); html5Player.src = "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov"; var player = Streamedian.player('test_video', playerOptions); window.onbeforeunload = function(){ player && player.destroy(); player = null; Request = null; } }</script>注意：測試時先從官網(wǎng)申請license key，否則socket 只能識別localhost和127.0.0.1
優(yōu)缺點

三：ffmpeg + nginx + video，rtsp轉(zhuǎn)rtmp播放

rtmp是adobe開發(fā)的協(xié)議，一般使用adobe media server 可以方便的搭建起來；隨著開源時代的到來，有大神開發(fā)了nginx的rtmp插件，也可以直接使用nginx實現(xiàn)rtmp
rtmp方式的最大的優(yōu)點在于低延時，經(jīng)過測試延時普遍在1-3秒，可以說很實時了；缺點在于它是adobe開發(fā)的，rtmp的播放嚴(yán)重依賴flash，而由于flash本身的安全，現(xiàn)代瀏覽器大多禁用flash
實現(xiàn)步驟

  1. 安裝ffmpeg工具
  2. 安裝nginx 注意：linux系統(tǒng)需要安裝 nginx-rtmp-module 模塊，Windows系統(tǒng)安裝包含rtmp的(如nginx 1.7.11.3 Gryphon)
  3. 更改nginx配置
rtmp{ server{ listen 1935; application live{ live on; record off; } application hls{ live on; hls on; hls_path nginx-rtmp-module/hls; hls_cleanup off; } }}4.ffmpeg轉(zhuǎn)碼

ffmpeg -i "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov" -f flv -r 25 -s 1080*720 -an "rtmp://127.0.0.1:1935/hls/mystream"5.video 播放

<html><head><title>video</title><!-- 引入css --><link rel="stylesheet" type="text/css" href="./videojs/video-js.min.css" /></head><body><video id="test_video" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay> <source src='rtmp://127.0.0.1:1935/hls/mystream' type='rtmp/flv'/></video></body></html><!-- 引入js --><script type="text/javascript" src="./videojs/video.min.js"></script><script type="text/javascript" src="./videojs/videojs-flash.js"></script><script>videojs.options.flash.swf = "./videojs/video-js.swf" var player = videojs('test_video', {"autoplay":true}); player.play();</script>注意：使用谷歌瀏覽器播放時，需要開啟flash允許

四：ffmpeg + video，rtsp轉(zhuǎn)hls播放

HLS (HTTP Live Streaming) 直播 是有蘋果提出的一個基于http的協(xié)議。其原理是把整個流切分成一個個的小視頻文件，然后通過一個m3u8的文件列表來管理這些視頻文件

HTTP Live Streaming 并不是一個真正實時的流媒體系統(tǒng)，這是因為對應(yīng)于媒體分段的大小和持續(xù)時間有一定潛在的時間延時。在客戶端，至少在一個分段媒體文件被完全下載后才能夠開始播放，而通常要求下載完兩個媒體文件之后才開始播放以保證不同分段音視頻之間的無縫連接。

此外，在客戶端開始下載之前，必須等待服務(wù)器端的編碼器和流分割器至少生成一個TS文件，這也會帶來潛在的時延。

服務(wù)器軟件將接收到的流每緩存一定時間后包裝為一個新的TS文件，然后更新m3u8文件。m3u8文件中只保留最新的幾個片段的索引，以保證觀眾任何時候連接進(jìn)來都會看到較新的內(nèi)容，實現(xiàn)近似直播的效果。

這種方式的理論最小延時為一個ts文件的時長，一般為2-3個ts文件的時長。

實現(xiàn)步驟

  1. 安裝ffmpeg工具
  2. ffmpeg轉(zhuǎn)碼
ffmpeg -i "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov" -c copy -f hls -hls_time 2.0 -hls_list_size 0 -hls_wrap 15 "D:/Program Files/html/hls/test.m3u8"ffmpeg 關(guān)于hls方面的指令說明

  1. video 播放
<html><head><title>video</title><!-- 引入css --><link rel="stylesheet" type="text/css" href="./videojs/video-js.min.css" /></head><body><div class="videoBox"> <video id="my_video_1" class="video-js vjs-default-skin" controls> <source src="http://localhost:8088/hls/test.m3u8" type="application/x-mpegURL"> </video></div></body></html><script type="text/javascript" src="./videojs/video.min.js"></script><script type="text/javascript" src="./videojs/videojs-contrib-hls.min.js"></script><script>videojs.options.flash.swf = "./videojs/video-js.swf" var player = videojs('my_video_1', {"autoplay":true}); player.play();</script>五、jsmpeg + ffmpeg

JSMpeg是一個用JavaScript編寫的視頻播放器。它由MPEG-TS分路器，MPEG1視頻和MP2音頻解碼器，WebGL和Canvas2D渲染器以及WebAudio聲音輸出組成。JSMpeg可以通過Ajax加載靜態(tài)視頻，并允許通過WebSockets發(fā)送MPEG，前端通過js解析MPEG不斷繪制canvas，包括音頻。JSMpeg可以在iPhone 5S上以30fps解碼720p視頻，適用于任何現(xiàn)代瀏覽器（Chrome，F(xiàn)irefox，Safari，Edge）。
簡單示例：

<script src="jsmpeg.min.js"></script><div class="jsmpeg" data-url="video.ts"></div>
六、WebRTC

WebRTC 是支持網(wǎng)頁瀏覽器進(jìn)行實時音視頻的一套API，例如：HTML5 通過 webRTC 直接調(diào)用攝像頭，但是如果要實現(xiàn)遠(yuǎn)程視頻流的顯示，則需要將 RTSP 轉(zhuǎn)換為 WebRTC 流，供 web 端顯示。



關(guān)鍵詞：解決,方案,瀏覽,視頻

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉