Vue2 纯前端对接海康威视摄像头实时视频预览

Vue2 纯前端对接海康威视摄像头实时视频预览

实现实时对海康威视摄像头进行取流的大致思路：摄像头做端口映射，做了映射之后就可以通过 IP+ 端口的形式在浏览器中进行摄像头的实时浏览。这种是海康威视自带的方式，不能嵌入到自研系统。视频流画面实现嵌入自研系统，需要在满足以上的前提下，使用 webrtc-streamer 进行推流，然后在 Vue2 中进行接流，渲染到页面中。

一、环境准备

需要具备的前提条件，设备可在网页端进行浏览，且做以下设置。

1. 登录摄像头后台进行设置。
2. 设置视频编码格式。
3. 设置 RTSP 协议端口。

至此摄像头设置已完成，接下来需要获取摄像头设备所在 IP 的 rtsp 链接，海康摄像头的 rtsp 链接获取见官方说明：海康威视摄像头取流说明。可以使用 VLC 取流软件进行验证 rtsp 链接是否是通的 VLC 官方下载地址。

打开网络串流并输入取流地址验证连通性。

至此准备工作就完成了，接下来就是敲代码进行集成阶段了。

二、代码集成

1.1 准备 webrtcstreamer.js

粘贴即用，不用做任何修改。

var WebRtcStreamer = (function() {
    /**
     * Interface with WebRTC-streamer API
     * @constructor
     * @param {string} videoElement - id of the video element tag
     * @param {string} srvurl - url of webrtc-streamer (default is current location)
     */
    var WebRtcStreamer = function WebRtcStreamer(videoElement, srvurl) {
        if (typeof videoElement === "string") {
            this.videoElement = document.getElementById(videoElement);
        } else {
            this.videoElement = videoElement;
        }
        this. = srvurl || location. +  + .. +  + ..;
        . = ;
        . = {
            : ,
            : 
        };
        . = ;
        . = [];
    };

    .. = () {
         (!response.)  (response.);
         response;
    };

    
    .. = () {
        .();
        
         (!.) {
            .();
            (. + )
                .(.)
                .( response.())
                .( .(response, videourl, audiourl, options, localstream, prefmime))
                .( .( + error));
        }  {
            .(., videourl, audiourl, options, localstream, prefmime);
        }
    };

    
    .. = () {
         (.?.) {
            ...().( {
                track.();
                ...(track);
            });
        }
         (.) {
            (. +  + ..).(.).( .( + error));
             {
                ..();
            }  (e) {
                .( + e);
            }
            . = ;
        }
    };

    .. = () {
         lines = sdp.();
         [prefkind, prefcodec] = prefmime.().();
         currentMediaType = ;
         sdpSections = [];
         currentSection = [];
        
        lines.( {
             (line.()) {
                 (currentSection.) sdpSections.(currentSection);
                currentSection = [line];
            }  {
                currentSection.(line);
            }
        });
        sdpSections.(currentSection);
        
         processedSections = sdpSections.( {
             firstLine = section[];
             (!firstLine.( + prefkind))  section.();
            
             rtpLines = section.( line.());
             preferredPayloads = rtpLines
                .( line.().(prefcodec))
                .( line.()[].()[]);
             (preferredPayloads. === )  section.();
            
             mLine = firstLine.();
             newMLine = [...mLine.(, ), ...preferredPayloads].();
            
             filteredLines = section.( {
                 (line === firstLine)  ;
                 (line.()) {
                     preferredPayloads.( line.());
                }
                 (line.() || line.()) {
                     preferredPayloads.( line.());
                }
                 ;
            });
             [newMLine, ...filteredLines].();
        });
         processedSections.();
    };

    
    .. = () {
        . = iceServers;
        . = iceServers || { : [] };
         {
            .();
             callurl = . +  + .. +  + (videourl);
             (audiourl) callurl +=  + (audiourl);
             (options) callurl +=  + (options);
             (stream) ..(stream);
            
            .. = ;
            
            ..(.).( {
                .( + .(sessionDescription));
                .();
                .();
                 (prefmime != ) {
                    
                     [prefkind] = prefmime.();
                     (prefkind !==  && prefkind !== ) { prefkind = ; prefmime = prefkind +  + prefmime; }
                    .( + sessionDescription.);
                    sessionDescription. = .(sessionDescription., prefmime);
                    .( + sessionDescription.);
                }
                ..(sessionDescription).( {
                    (callurl, { : , : .(sessionDescription) })
                        .(.)
                        .( response.())
                        .( .( + error))
                        .( .(response))
                        .( .( + error));
                },  {
                    .( + .(error));
                });
            },  {
                ( + .(error));
            });
        }  (e) {
            .();
            ( + e);
        }
    };

    .. = () {
        (. +  + ..)
            .(.)
            .( response.())
            .( .(response))
            .( .( + error));
    };

    
    .. = () {
        .( + .(.));
        . =  (.);
         pc = .;
        pc. = .();
        pc. =  .(evt);
        pc. =  .(evt);
        pc. =  {
            .( + pc.);
             (.) {
                 (pc. === ) ... = ;
                  (pc. === ) ... = ;
                  ((pc. === ) || (pc. === )) ... = ;
                  (pc. === ) .();
            }
        };
        pc. = () {
            .( + .(evt));
            evt.. = () {
                .();
                .();
            };
            evt.. = () {
                .( + .(event.));
            };
        };
         {
             dataChannel = pc.();
            dataChannel. = () {
                .();
                .();
            };
            dataChannel. = () {
                .( + .(evt.));
            };
        }  (e) {
            .( + e);
        }
        .( + .(.));
         pc;
    };

    
    .. = () {
         (event.) {
             (..) {
                .(.., event.);
            }  {
                ..(event.);
            }
        }  {
            .();
        }
    };

    .. = () {
        (. +  + peerid, { : , : .(candidate) })
            .(.)
            .( response.())
            .( .( + response))
            .( .( + error));
    };

    
    .. = () {
        .( + .(event));
        .. = event.;
         promise = ..();
         (promise !== ) {
            promise.( {
                .( + error);
                ..(, );
            });
        }
    };

    
    .. = () {
        .( + .(dataJson));
         descr =  (dataJson);
        ..(descr).( {
            .();
             (..) {
                 candidate = ..();
                .(.., candidate);
            }
            .();
        },  {
            .( + .(error));
        });
    };

    
    .. = () {
        .( + .(dataJson));
         (dataJson) {
             ( i = ; i < dataJson.; i++) {
                 candidate =  (dataJson[i]);
                .( + .(candidate));
                ..(candidate).( {
                    .();
                },  {
                    .( + .(error));
                });
            }
            ..();
        }
    };

    
    .. = () {
        .( + status);
    };

     ;
})();
 (  !==  &&  . !== ) {
    . = ;
}
 (  !==  &&  . !== ) {
    . = ;
}