三种主流流协议的浏览器播放解决方案

三种主流流协议的浏览器播放解决方案

流协议介绍

主流的流协议（streaming protocol）包括HLS、RTMP、RTSP，下面依次介绍下三种视频流。

HLS

HLS（Http Live Streaming) 是一个由苹果公司提出的基于HTTP的流媒体网络传输协议，直接把流媒体切片成一段段，信息保存到m3u列表文件中， 可以将不同速率的版本切成相应的片；播放器可以直接使用http协议请求流数据。

优势：

  • 可以在不同速率的版本间自由切换，实现无缝播放
  • 省去使用其他协议的烦恼

劣势:

  • 延迟大小受切片大小影响，不适合直播，适合视频点播。
  • 实时性差，延迟高。HLS 的延迟基本在 10s+ 以上
  • 文件碎片。特性的双刃剑，ts 切片较小，会造成海量小文件，对存储和缓存都有一定的挑战

RTMP

RTMP（Real Time Message Protocol）由 Adobe 公司提出流媒体协议，并且是私有协议，未完全公开，用来解决多媒体数据传输流的多路复用（Multiplexing）和分包（packetizing）的问题，RTMP协议一般传输的是 flv，f4v 格式流。一般在 TCP 1个通道上传输命令和数据。

优势：

  • 在于低延迟，稳定性高，支持所有摄像头格式
  • 专为流媒体开发的协议，对底层的优化比其它协议更加优秀

劣势：

  • 浏览器需要加载 flash插件才能播放。
  • RTMP 为 Adobe 私有协议，很多设备无法播放，特别是在 iOS 端，需要使用第三方解码器才能播放
  • 基于 TCP 传输，非公共端口，可能会被防火墙阻拦

RTSP

RTSP（Real-Time Stream Protocol）由Real Networks 和Netscape共同提出的流媒体协议，RTSP协议是共有协议，并有专门机构做维护。是TCP/IP协议体系中的一个应用层协议. RTSP协议一般传输的是 ts、mp4 格式的流，RTSP传输一般需要 2-3 个通道，命令和数据通道分离。基于文本的多媒体播放控制协议. RTSP定义流格式，流数据经由RTP传输；

优势:

  1. RTSP实时效果非常好，适合视频聊天，视频监控等方向。

劣势：

  1. 浏览器不能直接播放，只能通过插件或者转码

播放解决方案

HLS与RTMP的播放解决方案

一、使用原生video

如果仅需要在移动设备的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

优点：

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

二、使用flv.js

flv.js是来自Bilibli的开源项目。它解析FLV文件喂给原生HTML5 Video标签播放音视频数据，使浏览器在不借助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标签 和 Media Source Extensions API
  2. 直播，依赖录播所需要的播放技术，同时依赖 HTTP FLV 或者 WebSocket 中的一种协议来传输FLV。其中HTTP FLV需通过流式IO去拉取数据，支持流式IO的有fetch或者stream
  3. 由于依赖Media Source Extensions，目前所有iOS和Android4.4.4以下里的浏览器都不支持，也就是说目前对于移动端flv.js基本是不能用的。

优点：

  1. 由于浏览器对原生Video标签采用了硬件加速，性能很好，支持高清
  2. 同时支持录播和直播
  3. 去掉对Flash的依赖

三、video.js

video.js可以支持网页在所有的浏览器播放，免费的使用很多高级功能。这两种视频流的播放可以使用video.js，由于前端使用react开发，因此需要安装_video.js。_在进行两种不同流播放时需要注意的是设置不同的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流的播放

优点：

  1. 它是开源免费的，你可以在github很容易的获取它的最新代码。
  2. 使用它非常的容易，只要花几秒钟就可以架起一个视频播放页面。
  3. 它几乎兼容所有的浏览器，并且优先使用html5，在不支持的浏览器中，会自动使用flash进行播放。
  4. 界面可以定制，纯javascript和css打造。说明文档也非常的详细

RTSP流播放解决方案

一、利用VLC插件转流

浏览器安装VLC插件进行服务器映射转码，得到video标签能够正常打开的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>

优缺点

  • 优点： 可以直接播放RTSP，无需任何中介服务器的帮助
  • 缺点： 需要手动安装插件； 基于NPAPI，不被最新的 Chrome 和 Firefox 支持
  • 如果你项目的其他功能都能兼容客户电脑上的 IE 浏览器，这个方案就是首选。

