浏览器播放RTSP流，支持H264、H265等格式，支持IE、Chrome等浏览器

最新推荐文章于 2024-08-28 17:01:53 发布
最新推荐文章于 2024-08-28 17:01:53 发布
阅读量2 收藏
点赞数
文章标签： chrome 前端
原文链接：https://mp.weixin.qq.com/s?__biz=MzAwNTMxMzg1MA==&mid=2654099978&idx=2&sn=f8865d252f2e605b0a099d3e84fe06ee&chksm=817a2cee675115734032bfe2abe2e092053c461c1956b8b46634d99f43074dd9a83dfda5d0cc&scene=126&sessionid=0
版权

说明

背景

项目中需要在浏览器中播放RTSP流，实在是不想折腾ActiveX控件

1、麻烦（开发麻烦、使用时设置也麻烦）

2、浏览器兼容更麻烦

解决方案

使用OpenCvSharp+Nancy写一个解码服务，提供http接口，返回解码后Mat对象的Base64字符串，前端页面循环调用并展示。

效果

项目

11279f47e562236dce03ec7ea82f587f.png

代码

前端代码调用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>rtsp播放测试</title>
    <link rel="stylesheet" href="bootstrap.min.css" />
    <script src="jquery-1.8.0.js" type="text/javascript"></script>
</head>
<body>
    <div class="container">
        <br />
        <div class="row">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <span class="label label-primary">rtsp播放测试</span>
                    <br />
                </div>
                <div class="panel-body">
                    <input type="text" value="" id="txtRTSPURL" style="width: 500px;" /><br />
                    <br />
                    <input type="button" value="打开" id="btnOpen" />
                    <input type="button" value="播放" id="btnPlay" />
                    <input type="button" value="停止" id="btnStop" />
                    <input type="button" value="测试获取一帧" id="btnTest" />
                    </br> </br>
                    <img id="imgId" src="" style="width: 1024px" />
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/jscript">
 
 
    $(function () {
 
        $("#btnOpen").click(function () {
            var rtsp_url = $("#txtRTSPURL").val();
            $.ajax({
                type: "post",
                url: base_url + "/open",
                dataType: 'json',
                data: { "rtsp_url": rtsp_url },
                success: function (d) {
                    if (d.code == 1) {
                        alert("打开成功")
                    } else {
                        alert("打开失败:" + d.message)
                    }
                }
            })
 
        })
 
 
        $("#btnTest").click(function () {
 
            $.ajax({
                type: "post",
                url: base_url + "/getframe",
                dataType: 'json',
                data: "",
                success: function (d) {
                    if (d.code == 1) {
                        console.log(d.data);
                        $("#imgId").attr("src", "data:image/jpg;base64," + d.data);
 
                    } else {
                        alert("播放失败:" + d.message)
                    }
                }
            })
 
        })
 
        $("#btnPlay").click(function () {
 
            try {
                flag = true;
                showImage();
            } catch (e) {
            }
 
        })
 
        $("#btnStop").click(function () {
            flag = false;
            $.ajax({
                type: "post",
                url: base_url + "/close",
                dataType: 'json',
                data: "",
                success: function (d) {
                    if (d.code == 1) {
 
                    } else {
                        alert("关闭失败:" + d.message)
                    }
                }
            })
        })
 
    })
 
    var base_url = "http://127.0.0.1:8082";
    var flag = false;
 
    function showImage() {
        $.ajax({
            type: "post",
            url: base_url + "/getframe",
            dataType: 'json',
            data: "",
            success: function (d) {
                if (d.code == 1) {
                    $("#imgId").attr("src", "data:image/jpg;base64," + d.data);
                    if (flag) {
                        showImage();
                    }
                } else {
                    alert("播放失败:" + d.message)
                }
            }
        })
 
    }
 
</script>
</html>

后端服务代码

using Nancy;
using Newtonsoft.Json;
using NLog;
using OpenCvSharp;
using OpenVINO.OCRService.Common;
using System;
using System.Threading;
using System.Threading.Tasks;
 
namespace CaptureService
{
    public class CaptureModule : NancyModule
    {
 
