史上最详细的webrtc-streamer访问摄像机视频流教程

接口返回的数据是内网ip，webrtcstreamer.js中会使用内网ip去连udp获取视频流，那我们可以在接口返回数据后，替换内网ip为外网ip，这样js代码就能成功链接udp端口了。webrtc启动时其实是会获取到当前服务器的内外网ip的，默认会使用外网ip，但是阿里云的服务器不知道为什么获取不到外网ip，使用的是内网ip。注意看，这里返回的数据candidate数据里的ip，竟然是阿里云的内网ip，在外面自然是连不上内网的udp端口的。但是绑定失败了，改成 -H 内网ip:8000 是可以的。

经过一番查找，最终决定使用B站（bilibili）开源的flvjs作为解决方案，其原理是后端用ffmpeg将rtsp视频流转换为flv，然后通过websocket传输flv视频流，然后前端通过websocket获取到视频流后，使用flvjs对视频流再一次处理并进行播放，这是一套无插件无flash免费的视频直播解决方案。后面我们又发现了通过webrtc-streamer播放视频流的方法，成功解决了延迟卡顿的问题。再次强调-H后面是你要监听的地址端口， -o 为了不转码，使用GPU运行，从而降低CPU负荷。

WebRTC是一种实时通讯协议，它允许浏览器进行音视频通话和数据传输。下面是WebRTC拉流的步骤：1.获取媒体流拉流的第一步是获取媒体流。媒体流可以是摄像头、麦克风或屏幕共享。在WebRTC中，使用getUserMedia API获取媒体流。获取到媒体流后，就可以进行处理和发送了。2.创建RTCPeerConnectionRTCPeerConnection是WebRTC中最重要的对象之一。它处理与远程对等方之间的音视频通信。

使用 webrtc 协议做直播，常见的音视频源是摄像头和麦克风，高级一点的就是桌面分享。虽然使用桌面分享可以实现推送本地流（原理就是对屏幕录制），但依赖本地播放器，并且观众可以看到主播的任何操作。使用webrtc协议，大多数情况是在浏览器中做主播端。众所周知，出于安全和隐私的原因，Web 应用程序不能直接访问用户设备上的文件。出于安全和隐私的原因，Web 应用程序不能直接访问用户设备上的文件。如果需要读取一个或多个本地文件，可以通过使用。需求，需要将本地视频无感知推送给用户，让用户感觉就像直播一样。

将下载包html文件夹下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到webrtc文件夹下。rtsp地址（html中配置）： rtsp://admin:admin@192.168.43.110:554/stream0。浏览网址（phpstudy中配置）:http://192.168.43.102/webrtc/webrtc.html。在浏览器访问127.0.0.1:8000，点击窗口可以看到本机上各窗口实时状态，点击摄像头可以显示摄像头画面。

最近遇到一个这样的需求，希望通过对海康摄像头的画面信息编辑后，视频画面在前端显示，要求视频信息播放不依赖任何第三方插件。 试了很多种办法，其实都没有实现最终的效果。这篇文章是通过webrtc进行的尝试，最后延迟大，不稳定。对于上面的需求不是一种成功的解决方案。姑且认为在通过webrtc实现这种方案的时候，遇到了一些问题，汇总记录一下，供其他场景参考。 对于这个问题，尝试过的集中办法对比如下 ...

adapter.min.js文件位置：webrtc-streamer-v0.8.6-dirty-Windows-AMD64-Debug\html\libs中。webrtcstreamer.js文件位置：webrtc-streamer-v0.8.6-dirty-Windows-AMD64-Debug\html中。测试输入流是否可以播放（这里可以播放，但有些原因嵌入到页面里也无法播放）启动完成后可以在浏览器中输入设置的ip和端口打开，看看是否启动成功。播放成功了，右键，打开编码器信息，查看是否是h264编码。

vue中使用webrtcstreamer播放rtsp流

海康威视有插件、无插件播放；webrtc直播；西瓜视频播放器；mpegts.js直播；flvjs直播。

WebRtcStreamer 是一个基于 WebRTC 协议的轻量级开源工具，可以在浏览器中直接播放 RTSP 视频流。它利用 WebRTC 的强大功能，提供低延迟的视频流播放体验，非常适合实时监控和其他视频流应用场景。本文将介绍如何在Vue.js项目中使用实现实时视频流播放，并分享相关的代码示例。注意:只支持H264格式流媒体方式文章。

我们可以利用ffmpeg+opencv实现各种各样的工具，比如把rtsp流或mp4文件转码推送到rtmp服务器的工具，该工具支持多路自定义。利用此工具搭配原来开发的一个摄像头管理系统，可以实现rtsp摄像头webrtc在线播放。1. config.json用来配置原始地址和推送地址。2.原始地址可以是rtsp流，也可以是mp4文件。3.勾选后自动转码推流，取消勾选后停止推送。

-------使用webrtc-streamer这个流媒体框架拉usb数据并直接推送webrtc流。访问网页：http://localhost:8080/ 查看状态，如果不成功检查端口是否占用。----------使用Gstresmer推rtmp流。--------直接使用srs网站推送webrtc流。----------使用FFmpeg推rtmp流。------------jswebrtc播放器。我验证的延时很大，要尝试的话具体可以参考。但我不知道选择推送那个摄像头的流。--------srs播放器。

基于WebRtc的web播放大华海康rtsp视频流（延迟一秒以内）WebRtc下载WebRtc运行Rtc测试Rtc使用html播放需要在vue上播放的可以看下一篇文章WebRtc你好！如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。基于WebRtc的web播放大华海康rtsp视频流（延迟一秒以内）基于WebRtc的web播放大华海康rtsp视频流（延迟一秒以内）我们要保证8000端口没有被其他程序占用。test.html是我创建的。

通过使用 WebRTC，我们可以利用浏览器的功能，直接从摄像头获取视频流并进行实时传输。在本文中，我们将学习如何使用 WebRTC 实现 USB 摄像头应用，以便在网页上进行视频通信。我们可以在浏览器中打开 HTML 文件，并通过点击按钮来开始和停止视频流的捕获和传输。JavaScript：我们将使用 JavaScript 编写客户端代码，以便与 WebRTC API 进行交互，并实现摄像头视频流的捕获和传输。HTML 和 CSS：我们将使用 HTML 和 CSS 构建网页界面，用于显示视频流和控制界面。

海康威视：需要申请accessKey、ip、port等，有专门的管理平台（太麻烦，没有研究，简单了解了下）。（1）支持：WebRTC、FLV、HLS的直播流地址，以及HLS、FLV、MP4等格式的点播播放地址。vue-video-player+video.js：只支持flash插件的浏览器。（2）不支持：RTSP、RTMP流地址。（2）支持：FLV格式的点播播放地址。（3）不支持：非FLV格式的地址。（1）原理：RTSP转FLV。⑤ 播放rtsp流结果如下。腾讯云TCPlayer。

获取本地设备[摄像头/屏幕/网页等]的画面，或者网络摄像头的推流地址。将这些画面通过webrtc服务器进行访问，将目标设备的视频流播放用html文件体现。后续web开发时，嵌入html文件(可多个)即可。 本地设备和webrtc运行在同一局域网，部署webrtc服务时如果使用内网穿透地址运行，可以使用外网访问。

本文简单总结了自己使用过程的一些知识点和VUE和webrtc-streamer实现rtsp实时监控的一些步骤，希望可以帮到你。