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

news2025/10/31 10:37:31

目录

背景

解决方案

效果

代码

前端代码

后端代码

下载

背景

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

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

2、非IE浏览器不兼容

解决方案

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

效果

浏览器播放RTSP流

代码

前端代码

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

<!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);
            });

        }

    }

}

下载

源码下载

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

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

相关文章

uniapp秋云图表报错json underfind的原因

uniapp秋云图表报错json underfind的原因

如果在使用秋云图表 出现报错 以及只有第一次能够渲染正确的图表 后续刷新都不显示 那么大概率都是因为在刷新页面数据的时候 图标组件自己先执行了一遍&#xff0c;导致在第一遍的时候找不到值而报错 如图所示 只需要在加载数据的时候 加个延时 就可以很好的解决这个问题
阅读更多...
记录一下腾讯云即时通信IM（无UI集成）、TRTC做文字、语音、图片、实时音视频聊天遇到的问题

记录一下腾讯云即时通信IM（无UI集成）、TRTC做文字、语音、图片、实时音视频聊天遇到的问题

文章目录 简单记录一下通讯IM和TRTC的一些坑&#xff1a;&#xff08;有其他坑再补充......&#xff09;isReady() 一直返回falseSDK_READY监听有时候会不触发getConversationList拉取会话&#xff0c;消息数据里的cloudCustomData经常会丢移动端发图片消息总是卡顿im里的信令消…
阅读更多...
SpringBoot+redis+aop处理黑白名单

SpringBoot+redis+aop处理黑白名单

提示&#xff1a;SpringBootredisaop处理黑白名单 文章目录 目录 文章目录 1.导包 2.配置文件 3.代码 1.返回类型 2.redis 3.redisUtils 4.controller 5.AOP 6.具体实现 4.APIFox压力测试 1.导包 <dependencies><dependency><groupId>org.springf…
阅读更多...
Mybatis基础操作学习

Mybatis基础操作学习

文章目录 实施前的准备工作&#xff1a;基础操作演示删除新增修改&#xff08;更新&#xff09;查询条件查询 实施前的准备工作&#xff1a; 准备数据库表创建一个新的springboot工程&#xff0c;选择引入对应的起步依赖&#xff08;mybatis、mysql驱动、lombok&#xff09;ap…
阅读更多...
C语言初阶 --- 数据在内存中的存储

C语言初阶 --- 数据在内存中的存储

&#x1f388; 个人主页&#x1f449;&#xff1a;tbRNA-CSDN博客 &#x1f4af; 个人简介&#xff1a;在校大学生一枚&#x1f48b;. &#x1f60d; 希望我的文章对大家有着不一样的帮助&#xff0c;欢迎大家关注我&#xff0c;感谢大家的多多支持&#xff01; &#x1f389; …
阅读更多...
chapter09-OOP高级部分——（final关键字）——day12

chapter09-OOP高级部分——（final关键字）——day12

目录 394-final基本使用 395-final使用细节1 396-final使用细节2 397-final课堂练习 394-final基本使用 395-final使用细节1 396-final使用细节2 397-final课堂练习 一、 二、 x&#xff1b;相当于修改final x的值&#xff0c;不可以 return x1&#xff1b;这里是可以的
阅读更多...
【红队技巧】.Net免杀 绕过主流杀软

【红队技巧】.Net免杀 绕过主流杀软

【技巧】.Net免杀 绕过主流杀软 前言 最近执行任务时&#xff0c;需要动用自己的免杀知识却发现它们不再生效&#xff0c;于是就有了本文。这次对windows api和C#又有了比在thm​学习时更深的认识和了解。 C#动态加载LoadLinrary受限绕过EnumWindows函数执行shellcode C#动…
阅读更多...
Theadlocal是什么？有哪些使用场景？底层实现是什么？

Theadlocal是什么？有哪些使用场景？底层实现是什么？

首先在线程里有一个ThreadlocalMap这个变量&#xff0c;在我们调用threadlocal.set&#xff08;&#xff09;方法的时候其实就是操作当前线程的ThreadlocalMap&#xff0c;将threadlocal放到key上将threadlocal的值存入value中。 这是set方法的具体实现。 需要注意的是&#x…
阅读更多...
普元Devops-在云主机上拉取harbor的docker镜像并部署

普元Devops-在云主机上拉取harbor的docker镜像并部署

1 前言 本文讲解如何从普元Devops配置构建&#xff0c;从而实现在云主机上拉取Docker镜像&#xff0c;然后运行Docker容器&#xff0c;实现云主机的Docker部署。 2 主要步骤说明 首先&#xff0c;我们有一个Devops服务器&#xff0c;还有一个云主机服务器&#xff0c;还有一个…
阅读更多...
springboot+redis+mybatis体会布隆过滤器

springboot+redis+mybatis体会布隆过滤器

