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

目录

背景

解决方案

效果

代码

前端代码

后端代码

下载

背景

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

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

2、非IE浏览器不兼容

解决方案

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

效果

浏览器播放RTSP流

代码

前端代码




   
    rtsp播放测试
   
   


   


       

       

           

               

                    <span class="label label-primary">rtsp播放测试
                   

               

               

                   

                   

                   
                   
                   
                   
                   


                   
               

           

       

    



  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <title>rtsp播放测试</title>
  6.     <link rel="stylesheet" href="bootstrap.min.css" />
  7.     <script src="jquery-1.8.0.js" type="text/javascript"></script>
  8. </head>
  9. <body>
  10.     <div class="container">
  11.         <br />
  12.         <div class="row">
  13.             <div class="panel panel-primary">
  14.                 <div class="panel-heading">
  15.                     <span class="label label-primary">rtsp播放测试</span>
  16.                     <br />
  17.                 </div>
  18.                 <div class="panel-body">
  19.                     <input type="text" value="" id="txtRTSPURL" style="width: 500px;" /><br />
  20.                     <br />
  21.                     <input type="button" value="打开" id="btnOpen" />
  22.                     <input type="button" value="播放" id="btnPlay" />
  23.                     <input type="button" value="停止" id="btnStop" />
  24.                     <input type="button" value="测试获取一帧" id="btnTest" />
  25.                     </br> </br>
  26.                     <img id="imgId" src="" style="width: 1024px" />
  27.                 </div>
  28.             </div>
  29.         </div>
  30.     </div>
  31. </body>
  32. <script type="text/jscript">
  33.  
  34.  
  35.     $(function () {
  36.  
  37.         $("#btnOpen").click(function () {
  38.             var rtsp_url = $("#txtRTSPURL").val();
  39.             $.ajax({
  40.                 type: "post",
  41.                 url: base_url + "/open",
  42.                 dataType: 'json',
  43.                 data: { "rtsp_url": rtsp_url },
  44.                 success: function (d) {
  45.                     if (d.code == 1) {
  46.                         alert("打开成功")
  47.                     } else {
  48.                         alert("打开失败:" + d.message)
  49.                     }
  50.                 }
  51.             })
  52.  
  53.         })
  54.  
  55.  
  56.         $("#btnTest").click(function () {
  57.  
  58.             $.ajax({
  59.                 type: "post",
  60.                 url: base_url + "/getframe",
  61.                 dataType: 'json',
  62.                 data: "",
  63.                 success: function (d) {
  64.                     if (d.code == 1) {
  65.                         console.log(d.data);
  66.                         $("#imgId").attr("src", "data:image/jpg;base64," + d.data);
  67.  
  68.                     } else {
  69.                         alert("播放失败:" + d.message)
  70.                     }
  71.                 }
  72.             })
  73.  
  74.         })
  75.  
  76.         $("#btnPlay").click(function () {
  77.  
  78.             try {
  79.                 flag = true;
  80.                 showImage();
  81.             } catch (e) {
  82.             }
  83.  
  84.         })
  85.  
  86.         $("#btnStop").click(function () {
  87.             flag = false;
  88.             $.ajax({
  89.                 type: "post",
  90.                 url: base_url + "/close",
  91.                 dataType: 'json',
  92.                 data: "",
  93.                 success: function (d) {
  94.                     if (d.code == 1) {
  95.  
  96.                     } else {
  97.                         alert("关闭失败:" + d.message)
  98.                     }
  99.                 }
  100.             })
  101.         })
  102.  
  103.     })
  104.  
  105.     var base_url = "http://127.0.0.1:8082";
  106.     var flag = false;
  107.  
  108.     function showImage() {
  109.         $.ajax({
  110.             type: "post",
  111.             url: base_url + "/getframe",
  112.             dataType: 'json',
  113.             data: "",
  114.             success: function (d) {
  115.                 if (d.code == 1) {
  116.                     $("#imgId").attr("src", "data:image/jpg;base64," + d.data);
  117.                     if (flag) {
  118.                         showImage();
  119.                     }
  120.                 } else {
  121.                     alert("播放失败:" + d.message)
  122.                 }
  123.             }
  124.         })
  125.  
  126.     }
  127.  
  128. </script>
  129. </html>