二、html5_rtsp_player+ websocket_rtsp_proxy 实现视频流直播

实现步骤

  1. 服务器安装streamedian服务器

  2. 客户端通过video标签播放

<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>

注意：测试时先从官网申请license key，否则socket 只能识别localhost和127.0.0.1

优缺点

  • 优点：实现比较简单
  • 缺点：收费的，免费版有很多限制

三：ffmpeg + nginx + video，rtsp转rtmp播放

网络摄像头采集端一般提供的是RTSP协议

rtmp是adobe开发的协议，一般使用adobe media server 可以方便的搭建起来；随着开源时代的到来，有大神开发了nginx的rtmp插件，也可以直接使用nginx实现rtmp

rtmp方式的最大的优点在于低延时，经过测试延时普遍在1-3秒，可以说很实时了；缺点在于它是adobe开发的，rtmp的播放严重依赖flash，而由于flash本身的安全，现代浏览器大多禁用flash

实现步骤

  1. 安装ffmpeg工具

  2. 安装nginx 注意：linux系统需要安装 nginx-rtmp-module 模块，Windows系统安装包含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转码

    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>
<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>
<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转hls播放

HLS (HTTP Live Streaming) 直播 是有苹果提出的一个基于http的协议。其原理是把整个流切分成一个个的小视频文件，然后通过一个m3u8的文件列表来管理这些视频文件

HTTP Live Streaming 并不是一个真正实时的流媒体系统，这是因为对应于媒体分段的大小和持续时间有一定潜在的时间延时。在客户端，至少在一个分段媒体文件被完全下载后才能够开始播放，而通常要求下载完两个媒体文件之后才开始播放以保证不同分段音视频之间的无缝连接。

此外，在客户端开始下载之前，必须等待服务器端的编码器和流分割器至少生成一个TS文件，这也会带来潜在的时延。

服务器软件将接收到的流每缓存一定时间后包装为一个新的TS文件，然后更新m3u8文件。m3u8文件中只保留最新的几个片段的索引，以保证观众任何时候连接进来都会看到较新的内容，实现近似直播的效果。

这种方式的理论最小延时为一个ts文件的时长，一般为2-3个ts文件的时长。

实现步骤

  1. 安装ffmpeg工具

  2. ffmpeg转码

    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"

    • -hls_time n: 设置每片的长度，默认值为2。单位为秒

    • -hls_list_size n:设置播放列表保存的最多条目，设置为0会保存有所片信息，默认值为5

    • -hls_wrap n:设置多少片之后开始覆盖，如果设置为0则不会覆盖，默认值为0.这个选项能够避免在磁盘上存储过多的片，而且能够限制写入磁盘的最多的片的数量

    • -hls_start_number n:设置播放列表中sequence number的值为number，默认值为0

  3. 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加载静态视频，并允许通过WebSockets发送MPEG，前端通过js解析MPEG不断绘制canvas，包括音频。JSMpeg可以在iPhone 5S上以30fps解码720p视频，适用于任何现代浏览器（Chrome，Firefox，Safari，Edge）。

简单示例：

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

六、WebRTC

WebRTC 是支持网页浏览器进行实时音视频的一套API，例如：HTML5 通过 webRTC 直接调用摄像头，但是如果要实现远程视频流的显示，则需要将 RTSP 转换为 WebRTC 流，供 web 端显示。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/299630.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

微信小程序 引导地址授权 获取位置信息 uniapp

微信小程序 引导地址授权 获取位置信息 uniapp

概述 获取位置信息&#xff0c;需要保证是否授权位置信息&#xff0c;有几个条件是导致无法授权的原因 &#xff08;1&#xff09;微信应用未授权定位设置 &#xff08;2&#xff09;首次进入小程序未授权位置信息 &#xff08;3&#xff09;小程序之前阻止过授权位置信息 &…
阅读更多...
SpringBoot整合JUNIT5单元测试＋Mockito

SpringBoot整合JUNIT5单元测试＋Mockito

目录 第一章、快速了解JUnit单元测试1.1&#xff09;单元测试是什么1.2&#xff09;为什么使用JUnit单元测试 第二章、快速使用JUnit5框架2.1&#xff09;在pom文件中导入依赖2.2&#xff09;新建测试类2.3&#xff09;新建一个简单的测试方法 第三章、测试框架提供的注解和方法…
阅读更多...
【设计模式】备忘录模式

