web显示海康摄像头

前言

最近因为项目需求，需要在web界面显示萤石云摄像头，搜索了很多种方法，其中最简单的就是注册萤石云调用萤石云接口，但是因为延迟较大并且摄像头多的情况下需要收费，需要换种方式，经过大量搜索后发现webrtc-streamer插件可以将rtsp视频解码成vedio格式并且web端可以直接显示、延迟也比较低，翻找了很多使用webrtc-streamer插件的博客都是用js写的项目，ts版本我找了很多博客都没有找到，本前端小白在ts项目不太会引入js脚本，直接import不知为何调用不了js的函数在尝试很多方法后最终解决这个问题故做此纪录，以防之后再碰到此类情况忘记怎么引入js脚本。

实现过程（本项目是react和typescript）

1.下载VLC player选择媒体、网络串流输入 rtsp://admin:{自己的密码}@{自己的ip}/h264/ch1/main/av_stream 测试是否可以播放监控画面。
2. 去github下载大佬的webrtc-streamer-v0.8.2-dirty-Windows-AMD64-Release.tar.gz
，也可以github搜索webrtc-streamer查看readme和linux/mac版本插件。
3. 在webrtc-streamer.exe文件夹下cmd输入 webrtc-streamer.exe -H 0.0.0.0:9001 -o 启动软件，然后打开谷歌输入 127.0.0.1:9001/webrtcstreamer.html?video=rtsp://admin:{自己摄像头密码}@{自己摄像头ip}:554/h264/ch1/main/av_stream 测试是否可以看到监控画面，如果长时间转圈圈看看监控编码格式，这个插件只支持解码 H264 格式。
4. 复制webrtc-streamer.exe到前端项目的自定义文件夹下，方便git提交，可以随便放，复制webrtcstreamer.js脚本，目前我只用到这一个，看到别人发的还需要引入adapter.min.js，我没用到并且可以正常看到监控画面故没引入此js。
5. 编写函数式组件 Vediocomponent.tsx 代码引入下载的webrtcstreamer.js脚本，调用这个脚本内函数（当时卡了我好久，直接import脚本之后new webRtcServer 不直到为什么不调用webRtcServer 的构造函数，这种方法可以正常使用js函数）。

import React, {useEffect} from 'react';

const WebRtcComponent: React.FC = () => {
    useEffect(() => {
        const script = document.createElement('script');
        script.src = '/WebRtcStreamer/webrtcstreamer.js';//更换到自己放webrtcstreamer.js位置
        script.async = true;

        script.onload = () => {
            const webRtcServer = new (window as any).WebRtcStreamer("video", "http://127.0.0.1:9001");
            webRtcServer.connect("rtsp://admin:{自己摄像头密码}@{自己的ip}:554/h264/ch1/main/av_stream");
        };

        document.body.appendChild(script);

        return () => {
            document.body.removeChild(script);
        };
    }, []);

    return (
        <div className="body">
            <video id="video" autoPlay muted style={{height: '100%', width: '100%'}}></video>
        </div>
    );
};

export default WebRtcComponent;

6.在webrtc-streamer.exe文件夹下cmd输入 webrtc-streamer.exe -H 0.0.0.0:9001 -o 启动软件, 然后在需要使用地方引入 ”< VedioComponent>“ 组件即可显示监控画面。

实现效果图