WebRTC实现rtsp流在浏览器中播放
Posted 云岫成诗.
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了WebRTC实现rtsp流在浏览器中播放相关的知识，希望对你有一定的参考价值。
一般诸如海康威视，大华等监控视频流都是推送的rtsp或rtmp流，这些都是无法在浏览器中直接播放的。因此出现了以下几种方法实现在浏览器端播放。
处理该问题的主流方法大概分为以下几种
PS（由于浏览器的更迭以及Flash不在被支持，所以依赖IE和Flash的方法如使用IE浏览器配合VLC插件，通过video.js配合Flash实现网页播放此处不作介绍）
- 通过nginx+ffmpeg+nginx-http-flv-module模块将rtsp流转为flv格式使用flv.js直接播放
- 通过webrtc-streamer将rtsp转为WebRTC流播放
- 其他一些插件
通过WebRTC实现播放
- webrtc-streamer插件开源地址：https://github.com/mpromonet/webrtc-streamer
- 通过git clone命令下载对应系统webrtc
- 解压后进入文件目录下，通过CMD打开，输入webrtc-streamer.exe -H 0.0.0.0:9001启动服务（可以指定ip地址和端口号，远程访问注意防火墙）
- 启动成功后可输入以下地址访问页面预览，注意，如果绑定的不是0.0.0.0请输入对应ip
http://127.0.0.1:9001/webrtcstreamer.html?video=你的rtsp流地址 - 如果无法查看视频（确保rtsp流地址正确的情况下，不确定可以先用vlc访问一下），可能是权限问题，尝试用管理员身份打开CMD
通过代码实现
<html>
<head>
<script src="js/adapter.min.js" ></script>
<script src="js/webrtcstreamer.js" ></script>
<script>
var webRtcServer= null;
window.onload= function()
webRtcServer= new WebRtcStreamer("video","http://ip地址:9001");
webRtcServer.connect("rtsp地址");
window.onbeforeunload = function() webRtcServer.disconnect();
</script>
</head>
<body class="body">
<video id="video" autoplay muted ></video>
</body>
<style>
.body
width:100%;
height:100%;
padding:0;
margin:0;
#video
padding:0;
width:720px;
height:400px;
</style>
</html>
webrtc拉流在srs中的配置
参考技术A 配置文件...
http_api
enabled on;
listen 1985;
stats
network 0;
rtc_server
enabled on;
# Listen at udp://8000
listen 8000;
candidate 192.168.8.97;
vhost __defaultVhost__
rtc
enabled on;
rtmp_to_rtc on;
.....
其实webrtc拉流，需要用到两个端口，一个是1985，一个是8000(udp)
如果在配置文件中1985改成了1986，则
http://192.168.8.97:8080/players/rtc_player.html，中拉流地址：webrtc://192.168.8.97:1986/live/stream
真正的webrtc的流程：
1)、webrtc客户端通过API接口/rtc/v1/play/通知SRS服务端创建WebRTC拉流连接，访问的是以下 http://192.168.8.97:1986/rtc/v1/play/
2)、rtc交互过程，在日志中会有记录，
RTC remote offer: 客户端请求
RTC local answer: ...... udp 2130706431 192.168.8.97 8000 typ host generation 0\r\n
返回给客户端的具体地址与端口号 (8000就是前面配置的端口)
特别注意，在docker中配置，在端口映射时，特别要注意，这个8000端口号，一定要与外网的端口号一样。比如同时改成30049，才能正常拉流。
参考：
https://blog.csdn.net/adkada1/article/details/120590921
https://blog.csdn.net/adkada1/article/details/120590944
https://blog.csdn.net/adkada1/article/details/120590949
以上是关于WebRTC实现rtsp流在浏览器中播放的主要内容，如果未能解决你的问题，请参考以下文章