【设计模式】备忘录模式

一起学习设计模式 目录 前言 一、概述 二、结构 三、案例实现 1、 “白箱”备忘录模式 2、“黑箱”备忘录模式 四、优缺点 五、使用场景 总结 前言 【设计模式】备忘录模式——行为型模式。 一、概述 备忘录模式提供了一种状态恢复的实现机制&#xff0c;使得用户可以…
阅读更多...
Android studio BottomNavigationView 应用设计

Android studio BottomNavigationView 应用设计

一、新建Bottom Navigation Activity项目： 二、修改bottom_nav_menu.xml: <itemandroid:id="@+id/navigation_beijing"android:icon="@drawable/ic_beijing_24dp"android:title="@string/title_beijing" /><itemandroid:id="@+i…
阅读更多...
小游戏实战丨基于PyGame的消消乐小游戏

小游戏实战丨基于PyGame的消消乐小游戏

文章目录 写在前面PyGame消消乐注意事项系列文章写在后面 写在前面 本期内容&#xff1a;基于pygame实现喜羊羊与灰太狼版消消乐小游戏 下载地址&#xff1a;https://download.csdn.net/download/m0_68111267/88700193 实验环境 python3.11及以上pycharmpygame 安装pygame…
阅读更多...
jenkins忘记admin密码

jenkins忘记admin密码

jenkins忘记admin密码&#xff0c;重置密码&#xff1a; 1.找打jenkins目录下面的config.xml [rootVM-0-15-centos .jenkins]# find ./* -name config.xml ./config.xml [rootVM-0-15-centos .jenkins]# pwd /root/.jenkins删除下面的这部分内容&#xff1a; [rootVM-0-15-c…
阅读更多...
Android开发编程从入门到精通，安卓技术从初级到高级全套教学

Android开发编程从入门到精通，安卓技术从初级到高级全套教学

一、教程描述 本套教程基于JDK1.8版本&#xff0c;教学内容主要有&#xff0c;1、环境搭建&#xff0c;UI布局&#xff0c;基础UI组件&#xff0c;高级UI组件&#xff0c;通知&#xff0c;自定义组件&#xff0c;样式主题&#xff1b;2、四大组件&#xff0c;Intent&#xff0…
阅读更多...
【UML】第15篇 状态机图

【UML】第15篇 状态机图

目录 一、状态机图的定义 二、应用场景 三、绘图符号的说明 四、语法 五、例图 一、状态机图的定义 状态机图&#xff08;State Machine Diagram&#xff09;是UML中的一种行为图&#xff0c;它描述了一个对象在其生命周期内的状态变化。状态机图通过展示对象在不同状态下…
阅读更多...
技术学习|CDA level I 描述性统计分析（数据的描述性统计分析）

技术学习|CDA level I 描述性统计分析（数据的描述性统计分析）

技术学习|CDA level I 描述性统计分析&#xff08;数据的描述性统计分析&#xff09; 数据的描述性统计分析常从数据的集中趋势、离散程度和分布形态3个方面进行。 一、集中趋势 集中趋势是指数据向其中心值靠拢的趋势。测量数据的集中趋势&#xff0c;主要是寻找其中心值。…
阅读更多...
跨站脚本攻击漏洞XSS绕过22种方式总结

跨站脚本攻击漏洞XSS绕过22种方式总结

XSS漏洞简介 跨站脚本攻击在目前这个时间节点还是属于一个排位比较高的漏洞&#xff0c;在OWASP TOP10 2021中隶属于注入型漏洞&#xff0c;高居TOP3的排位&#xff0c;可见这个漏洞的普遍性。跨站脚本攻击的学习中我们主要需要明白的是跨站的含义&#xff0c;以及XSS的核心。…
阅读更多...
Vue3-39-路由-导航异常的检测 afterEatch 与 编程式导航之后的订阅动作

Vue3-39-路由-导航异常的检测 afterEatch 与 编程式导航之后的订阅动作

说明 本文主要是介绍一下 路由的后置守卫 afterEatch 的一个重要的作用 &#xff1a; 就是检测路由异常信息。 它的实现方式是 通过第三个参数来返回的。 而且&#xff0c;它的异常检测是全局的。导航的异常有以下三种类型&#xff1a; aborted : 在导航守卫中 被拦截并返回了…
阅读更多...
1月最新阿里云服务器租用价格表_轻量61元_ECS99元一年

