摄像头配置（海康摄像头为例）

摄像头视频编码应改成H264格式

webrtc-streamer下载

webrtc-streamer下载地址

下载后解压出来双击运行，端口默认8000

VUE2项目引入文件

在项目静态文件“public”中需引入两个js文件“webrtcstreamer.js”与“adapter.min.js”

“webrtcstreamer.js”在上面下载的“html”文件夹内

“adapter.min.js”上面下载的“html/bils”文件夹内

两个js文件放入项目中，在html文件引入

 组件对接

定义容器

<code> <section>

<video

muted

autoplay

controls

width="100%"code>

height="10vh"code>

ref="video"code>

id="video"code>

></video>

</section> 定义data变量

初始化摄像头

<code> //192.168.3.11:8000是webrtc-streamer运行的ip和端口

//rtsp地址根据实际来查看

//此项目是后台返回监控信息，包括账号密码和摄像头ip地址

initVideo(item) {

this.webRtcServer = new WebRtcStreamer(

"video",

location.protocol + "//192.168.3.11:8000"

);

//需要查看的rtsp地址

this.webRtcServer.connect(

`rtsp://${item.account}:${item.password}@${item.ip}:554/h264/ch1/main/`

);

}