Vue前端播放rtsp视频流（vue+webrtc-streamer）

文章目录

Vue本身不能直接播放RTSP视频流，因为浏览器不支持直接播放RTSP格式的视频流。为了在Vue项目中播放RTSP视频流，通常需要使用一些转码工具或服务器将RTSP流转码为浏览器支持的格式，如

HLS

或

FLV

，然后再通过相应的播放器进行播放。

我是用的是

vue+webrtc-streamer

播放rtsp视频流

1 webrtc-streamer作用是什么

WebRTC (Web Real-Time Communications) 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。WebRTC 包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议成为可能。

简单的说：WebRTC 是一种 HTML5规范，他无需在浏览器中安装任何插件可以在网页内进行实时通信工作的开源技术，它直接在浏览器和设备之间添加实时媒体通信。

webrtc-streamer

是一个使用简单机制通过 WebRTC 流式传输视频捕获设备和 RTSP 源的项目,它内置了一个小型的 HTTP server 来对 WebRTC需要的相关接口提供支持。

2 安装webrtc-streamer

https://github.com/mpromonet/webrtc-streamer/releases

windows的下这个即可

下载好的安装包解压，双击根目录下的

webrtc-streamer.exe

启动

检查是否启动成功，在浏览器输入http://127.0.0.1:8000/，如果有显示自己的桌面，则启动成功。

由于 webrtc 的核心库还不支持

H265

的视频编码，所以要配置设备视频编码方式为

H264

3 项目中引入js文件

下载好的安装包解压，进入html文件夹，将

webrtcstreamer.js

和libs文件夹下的

adapter.min.js

复制到vue项目。也可放在静态资源static目录下。

4 vue视频流组件

<template><div class="home"><video id="video" autoplay width="600" height="400"></video></div></template><script>import"./js/webrtcstreamer.js"//此处两个js也可全局引用import"./js/adapter.min.js"exportdefault{
    name:"HomeView",data(){return{
            webRtcServer:null,
            webRtcServer1:null};},mounted(){},
    methods:{playVideo(){this.webRtcServer =newWebRtcStreamer("video",'http://192.168.8.1:8000'//本机ip+端口8000);this.webRtcServer.connect("rtsp://10.100.175.201:32017/live/0/xxxxxxxxxxxxxxxxxxx"//这是填自己的rtsp流);}},beforeDestroy(){this.webRtcServer.disconnect();this.webRtcServer =null;}};</script>