1月最新阿里云服务器租用价格表_轻量61元_ECS99元一年

2024年1月最新阿里云服务器租用价格表&#xff0c;云服务器ECS经济型e实例2核2G、3M固定带宽99元一年、轻量应用服务器2核2G3M带宽轻量服务器一年61元&#xff0c;2核4G4M带宽轻量服务器一年165元12个月、2核4G服务器30元3个月&#xff0c;云服务器ECS可以选择经济型e实例、通用…
阅读更多...
学习笔记——C++运算符之算术运算符

学习笔记——C++运算符之算术运算符

C中运算符包含诸多种类&#xff0c;其中有&#xff1a;算术运算符&#xff0c;赋值运算符&#xff0c;比较运算符和逻辑运算符 每一种运算符及其作用如下表所示&#xff1a; 一&#xff0c;算术运算符1&#xff0c;加减乘除 其中&#xff0c;“”&#xff0c;“-”运算符既可…
阅读更多...
QT上位机开发（数据库sqlite编程）

QT上位机开发（数据库sqlite编程）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 编写软件的时候&#xff0c;如果用户的数据比较少&#xff0c;那么用json保存是非常方便的。但是一旦数据量大了之后&#xff0c;建议还是用数据库…
阅读更多...
编程语言的未来：贴近人类、灵活高效与探索无限

编程语言的未来：贴近人类、灵活高效与探索无限

编程语言的未来&#xff1f; 在当今的科技潮流中&#xff0c;编程语言是至关重要的一环&#xff0c;更是赋能科技行业的基础工具。我深信&#xff0c;未来的编程语言可能将朝着更贴近人类、灵活高效和面向无限可能的方向发展。 人性化是我预期的第一个趋势。未来的编程语言将…
阅读更多...
如何解决找不到mfc100u.dll无法运行程序问题，分享四种靠谱的方法

如何解决找不到mfc100u.dll无法运行程序问题，分享四种靠谱的方法

在日常使用电脑的过程中&#xff0c;我们可能会遇到各种问题&#xff0c;其中之一就是找不到mfc100u.dll的困扰。这个问题主要是因为mfc100u.dll是Microsoft Foundation Class&#xff08;MFC&#xff09;库中的一个版本特定的DLL文件&#xff0c;它是Visual Studio 2010及更早…
阅读更多...
轻松识别几个小时的长音视频文件

轻松识别几个小时的长音视频文件

前言 之前的文章绍一个准确率非常高的语音识别框架&#xff0c;但那个只能识别实时的短音频&#xff0c;如果想要识别一个非常长的音频&#xff0c;几十分钟&#xff0c;甚至几个小时&#xff0c;那之前的那个是做不到的所以就有了本文。本文介绍搭建一个长语音识别服务&#…
阅读更多...
LeetCode刷题：面试题 02.01. 移除重复节点

LeetCode刷题：面试题 02.01. 移除重复节点

题目&#xff1a; 是否独立完成&#xff1a;算是&#xff0c;但是使用自己的办法时间复杂度会超标 解题思路&#xff1a; 1.双循环嵌套&#xff0c;定义快慢节点&#xff0c;双层嵌套循环&#xff0c;如果值一样则剔除&#xff0c;但是时间复杂度为O&#xff08;n&#xff09;…
阅读更多...
深度卷积生成对抗网络（DCGAN）|完整代码实现

深度卷积生成对抗网络（DCGAN）|完整代码实现

生成对抗网络&#xff08;GAN&#xff09;由Ian Goodfellow在2014年提出。GAN通过训练两个神经网络解决了非监督问题。这两个网络一个称为生成网络&#xff0c;一个称为判别网络。 事实上&#xff0c;该网络的训练过程很有趣。我们可以借助一个例子来理解。最初&#xff0c;伪…
阅读更多...
强化学习的数学原理学习笔记 - RL基础知识

强化学习的数学原理学习笔记 - RL基础知识

文章目录 Roadmap&#x1f7e1;基础概念贝尔曼方程&#xff08;Bellman Equation&#xff09;基本形式矩阵-向量形式迭代求解状态值 vs. 动作值 &#x1f7e1;贝尔曼最优方程&#xff08;Bellman Optimality Equation&#xff0c;BOE&#xff09;基本形式迭代求解 参考资料&…
阅读更多...
最新文章

Copyright @ 2022~2023