rtsp在网页上显示(webrtc-stream)

一:windos 平台

        1:下载已经编译好的windos平台程序

        Releases · mpromonet/webrtc-streamer (github.com)

        or

【免费】webrtc-streamerv0.8.6一款werbrtc服务器(windos版本),可以直接将rtsp流拉到网页上显示资源-优快云文库

       2:修改config.json,按照config.json里面的格式增加自己的rtsp地址,其他的可以都删掉

       3:打开cmd,运行 webrtc-streamer -C config.json

       4:打开浏览器输入IP:8000,IP为运行webrtc-streamer的主机地址,例如:192.168.1.100:8000

在打开的网页上选择第2步里填入的rtsp 的别名,即可在网页上拉流rtsp显示

二:嵌入式平台

        1:下载源码

          Releases · mpromonet/webrtc-streamer (github.com)

        2:交叉编译

                未完待续

使用webrtc-streamer实现rtsp在公网访问视频的步骤如下: 1. 首先,确保你的服务端已经安装了webrtc-streamer。如果没有安装,你可以请服务端同事帮忙安装,或者自己尝试安装。你可以从webrtc-streamer的git仓库下载压缩包,并解压提取出libs/adapter.min.js和webrtcstreamer.js两个文件。 2. 将adapter.min.js和webrtcstreamer.js文件拷贝到你的项目中。你可以将它们放在public文件夹下,并在index.html中引入这两个文件。 3. 在前端代码中,你需要使用webrtc-streamer提供的API来实现rtsp在公网访问视频。具体的实现步骤如下: - 首先,创建一个video元素,用于显示视频。你可以在HTML中添加一个video标签,并为其指定一个id,例如: ```html <video id="videoElement" autoplay></video> ``` - 在JavaScript代码中,使用webrtc-streamer的API来获取视频并将其显示在video元素中。你可以使用webrtcstreamer.js中提供的`WebRTCStreamer`对象来实现这一功能。具体的代码如下: ```javascript const videoElement = document.getElementById('videoElement'); const streamer = new WebRTCStreamer(); // 设置视频的URL,替换成你的rtsp的URL const streamUrl = 'your_rtsp_stream_url'; streamer.setStreamUrl(streamUrl); // 将视频绑定到video元素 streamer.attachToElement(videoElement); // 开始播放视频 streamer.play(); ``` - 替换`your_rtsp_stream_url`为你的rtsp的URL。确保URL的格式正确,并且可以在公网中访问到。 4. 保存并运行你的前端代码。视频应该会在video元素中显示出来,并可以在公网中访问到。 请注意,使用webrtc-streamer实现rtsp在公网访问视频需要在服务端和前端都进行相应的配置和代码编写。以上步骤仅涉及前端部分的实现,你还需要确保服务端的配置和网络环境的支持。 #### 引用[.reference_title] - *1* *2* *3* [记浏览器使用webrtc-streamer 播放rtsp ](https://blog.youkuaiyun.com/weixin_41838201/article/details/125783057)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值