1.建立数据库表和对应实体类 CREATE TABLE user (id int(11) NOT NULL AUTO_INCREMENT,uname varchar(50) DEFAULT NULL,usex varchar(20) DEFAULT NULL,uage int(11) DEFAULT NULL,PRIMARY KEY (id) USING BTREE ) ENGINEInnoDB AUTO_INCREMENT1319 DEFAULT CHARSETutf8 ROW_…
阅读更多...
美国硅谷多ip服务器用途广吗?

美国硅谷多ip服务器用途广吗?

美国硅谷多IP服务器的用途广泛&#xff0c;涉及多个行业和应用场景&#xff0c;包括站群运营、SEO优化、游戏代理、软件开发、数据分析、科学研究、电子商务、在线营销、虚拟主机和云服务等。具体分析如下&#xff0c;rak小编为您整理发布美国硅谷多ip服务器用途广吗的相关内容…
阅读更多...
JetBrains WebStorm 2024.2 (macOS, Linux, Windows) - 最智能的 JavaScript IDE

JetBrains WebStorm 2024.2 (macOS, Linux, Windows) - 最智能的 JavaScript IDE

JetBrains WebStorm 2024.2 (macOS, Linux, Windows) - 最智能的 JavaScript IDE JetBrains 跨平台开发者工具 请访问原文链接&#xff1a;ttps://sysin.org/blog/jetbrains-webstorm/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;sy…
阅读更多...
OpenCV绘图函数（12）绘制直线函数 line()的使用

OpenCV绘图函数（12）绘制直线函数 line()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 line 函数在图像中绘制从 pt1 到 pt2 两点之间的线段。这条线会被图像边界裁剪。对于没有抗锯齿效果且坐标为整数的线&#xff0c;会使用 8-连接…
阅读更多...
HarmonyOS开发实战（ Beta5版）减小应用包大小

HarmonyOS开发实战（ Beta5版）减小应用包大小

简介 减小应用包大小是提升应用下载、安装体验的重要方式之一。通过压缩、精简或者复用应用中的代码或资源&#xff0c;可以有效降低应用的大小&#xff0c;提升应用下载和安装速度&#xff0c;减少系统空间占用。 开发者可以参考下面三种方法减小应用包大小&#xff1a; 配…
阅读更多...
数据结构—栈和队列

数据结构—栈和队列

栈 一、栈的概念及结构 栈&#xff08;Stack&#xff09;是一种特殊的线性表&#xff0c;其只允许在表的固定的一端进行插入和删除操作。 栈顶&#xff1a;进行插入数据和删除数据的一端。 栈底&#xff1a;相对于栈顶的另一端。 原则&#xff1a;栈的数据元素遵循后进先出…
阅读更多...
【Python报错已解决】`TypeError`：`TypeError: not enough arguments for format string`

【Python报错已解决】`TypeError`：`TypeError: not enough arguments for format string`

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 引言 在Python编程中&#xff0c;TypeError是一个常见的错误类型&#xff0c;它表示在操作或函数调用中使用了错误的类型。本文…
阅读更多...
服务器死机/无故宕机排查思路/服务器起不来

服务器死机/无故宕机排查思路/服务器起不来

1、查看服务器型号 dmidecode -t system dmidecode | grep ‘Product Name’ 2、风扇异响&#xff1a;查看BMC&#xff0c;坏了一个风扇其他的所有的风扇会全速转。 3、服务器亮红灯 红灯就是 故障告警 不一定是啥需要查看BMC口日志。这种就是看bmc日志 会有打印的 -问题现象&a…
阅读更多...
java中的反射Reflection

java中的反射Reflection

Java中的反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;它允许程序在运行时查询和操作对象的类型信息。通过反射API&#xff0c;程序可以动态地创建对象、调用方法、访问字段和构造函数等&#xff0c;即使在编译时这些信息是未知的。 反射的原理 反射的…
阅读更多...
微软分享其首款定制人工智能芯片Maia 100的更多细节

微软分享其首款定制人工智能芯片Maia 100的更多细节

在2023年Ignite大会期间&#xff0c;微软首次宣布其已开发出名为Maia的自主人工智能加速器芯片。今年早些时候&#xff0c;在Build开发者大会上&#xff0c;微软分享了其首个自主研发的人工智能加速器Azure Maia 100的更多细节。Maia 100 是台积电 5nm 节点上制造的最大处理器之…
阅读更多...
深拷贝与浅拷贝的区别

深拷贝与浅拷贝的区别

浅拷贝会导致深层数据改变&#xff0c;而深拷贝不会改变任何数据。 简单说就是&#xff1a; 浅拷贝只复制某个对象的引用&#xff0c;而不复制对象本身&#xff0c;新旧对象还是共享同一块内存。 深拷贝会创造一个一模一样的对象&#xff0c;新对象和原对象不共享内存&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023