后端代码

  1. using Nancy;
  2. using Newtonsoft.Json;
  3. using NLog;
  4. using OpenCvSharp;
  5. using OpenVINO.OCRService.Common;
  6. using System;
  7. using System.Threading;
  8. using System.Threading.Tasks;
  9.  
  10. namespace CaptureService
  11. {
  12.     public class CaptureModule : NancyModule
  13.     {
  14.  
  15.         private Logger _log = NLog.LogManager.GetCurrentClassLogger();
  16.  
  17.         public static readonly object _locker = new object();
  18.  
  19.         public CaptureModule()
  20.         {
  21.             //跨域处理
  22.             After.AddItemToEndOfPipeline((ctx) => ctx.Response
  23.             .WithHeader("Access-Control-Allow-Origin", "*")
  24.             .WithHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS")
  25.             .WithHeader("Access-Control-Allow-Headers", "Accept, Origin, Content-type"));
  26.  
  27.             Get("/", p =>
  28.             {
  29.                 return "Hello MediaCaptureService";
  30.             });
  31.  
  32.             Post("/open", p =>
  33.             {
  34.                 AjaxReturn ar = new AjaxReturn();
  35.  
  36.                 if (Program.open)
  37.                 {
  38.                     ar.code = 0;
  39.                     ar.message = "已开启，如需重新开启，请先关闭！";
  40.                     _log.Info(JsonConvert.SerializeObject(ar));
  41.                     return Response.AsJson<AjaxReturn>(ar);
  42.                 }
  43.  
  44.                 string rtsp_url = Request.Form["rtsp_url"];
  45.                 if (string.IsNullOrEmpty(rtsp_url))
  46.                 {
  47.                     ar.code = 0;
  48.                     ar.message = "参数[rtsp_url]不能为空";
  49.                     _log.Info(JsonConvert.SerializeObject(ar));
  50.                     return Response.AsJson<AjaxReturn>(ar);
  51.                 }
  52.  
  53.                 Program.rtsp_url = rtsp_url;
  54.                 Program.ctsCapture = new CancellationTokenSource();
  55.                 Program.open = true;
  56.  
  57.                 try
  58.                 {
  59.                     Task.Factory.StartNew(() =>
  60.                     {
  61.                         Program.capture = new VideoCapture(Program.rtsp_url);
  62.                         if (Program.capture.IsOpened())
  63.                         {
  64.                             int index = 0;
  65.                             Mat frame = new Mat();
  66.                             while (true)
  67.                             {
  68.                                 if (Program.ctsCapture.IsCancellationRequested) break;
  69.                                 Program.capture.Read(frame);
  70.                                 if (Program.matQueue.Count >= 5)
  71.                                 {
  72.                                     continue;
  73.                                 }
  74.                                 Program.matQueue.Enqueue(frame);
  75.                                 //_log.Info(Program.matQueue.Count);
  76.                                 //Cv2.ImWrite(index + ".jpg", frame);
  77.                                 //index++;
  78.                             }
  79.                             if (Program.capture != null)
  80.                             {
  81.                                 Program.capture.Release();
  82.                             }
  83.                         }
  84.                     });
  85.  
  86.                     ar.code = 1;
  87.                     ar.message = "success";
  88.                 }
  89.                 catch (Exception ex)
  90.                 {
  91.                     ar.code = 0;
  92.                     ar.message = ex.Message;
  93.                     _log.Error(ex, "开启异常");
  94.                 }
  95.                 return Response.AsJson<AjaxReturn>(ar);
  96.             });
  97.  
  98.             Post("/close", p =>
  99.             {
  100.                 AjaxReturn ar = new AjaxReturn();
  101.                 try
  102.                 {
  103.                     Program.open = false;
  104.                     if (Program.ctsCapture != null)
  105.                     {
  106.                         Program.ctsCapture.Cancel();
  107.                     }
  108.                     ar.code = 1;
  109.                     ar.message = "success";
  110.                 }
  111.                 catch (Exception ex)
  112.                 {
  113.                     ar.code = 0;
  114.                     ar.message = ex.Message;
  115.                     _log.Error(ex, "关闭异常");
  116.                 }
  117.                 return Response.AsJson<AjaxReturn>(ar);
  118.             });
  119.  
  120.             Post("/getframe", p =>
  121.             {
  122.                 AjaxReturn ar = new AjaxReturn();
  123.  
  124.  
  125.                 if (!Program.open)
  126.                 {
  127.                     ar.code = 0;
  128.                     ar.message = "网络流未打开，请先打开！";
  129.                     _log.Info(JsonConvert.SerializeObject(ar));
  130.                     return Response.AsJson<AjaxReturn>(ar);
  131.                 }
  132.  
  133.                 if (Program.matQueue.Count == 0)
  134.                 {
  135.                     ar.code = 1;
  136.                     ar.message = "图像队列为空";
  137.                     _log.Info(JsonConvert.SerializeObject(ar));
  138.                     return Response.AsJson<AjaxReturn>(ar);
  139.                 }
  140.  
  141.                 try
  142.                 {
  143.  
  144.                     Mat frame = new Mat();
  145.                     if (!Program.matQueue.TryDequeue(out frame))
  146.                     {
  147.                         ar.code = 0;
  148.                         ar.message = "获取图像失败";
  149.                         _log.Info(JsonConvert.SerializeObject(ar));
  150.                         return Response.AsJson<AjaxReturn>(ar);
  151.                     }
  152.  
  153.                     ar.code = 1;
  154.                     ar.message = "success";
  155.  
  156.                     var bytes = frame.ToBytes();
  157.                     ar.data = Convert.ToBase64String(bytes);
  158.  
  159.                 }
  160.                 catch (Exception ex)
  161.                 {
  162.                     ar.code = 0;
  163.                     ar.message = ex.Message;
  164.                     _log.Error(ex, "获取摄像头画面异常");
  165.                 }
  166.                 return Response.AsJson<AjaxReturn>(ar);
  167.             });
  168.  
  169.         }
  170.  
  171.     }
  172.  
  173. }

下载

源码下载

天天代码码天天
微信公众号
.NET 人工智能实践
注：本文转载自blog.csdn.net的天天代码码天天的文章"https://lw112190.blog.csdn.net/article/details/141615040"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！