webrtcstreamer实现视频rtsp流播放

这篇具有很好参考价值的文章主要介绍了webrtcstreamer实现视频rtsp流播放。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

webrtc streamer文章来源地址https://www.toymoban.com/news/detail-845183.html

  • 大致的了解了一下,就是使用js来播放rtsp视频流的一个技术。目前实现的厂家有很多,但是要收费。我这里是找了一个开源免费的项目,使用起来有一定的局限性,需要根据自己的业务自己去实现逻辑,目前我只做到了播放实时摄像头。
  • 网址:https://github.com/mpromonet/webrtc-streamer/releases
  • 我这里用的是windows系统服务器,本地也是windows,所以使用的是windows版本,下载的文件是“webrtc-streamer-v0.7.0-dirty-Windows-AMD64-Release.tar.gz”。
  • 下载完成后,需要配置一下配置文件,配置的是具体的摄像头的取流地址,我这里用的是大华和萤石两个摄像头的流,具体取流地址,可以参考网上很多教程。
  • config.json配置:
{
    "urls":{
        "dahua": {"video": "rtsp://用户名:密码@摄像头ip:554/cam/realmonitor?channel=1&subtype=0"},
        "yingshi": {"video": "rtsp://用户名:密码@摄像头ip:554/h264/ch1/sub/av_stream"},
    }
}
  • 目录图:jswebrtc rtsp,前端,音视频,vue.js
  • 启动命令需要带上制定的配置文件,这里配置的是config.json,-C要大写!
  • 进入webrtc-streamer.exe所在目录,在地址栏中输入cmd,在出现的命令窗口中,输入下面命令。
webrtc-streamer.exe -C config.json
  • 在网址上,输入localhost:8000,进入webrtc的网页。里面会罗列出你电脑任务栏上所有的应用,点击就是类似录制当前应用的一个窗口,可以不用管,我们找到我们配置文件中的dahua和yingshi两个选项卡。如图:jswebrtc rtsp,前端,音视频,vue.js
  • 如果能正常播放,那就是没问题的,等会引入js,进行页面播放。如果一直转圈圈,可能是摄像头的编码格式是H265的,我买的最新款萤石摄像头默认的就是H265,大华的可以正常播放,但是萤石的就一直转圈圈。这个时候需要下载一个萤石客户端,去设置一下摄像头的转码格式(有主码流和辅码流之分,如果都要用,那每个码流的格式都要设置成H264)。这个开源的webrtc只支持H264的。设置后就可以正常播放了。
  • 这里采用前端vueJS实现方式
  • 在public目录下的index.html引入
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script type="text/javascript" src="./static/webrtcstreamer.js"></script>
    <script type="text/javascript" src="./static/adapter.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
  • 引入webrtcstreamer.js,adapter.min.js这几个js都可以在下载的“webrtc-streamer-v0.7.0-dirty-Windows-AMD64-Release”包中找到。单独拷贝出来,放到static目录下
  • vue组件中使用
  • <template>
      <div class="models">
        <el-row :gutter="24">
          <el-col :span="12">
            <video id="video" autoplay controls width="570" height="280"></video>
          </el-col>
          <el-col :span="12">
            <video id="video1" autoplay controls width="570" height="280"></video>
          </el-col>
        </el-row>
      </div>
    </template>
    <script>
    export default {
      name: "video",
      data() {
        return {};
      },
      mounted() {
        var webRtcServer = new WebRtcStreamer(
          "video",
          "http://192.168.161.160:8000"
        );
        var webRtcServer1 = new WebRtcStreamer(
          "video1",
          "http://192.168.161.160:8000"
        );
        webRtcServer.connect("dahua");
        webRtcServer1.connect("yingshi");
      },
    };
    </script>

