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

news2024/9/28 5:26:02

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

流协议介绍

主流的流协议（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 端显示。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

LeetCode-重复的子字符串（459）

LeetCode-重复的子字符串（459）

题目描述&#xff1a; 给定一个非空的字符串 s &#xff0c;检查是否可以通过由它的一个子串重复多次构成。 思路一&#xff1a; 使用枚举的方法。首先因为字符串s有一个子串重复多次构成&#xff0c;那么s的长度len与子串的长度subLen应该成倍数关系&#xff0c;并且在s中索…
阅读更多...
C语言 B树的分析与实现

C语言 B树的分析与实现

本文主要说明了B树的概念、应用以及如何用C语言实现B树。 概述 有使用过数据库的朋友都知道&#xff0c;数据库需要存储大量的数据&#xff0c;并且查询数据的性能也需要一定的保证。那么数据库的底层数据结构是如何实现的呢&#xff0c;就是我们要讨论的B树和B树&#xff0c…
阅读更多...
ConcurrentHashMap的原理分析学习

ConcurrentHashMap的原理分析学习

ConcurrentHashMap 的初步使用及场景 CHM 的使用 ConcurrentHashMap 是 J.U.C 包里面提供的一个线程安全并且高效的 HashMap&#xff0c;所以ConcurrentHashMap 在并发编程的场景中使用的频率比较高&#xff0c;那么这一节课我们就从ConcurrentHashMap 的使用上以及源码层面来…
阅读更多...
乐理燥废笔记

乐理燥废笔记

乐理燥废笔记 文章目录 终止式小调音阶转调不协和和弦进行大小转调1251 1451转调我的霹雳猫阿诺三全音代理五声音阶又怎样和弦附录&#xff1a;压缩字符串、大小端格式转换压缩字符串浮点数压缩Packed-ASCII字符串 大小端转换什么是大端和小端数据传输中的大小端总结大小端转换…
阅读更多...
设置代理IP地址对网络有什么影响？爬虫代理IP主要有哪些作用？

设置代理IP地址对网络有什么影响？爬虫代理IP主要有哪些作用？

在互联网的广泛应用下&#xff0c;代理IP地址成为了一种常见的网络技术。代理IP地址可以改变用户的上网行为&#xff0c;进而影响网络访问的速度和安全性。本篇文章将探讨设置代理IP地址对网络的影响&#xff0c;以及爬虫代理IP的主要作用。 首先&#xff0c;让我们来了解一下代…
阅读更多...
基于java,springboot的论旅游管理系统设计与实现

基于java,springboot的论旅游管理系统设计与实现

环境以及简介 基于java,springboot的论旅游管理系统设计与实现&#xff0c;Java项目&#xff0c;SpringBoot项目&#xff0c;含开发文档&#xff0c;源码&#xff0c;数据库以及ppt 源码下载 环境配置&#xff1a; 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服…
阅读更多...
树莓派4B使用ncnn部署yolov5-Lite，推理耗时 247ms 包含前后处理

树莓派4B使用ncnn部署yolov5-Lite，推理耗时 247ms 包含前后处理

一. 引言 最近在玩树莓派&#xff0c;想在树莓派上不是一个目标检测算法&#xff0c;大致看了一下&#xff0c;目前开源的大家都在使用yolov5-Lite&#xff0c;使用ncnn去推理加速&#xff0c;于是自己也尝试部署&#xff0c;在此记录一下&#xff0c;个人踩的坑。 二. 版本选…
阅读更多...
【算法笔记】状态机dp

【算法笔记】状态机dp

状态机dp概述 当一个事件涉及的过程的考虑并且方案数的考虑比较繁琐时&#xff0c;我们可以尝试用状态机的思想去考虑这个问题&#xff0c;将这个问题简化&#xff0c;就是去考虑一个对象他所具有的几种状态。 状态机主要考虑一下两个方面&#xff1a;状态和转移 状态其实也…
阅读更多...
如何在Ubuntu安装SVN服务并结合cpolar实现公网TCP地址远程访问本地服务

如何在Ubuntu安装SVN服务并结合cpolar实现公网TCP地址远程访问本地服务

文章目录 前言1. Ubuntu安装SVN服务2. 修改配置文件2.1 修改svnserve.conf文件2.2 修改passwd文件2.3 修改authz文件 3. 启动svn服务4. 内网穿透4.1 安装cpolar内网穿透4.2 创建隧道映射本地端口 5. 测试公网访问6. 配置固定公网TCP端口地址6.1 保留一个固定的公网TCP端口地址6…
阅读更多...
Mysql与Redis如何保证数据一致性问题

Mysql与Redis如何保证数据一致性问题