        private Logger _log = NLog.LogManager.GetCurrentClassLogger();
 
        public static readonly object _locker = new object();
 
        public CaptureModule()
        {
            //跨域处理
            After.AddItemToEndOfPipeline((ctx) => ctx.Response
            .WithHeader("Access-Control-Allow-Origin", "*")
            .WithHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS")
            .WithHeader("Access-Control-Allow-Headers", "Accept, Origin, Content-type"));
 
            Get("/", p =>
            {
                return "Hello MediaCaptureService";
            });
 
            Post("/open", p =>
            {
                AjaxReturn ar = new AjaxReturn();
 
                if (Program.open)
                {
                    ar.code = 0;
                    ar.message = "已开启，如需重新开启，请先关闭！";
                    _log.Info(JsonConvert.SerializeObject(ar));
                    return Response.AsJson<AjaxReturn>(ar);
                }
 
                string rtsp_url = Request.Form["rtsp_url"];
                if (string.IsNullOrEmpty(rtsp_url))
                {
                    ar.code = 0;
                    ar.message = "参数[rtsp_url]不能为空";
                    _log.Info(JsonConvert.SerializeObject(ar));
                    return Response.AsJson<AjaxReturn>(ar);
                }
 
                Program.rtsp_url = rtsp_url;
                Program.ctsCapture = new CancellationTokenSource();
                Program.open = true;
 
                try
                {
                    Task.Factory.StartNew(() =>
                    {
                        Program.capture = new VideoCapture(Program.rtsp_url);
                        if (Program.capture.IsOpened())
                        {
                            int index = 0;
                            Mat frame = new Mat();
                            while (true)
                            {
                                if (Program.ctsCapture.IsCancellationRequested) break;
                                Program.capture.Read(frame);
                                if (Program.matQueue.Count >= 5)
                                {
                                    continue;
                                }
                                Program.matQueue.Enqueue(frame);
                                //_log.Info(Program.matQueue.Count);
                                //Cv2.ImWrite(index + ".jpg", frame);
                                //index++;
                            }
                            if (Program.capture != null)
                            {
                                Program.capture.Release();
                            }
                        }
                    });
 
                    ar.code = 1;
                    ar.message = "success";
                }
                catch (Exception ex)
                {
                    ar.code = 0;
                    ar.message = ex.Message;
                    _log.Error(ex, "开启异常");
                }
                return Response.AsJson<AjaxReturn>(ar);
            });
 
            Post("/close", p =>
            {
                AjaxReturn ar = new AjaxReturn();
                try
                {
                    Program.open = false;
                    if (Program.ctsCapture != null)
                    {
                        Program.ctsCapture.Cancel();
                    }
                    ar.code = 1;
                    ar.message = "success";
                }
                catch (Exception ex)
                {
                    ar.code = 0;
                    ar.message = ex.Message;
                    _log.Error(ex, "关闭异常");
                }
                return Response.AsJson<AjaxReturn>(ar);
            });
 
            Post("/getframe", p =>
            {
                AjaxReturn ar = new AjaxReturn();
 
                if (!Program.open)
                {
                    ar.code = 0;
                    ar.message = "网络流未打开，请先打开！";
                    _log.Info(JsonConvert.SerializeObject(ar));
                    return Response.AsJson<AjaxReturn>(ar);
                }
 
                if (Program.matQueue.Count == 0)
                {
                    ar.code = 1;
                    ar.message = "图像队列为空";
                    _log.Info(JsonConvert.SerializeObject(ar));
                    return Response.AsJson<AjaxReturn>(ar);
                }
 
                try
                {
 
                    Mat frame = new Mat();
                    if (!Program.matQueue.TryDequeue(out frame))
                    {
                        ar.code = 0;
                        ar.message = "获取图像失败";
                        _log.Info(JsonConvert.SerializeObject(ar));
                        return Response.AsJson<AjaxReturn>(ar);
                    }
 
                    ar.code = 1;
                    ar.message = "success";
 
                    var bytes = frame.ToBytes();
                    ar.data = Convert.ToBase64String(bytes);
 
                }
                catch (Exception ex)
                {
                    ar.code = 0;
                    ar.message = ex.Message;
                    _log.Error(ex, "获取图像异常");
                }
                return Response.AsJson<AjaxReturn>(ar);
            });
 
        }
 
    }
 
}
dotNET跨平台
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html播放rtsp流,浏览器播放rtsp视频流解决方案
weixin_28946137的博客
06-26 2285
最近项目中需要实时播放摄像头rtsp视频流，于是就专门做了些研究。而浏览器不能直接播放，只有通过插件或者转码来实现这个需求。要实现这个目的，可以采用的方案非常得多，有商业的也有开源的，这里主要列举一些开源的方案。这里的方案都是我尝试过了的，有些成功，有些没成功。但是因为每个项目情况不同，这次没成的方法，换个项目也许就能成。方案一: html5 + websocket_rtsp_proxy 实现视频...
appemit支持chrome edge等浏览器使用VLC 播放rtsp rtmp 解决方案
appemit
01-24 4286
appemit支持chrome等浏览器使用VLC 播放rtsp rtmp HTML5的可以支持RTMP 但是无法播放RTSP，flash也止步于RTMP，最后同事推荐了个开源的好东东 VLC ，请教谷歌大神之后，这货果然可以用来让各浏览器（IE activex方式，谷歌、FF）实现播放RTSP视频流，那真是极好的~~ 废话不多说了附上参考文档和案例，大家自己看吧。 视频是用的海康网络摄像头（支持RTSP，标准H.264 RTP封装的设备），可以通过rtsp://admin:12345@192.0.0..
浏览器播放h.265 rtsp流媒体解决方案
liveweb视频汇聚平台
09-08 198
2015年之前Chrome等浏览器还未取消对NPAPI插件支持的时主流方案，继续使用低版本Chrome浏览器，通过VLC原生播放器直接播放，也不需要服务器支持，延迟非常低，终端也可以使用硬件的加速能力，多路播放也毫无压力。缺点也非常明显：无法使用最新的浏览器和操作系统，不适合商用。等摄像头的RTSP视频流，可以以做到低延迟（300毫秒），支持多路同时播放，支持H.264和H.265格式，支持2K、4K等高清视频，兼容主流浏览器的老版本和最新版本，不用担心浏览器升级导致不能用的问题。
浏览器播放RTSP、RTMP等几种编码格式视频流
weixin_44989721的博客
12-27 1万+
项目需求，需要前端页面实时展示摄像头采集的视频，视频啊，之前一点没接触过，经过一番调研、尝试，不得不说，网上文章真的大同小异，踩过许多坑，整理如下。 一、科普一下 1.流程 2.常见视频流格式 ● RTMP（推流端、拉流端） ● RTSP（推流端） ● HLS（拉流端） ● FLV（拉流端） 3.FLV ● 原生video标签只支持Ogg、MPEG4、WebM三种格式 ● 默认需要安装flash插件才可以播放 ● bilibili开源flv.js插件可直接转码，vue项目直接使用 ○ 推流端视频编码必须是
浏览器播放海康威视、大华RTSP解决方案支持H.264和H.265
liveweb视频汇聚平台
08-24 565
1、先在服务器端把RTSP流转码到浏览器可直接播放的视频流后再提供给终端浏览器播放，这也是号称无插件播放的方法，虽然这种方案对操作系统和浏览器兼容性好，但延迟往往很高，时常达到数秒之久，尤其是首屏画面显示很慢，体验糟糕。最主要的问题还是受限于WASM的缺陷，只能软解码，无法利用终端电脑的硬件加速能力，而且不支持多线程，这就导致播放多路RTSP流时就非常吃力了，在面对高分辨率和H.265的视频流时，同样效果不好，而且大量占用终端电脑的CPU和内存，无法再做其它事情，所以基本无法满足甲方客户的硬性要求。
浏览器web播放rtsp视频流解决方案（chrome/IE/firefox/360等）
热门推荐
固本培元的专栏
07-17 3万+
代码中的具体参数含义，大家可以移步这里： https://wiki.videolan.org/Documentation:WebPlugin/ 找半天，HTML5的可以支持RTMP 但是无法播放RTSP，flash也止步于RTMP，最后同事推荐了个开源的好东东 VLC ，请教谷歌大神之后，这货果然可以用来让各浏览器（IE activex方式，谷歌、FF）实现播放RTSP视频流，那真
appemit支持chrome等浏览器使用VLC 播放rtsp rtmp 解决方案
程序猿爱篮球
04-20 3811
最近项目需要实时播放摄像头rtsp视频流，H5支持rtmp，不支持rtsp，只有通过插件或者转码来实现这个需求。网上有很多中解决方案，但是我的需求需要切换rtsp流。最后选择了Appemit，做个简单记录。 第一步：下载 vlc http://www.videolan.org/vlc/ 第二步:下载 Appemit和案例 程序名称 AppEmit.exe 官方网址 Github 文章仅用作分享记录，如有不当之处，还望指正。 ......
网页播放海康，威视，大华，华为摄像头RTSP流，延迟毫秒级，支持多路播放、H.264/H.265
liveweb视频汇聚平台
08-15 412
况且各种常规技术方案，需要在后端持续运行高负荷运转的视频转码转流服务，如果摄像头路数多或需要在线播放的终端比较多，服务器的压力就会很大，播放卡顿、花屏、黑屏、断播等现象就会时常出现，很难让客户满意，为了解决这些问题，相关硬件、软件的投入和持续不断的带宽占用往往也让客户难以接受。1. 最核心的无疑是播放功能，包含单路播放、多路播放、全屏播放、快播、慢播等等，其中多路播放分屏风格支持多达26种，总有一款适合您，没有需要的分屏风格时也可以委托定制开发，还有指定视频名称或指定时间段回看视频等；
WEB端播放RTSP流.支持H.265，低延迟300毫秒以内！
liveweb视频汇聚平台
08-17 396
一个好的技术实施方案，首先是要满足客户的刚性需求，其次是尽量降低采购、开发、实施及维护的总成本，再次是需要有良好的兼容性和稳定性，最后需尽量确保技术方案不能因为浏览器的升级而失效，能够实现公司自主可控的要求就更好了。好游科技的liveweb网页播放程序提供了这样一个稳定可靠、兼容性好、低延迟又可同时稳定播放多路RTSP的低成本半开源技术方案，无疑是当前安防行业在网页端播放RTSP流的最佳选择。
浏览器播放RTSP流，支持H264、H265等格式，支持IE、Chrome等浏览器-CaptureService.rar
08-27
浏览器播放RTSP流，支持H264、H265等格式，支持IE、Chrome等浏览器-CaptureService.rar 博客地址：https://lw112190.blog.csdn.net/article/details/141615040
高版本Chrome网页直接播放海康威视大华RTSP流方案，不需服务器转码转流，支持H.265、H.264及2K/4K高清视频
bubailai的博客
02-07 2842
近期公司在做一个智慧城市项目，需要在高版本Chrome网页播放海康威视、大华、或者华为摄像头RTSP流，于是在网上开始找对应的解决方案，没想到网上各种转码转流方案纷繁复杂，找到一款稳定商用满足需求的很难！ 目前网上有两种所谓无插件方案，即后端转码前端播放的方法和后端转流前端转码的方案，虽然无插件播放方案能够播放出画面，但是往往延迟很高，基本上都在数秒之久，在一些对延迟敏感的场合客户要求毫秒级延迟，显然无插件技术方案是无法满足的；而且首屏画面显示慢，基本上得十几秒，这就导致切换播放源时迟迟看不到画面出来；况
Shell编程规范与变量
Amrian_robot的博客
08-28 475
● 由用户自己定义、修改和使用格式：变量名=变量值以字母或下划线开头，区分大小写示例：预定义变量：通常由编程语言或脚本解释器提供，并根据需要自动设置和更新，不能修改变量解释$*、$@表示命令或脚本要处理的参数"$*"把所有参数看成以空格分隔的一个字符串整体(单字符串)返回，代表"$1 $2 $3 $4""$@"把各个参数加上双引号分隔成n份的参数列表，每个参数作为一个字符串返回，代表"$1" "$2" "$3" "$4"$0表示当前执行的脚本或命令的名称$#
收藏夹里的“小网站”被误报违规不让上怎么办？如何将Chrome和Edge安装到 D 盘（含用户数据），重装系统也不会丢失收藏夹和密码？
最新发布
楚门边境官方博客
08-28 335
那遇到这种误报应当怎么办呢？所以今天就来个有备无患，讲一下如何下载保存 Chrome 和 Edge 离线安装包，而且我还保存了几个旧版本，就算最新版不能用了也不用担心。虽说谷歌可能不会做太绝一棒子打死，不过万一哪天你要上的网站被谷歌给误报了，而你又不习惯用别的浏览器，那可真是闹心了。如果确实是违规网站，不让访问也没什么，但是很多都是误报啊，你这样直接来个大红横幅，还让人活不？
【Selenium】Selenium运行时报cannot find Chrome binary错误的解决办吧
殷小速的博客
08-28 181
这种情况一般是浏览器对应的驱动没有在默认路径下找到浏览器的二进制文件。Selenium提供了方法设置浏览器二进制文件的位置。卸载浏览器，重新安装到默认路径下。配置浏览器的安装目录到环境变量中。
Chrome H265 WebRTC 支持
H5Stream/HTML5 Streaming
08-23 530
Chrome从127版本开始支持RTC H265解码，这样服务器就不需要对H265转码了， H5S和USC会自动检测浏览器支持的解码类型并自动判断是否启动转码，这样客户端不用关心摄像机具体是H264还是H265，尽量使用带GPU的客户端，这样服务端不发生H265转H264的过程，会大大节省服务器CPU资源。播放后可以使用chrome://webrtc-internals/ 检查是否是H265直接在浏览器中播放, H5S从r18版本开始支持。这样启动后RTC 解码器会包含H265。
Chrome 中的 RCE 会在 JIT 编译器中产生不正确的副作用
技术超强的网络安全平台
08-25 954
此类漏洞通常是“一键式”攻击的起点，当受害者访问恶意网站时，该漏洞会危害受害者的设备。Chrome 中的渲染器 RCE 允许攻击者危害 Chrome 渲染器进程并执行任意代码。但是，渲染器进程的权限有限，因此攻击者需要将此类漏洞与第二个“沙盒逃逸”漏洞串联起来：Chrome 浏览器进程中的另一个漏洞或操作系统中的漏洞，以危害 Chrome 本身或设备。例如，Google 威胁分析小组的 Clement Lecigne 在“间谍软件供应商使用 0-day 和 n。
chrome cookie编辑
qq_32389095的博客
08-26 143
或者在chrome应用商店搜索： cookie editor。
bash 脚本的执行方式
weixin_42186805的博客
08-28 668
在 Bash 中，执行脚本可以通过多种方式，其中最常见的两种是使用bash直接运行脚本和使用source命令（或，即点命令）来执行。这两种方式有着根本的区别，它们对脚本的影响和脚本对环境的影响也不同。
将RTSP传输的H264/265的码流输出
03-27
要将RTSP传输的H264/265的码流输出，您可以使用以下步骤： 1. 使用一个RTSP客户端连接到RTSP服务器，获取H264/265的流。 2. 解码H264/265的流，即将码流转换成视频帧。您可以使用像FFmpeg这样的库来完成这个任务。 3. 将视频帧输出到您需要的地方。这可能是一个文件、一个网络流或者是一个显示器。 以下是一个简单的Python代码示例，用于从RTSP服务器获取H264/265流，解码并输出到文件： ```python import cv2 # RTSP地址 rtsp_url = "rtsp://example.com/stream" # 打开RTSP流 cap = cv2.VideoCapture(rtsp_url) # 检查是否成功打开 if not cap.isOpened(): print("无法打开RTSP流") exit() # 解码并输出到文件 out = cv2.VideoWriter("output.avi", cv2.VideoWriter_fourcc(*"XVID"), 25, (640, 480)) while True: ret, frame = cap.read() if not ret: break out.write(frame) # 清理 cap.release() out.release() cv2.destroyAllWindows() ``` 此代码将从RTSP服务器获取H264/265流，并将视频帧输出到名为“output.avi”的文件中。您可以根据需要更改输出参数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值