到了这里,关于webrtcstreamer实现视频rtsp流播放的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【vue2】前端如何播放rtsp 视频流,拿到rtsp视频流地址如何处理,海康视频rtsp h264 如何播放

    最近在写vue2 项目其中有个需求是实时播放摄像头的视频,摄像头是 海康 的设备,搞了很长时间终于监控视频出来了,记录一下,放置下次遇到。文章有点长,略显啰嗦请耐心看完。 测试?测试什么?测试rtsp视频流能不能播放。 video mediaplay官网 即(VLC) 下载、安装完VLC后

    2024年02月05日
    浏览(55)
  • 前端基础(三十六):读取本地音视频设备并进行播放

    请求媒体输入和输出设备的列表,例如麦克风,摄像机,耳机设备等 会提示用户给予使用媒体输入的许可,媒体输入会产生一个MediaStream,里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道(来自硬件或者虚拟视频源,比如相机、视频采集设备和屏幕共享服务等

    2024年02月15日
    浏览(51)
  • 前端VUE播放RTSP、RTMP、HLS、FLV视频流的解决方案

    最近有个需求是前端在浏览器显示摄像头传回的RTSP视频流,我和后端都没做过视频流的项目,所以一步步摸索过来,方法和经验供大家参考。前端采用的技术有VUE+video.js+flv.js 从上图可以看出,RTSP流不能直接在浏览器播放,所以需要转码: RTMP的流需要在浏览器中用flash播放

    2024年02月06日
    浏览(59)
  • Windows上搭建rtsp-simple-server流媒体服务器实现rtsp、rtmp等推流以及转流、前端html与Vue中播放hls(m3u8)视频流

    Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流: Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流_霸道流氓气质的博客-CSDN博客 上面讲了Nginx-http-flv-module+flv.js进行流媒体服务器搭建和前端播放视频流的过

    2024年02月01日
    浏览(59)
  • qt+ffmpeg 实现音视频播放(二)之音频播放

    通过  avformat_open_input () 打开媒体文件并分配和初始化  AVFormatContext   结构体。 函数原型如下: int avformat_open_input(AVFormatContext **ps, const char *url, AVInputFormat *fmt, AVDictionary **options); 参数说明: - `ps`:指向 `AVFormatContext` 结构体指针的指针,用于存储打开的媒体文件的信息。

    2024年04月22日
    浏览(57)
  • QT实现OpenCV播放rtsp视频流

    使用OpenCV(图像处理)、FastDeploy(飞桨部署)库; 监控相机传输数据用的是码流,高清网络摄像机产品编码器都会产生两个编码格式,称为 主码流 和 子码流 。这就叫双码流技术。 目的是用于解决监控录像的本地存储和网络传输的图像的质量问题。双码流能实现本地和远程

    2024年02月03日
    浏览(70)
  • FFMpeg-3、基于QT实现音视频播放显示

    1、音视频播放的基础知识 内容来自雷神博客 1、在Windows平台下的视频播放技术主要有以下三种:GDI,Direct3D和OpenGL;音频播放技术主要是DirectSound。 SDL本身并不具有播放显示的功能,它只是封装了底层播放显示的代码 记录三种视频显示技术:GDI,Direct3D,OpenGL。其中Direct3D包

    2024年02月03日
    浏览(66)
  • 纯前端ELECTRON+VUE+FFMPEG实现多路播放RTSP流

    近期有项目需求前端播放rtsp视频流,项目是由electron+vue3搭建,没有后端,因此需要在前端实现解析rtsp流及播放,经过多方考察最后选用了ffmpeg+jsmpeg方案实现,具体实现是参考了@牧也の旅行 大佬的这篇文章 原文地址 实现的,感谢@牧也の旅行 一直在回复我的各种小白问题,

    2024年02月04日
    浏览(38)
  • java 实现监控rtsp流转flv,实现前端播放(前后端代码都有)

    controller层: config层: factories层: result层: service层: 这里因为浏览器把自动播放给禁止了,加了个按钮点击事件 https://www.bootcdn.cn/ 引入的flv.js文件在如下网站下载即可:

    2024年02月11日
    浏览(89)
  • 音视频开发:ffplay使用ffmpeg滤镜实现倍速播放

    曾经为实现倍速播放使用过ffmpeg,对音频使用atempo滤镜即可实现变速不变调。但是当时效果并不是特别好,和soundtouch相比处理后的音质有明显的区别。最近用新版本的ffmpeg滤镜重新实现了倍速播放,发现效果变好,已经达到可接受的程度,所以在此分享具体实现。 ffmpeg倍速

    2024年02月03日
    浏览(110)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包