浏览器播放rtsp视频,基于nodeJs

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

浏览器播放rtsp视频,基于nodeJs

1:安装ffmpeg,并且配置环境变量。

下载地址:http://ffmpeg.zeranoe.com/builds/ 或者:

百度云链接:https://pan.baidu.com/s/1PBt18BHFGpdr0lpoUp5cKw
提取码:hx08

配置:

浏览器播放rtsp视频,基于nodeJs

复制文件地址,返回桌面,右键我的电脑/此电脑,点击高级系统设置高级,点击环境变量

点击path

浏览器播放rtsp视频,基于nodeJs

设置路径

浏览器播放rtsp视频,基于nodeJs

win + r 输入cmd

输入ffmpeg 回车

浏览器播放rtsp视频,基于nodeJs

成功

2:npm install node-rtsp-stream ws

1

2

3

4

5

6

7

8

9

10

11

12

13

14

const Stream=require('node-rtsp-stream');

// 设置rtsp视频流

const rtsp_url='rtsp://admin:admin@192.168.1.229:554/live/main'

const streams = new Stream({

    name: 'sockets',

    streamUrl: rtsp_urls,

    wsPort: 9998,

    ffmpegOptions: { // 选项ffmpeg标志

      '-stats'''// 没有必要值的选项使用空字符串

      '-r': 30, // 具有必需值的选项指定键后面的值<br>    '-s':'1920*1080'

    }

  })

 node xx.js 启动服务

3: html页面播放视频

jsmpeg/jsmpeg.min.js at master · phoboslab/jsmpeg · GitHub

浏览器播放rtsp视频,基于nodeJs

<!DOCTYPE html>
<html>
<head>
    <title>JSMpeg Stream Client</title>
    <style type="text/css">

        *{
            padding: 0;
            margin: 0;
        }

        .container{
            margin: 0 auto;
        }

       canvas{
           background-color: aqua;
           display: block;
           margin: 10px 0;
       }

    </style>
    
</head>
<body>
    <div class="container">
        <canvas id="video-canvas" width="1366" height="750" style="width:980px;height:544px"></canvas>
    </div>
    
    <script type="text/javascript" src="./scripts/jsmpeg.js"></script>
    <script type="text/javascript">
        const width = document.body.clientWidth;
        const height = document.body.clientHeight;
        console.log(width,height)
        const canvas = document.getElementById('video-canvas');

        console.log(document.location.hostname)

        var urls = 'ws://localhost:9998';
        var players = new JSMpeg.Player(urls, {canvas: canvas});
    </script>
</body>
</html>

浏览器播放rtsp视频,基于nodeJs文章来源地址https://www.toymoban.com/news/detail-412629.html

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

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

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

相关文章

  • 浏览器中修改视频播放速度

    在浏览器观看视频时无法设置视频倍速,或提供的倍速不够,还想要加快播放速度。解决这个问题只需要简单几步即可随意设置播放速度。在此之前需要了解一点点的浏览器操作知识与JS语法,不会也没关系按照下面操作就可以。 这里介绍一下视频对象的一些属性和方法,如

    2023年04月10日
    浏览(53)
  • 音视频rtsp rtmp gb28181在浏览器上的按需拉流

    按需拉流是从客户视角来看待音视频的产品功能,直观,好用,为啥hls flv大行其道也是这个原因,不过上述存在的问题是延迟没法降到实时毫秒级延迟,也不能随心所欲的控制。通过一段时间的努力,结合自己闭环技术栈,实现了h264 h265 aac pcma pcmu等音视频的rtmp rtsp gb28181地

    2024年02月06日
    浏览(46)
  • 浏览器自动播放音视频-前端实现方案

    目录 前言 浏览器自动播放策略 策略详情: 实现方案  方案1: 互动后播放 方案2: 互动后出声 总结 在开发中可能有遇到这样的需求,当用户打开页面后,需要自动播放视频或音频,按理说那就打开页面时play()一下不就搞定了吗,但实际情况很明显不是,不然也没得这篇文

    2024年02月04日
    浏览(58)
  • 苹果safari浏览器播放不了video标签视频

    今天遇到了个神奇的问题,视频文件在pc端和安卓手机上播放都没问题,但是在ios上就是播放不了,大概代码如下: 前端代码: 后端代码: PC端没任何问题: IOS端播放不了: 在网上搜索了很多办法,有加前端参数配置的: 有改后端多次发送请求,分段获取数据流的: 经过

    2024年02月16日
    浏览(81)
  • 微信浏览器无法自动播放视频几种解决方式

    公司页面设计打开页面需要播放一个过场的MP4视频,在电脑上手机上都没啥事但是在手机微信浏览器里面视频是无法自动播放的。 网上教你的方式无非就是 还有什么页面window.onload的时候利用setInterval延时一小段时间的 但是这基本都是无效的 因为 微信官方已经声明了 靠谱的

    2024年02月11日
    浏览(144)
  • H.265 视频在浏览器中的播放问题探究

    🌷🍁 博主猫头虎(🐅🐾)带您 Go to New World✨🍁 🐅🐾猫头虎建议程序员必备技术栈一览表📖: 🛠️ 全栈技术 Full Stack : 📚 MERN/MEAN/MEVN Stack | 🌐 Jamstack | 🌍 GraphQL | 🔁 RESTful API | ⚡ WebSockets | 🔄 CI/CD | 🌐 Git Version Control | 🔧 DevOps 🌐 前端技术 Frontend : 🖋️ HTML CSS |

    2024年02月07日
    浏览(47)
  • chrome和edge浏览器,实现视频不静音自动播放

    chrome a.先打开网站的设置 b.找到声音设置,将 自动(默认)修改为 允许,然后刷新原网页即可。 microsoft edeg a.和chorme一样的操作,先打开设置。 b.选择cookie和网站权限,找到媒体自动播放设置后进入。 c.设置为允许即可。当然如果你只想要某些网站允许自动播放,可以在下

    2024年02月12日
    浏览(103)
  • 谷歌chrome浏览器无法自动播放video标签视频的问题

    问题根源详见: Chrome中的自动播放政策  https://developer.chrome.com/blog/autoplay/  The Autoplay Policy launched in Chrome 66 for audio and video elements and is effectively blocking roughly half of unwanted media autoplays in Chrome. For the Web Audio API, the autoplay policy launched in Chrome 71. This affects web games, some WebRTC appli

    2024年02月11日
    浏览(91)
  • uniapp中运行至微信浏览器(客户端)视频自动播放

    属性解释 v-if=\\\"isShow\\\" :用于根据 isShow 的值来判断是否显示该视频标签。如果 isShow 的值为 true ,则显示视频。 :id=\\\"list._id+\\\'_\\\'+index\\\" :为视频元素设置一个唯一的 id ,通常是使用 _id (可能是视频的唯一标识符)与 index (循环索引)的组合。 ref=\\\"videoPlayer\\\" :为视频元素设置一

    2024年02月13日
    浏览(43)
  • 【双核浏览器ChromeCore播放视频出错,重影、有声音但黑屏、缺角······】

        目录 一、【问题】 二、【解决方法】   1、找客服【首选】  2、去官网下载新版本 安装 (或者找客服要安装包)           这两天用 双核浏览器 打开哔哩哔哩播放视频时,却发现 页面很卡、视频播放不正常 (黑屏,或者加载半天也没反应,切换页面后,视频上面还

    2023年04月09日
    浏览(37)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包