目录 一、Mysql与Redis同步数据是否存在延迟呢&#xff1f; 二、如何保证一致性&#xff1f; 2.1、第一种方式&#xff1a;手动编码 2.2、第二种方式&#xff1a;MQ异步更新 2.3、第三种方式&#xff1a;binlog同步数据 2.4、第四种方式&#xff1a;双写一致性 2.5、第五…
阅读更多...
mysql之视图mysql连接案例索引

mysql之视图mysql连接案例索引

文章目录 一、视图1.1 含义1.2 操作1.2.1 创建视图1.2.2 视图的修改1.2.3 删除视图1.2.4 查看视图 二、连接案例01)查询" 01 "课程比" 02 "课程成绩高的学生的信息及课程分数02)查询同时存在" 01 "课程和" 02 "课程的情况03&#xff0…
阅读更多...
SpringMVC-@RequestMapping注解

SpringMVC-@RequestMapping注解

0. 多个方法对应同一个请求 RequestMapping("/")public String toIndex(){return "index";}RequestMapping("/")public String toIndex2(){return "index";}这种情况是不允许的&#xff0c;会报错。 1. 注解的功能 RequestMapping注…
阅读更多...
Java面试之集合篇

Java面试之集合篇

前言 本篇主要总结JAVA面试中关于集合相关的高频面试题。本篇的面试题基于网络整理以及自己的总结编辑。在不断的完善补充哦。欢迎小伙伴们在评论区发表留言哦&#xff01; 1、基础 1.1、Java 集合框架有哪些&#xff1f; Java 集合框架&#xff0c;大家可以看看 《Java 集…
阅读更多...
Latex + Overleaf 论文写作新手笔记

Latex + Overleaf 论文写作新手笔记

.tex 文件main.tex 文件 Latex 的文档层次结构不同文档类型的层次结构report 6 层结构实例article 5 层结构实例 Latex 语法图表插入与引用使用 figure 环境来插入图片使用 ref 命令来引用已有的图表格的插入与引用 代码块列表无序列表 itemize有序列表 enumerate 学位论文项目…
阅读更多...
利用Type类来获得字段名称（Unity C#中的反射）

利用Type类来获得字段名称（Unity C#中的反射）

使用Type类以前需要引用反射的命名空间&#xff1a; using System.Reflection; 以下是完整代码&#xff1a; public class ReflectionDemo : MonoBehaviour {void Start(){A a new A();B b new B();A[] abArraynew A[] { a, b };foreach(A v in abArray){Type t v.GetTyp…
阅读更多...
【CSS】文字描边的三种实现方式

【CSS】文字描边的三种实现方式

目录 1. 可行的几种方式1.1. text-shadow 描边代码优缺点 1.2. text-stroke 描边实现优缺点 1.3. svg 描边实现优缺点 总结 1. 可行的几种方式 text-shadow–webkit-text-strokesvg 1.1. text-shadow 描边 MDN text-shadow 代码 <div class"text stroke">…
阅读更多...
OpenMMlab导出CenterNet模型并用onnxruntime和tensorrt推理

OpenMMlab导出CenterNet模型并用onnxruntime和tensorrt推理

导出onnx文件 直接使用脚本 import torch import torch.nn.functional as F from mmdet.apis import init_detectorconfig_file ./configs/centernet/centernet_r18_8xb16-crop512-140e_coco.py checkpoint_file ../checkpoints/centernet_resnet18_140e_coco_20210705_093…
阅读更多...
【大数据进阶第三阶段之Datax学习笔记】阿里云开源离线同步工具Datax快速入门

【大数据进阶第三阶段之Datax学习笔记】阿里云开源离线同步工具Datax快速入门

【大数据进阶第三阶段之Datax学习笔记】阿里云开源离线同步工具Datax概述 【大数据进阶第三阶段之Datax学习笔记】阿里云开源离线同步工具Datax快速入门 【大数据进阶第三阶段之Datax学习笔记】阿里云开源离线同步工具Datax类图 【大数据进阶第三阶段之Datax学习笔记】使用…
阅读更多...
DNS安全与访问控制

DNS安全与访问控制

一、DNS安全 1、DNSSEC原理 DNSSEC依靠数字签名保证DNS应答报文的真实性和完整性。权威域名服务器用自己的私有密钥对资源记录&#xff08;Resource Record, RR&#xff09;进行签名&#xff0c;解析服务器用权威服务器的公开密钥对收到的应答信息进行验证。如果验证失败&…
阅读更多...
5年经验之谈 —— 探索自动化测试用例设计粒度！

5年经验之谈 —— 探索自动化测试用例设计粒度！

自动化测试用例的粒度指的是测试用例的细致程度&#xff0c;即每个测试用例检查的功能点的数量和范围。 通常&#xff0c;根据测试用例的粒度&#xff0c;可以被分为3种不同的层次&#xff0c;从更低层次的细粒度到更高层次的粗粒度。 第一种&#xff1a;单元测试 - 细粒度 单…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023