html 安装插件播放rtsp

### 如何在HTML网页中集成支持RTSP协议的视频播放器或插件

为了实现在HTML页面上播放RTSP流的功能，通常推荐的方式之一是利用特定厂商提供的Web插件来实现这一目标。对于海康威视设备来说，可以采用其官方提供的Web插件完成此操作。

#### 使用海康威视插件嵌入RTSP流媒体到HTML页面

1. **准备阶段**

确保服务器端配置允许通过网络访问摄像头或其他提供RTSP服务的硬件设备，并获取有效的RTSP URL用于后续设置[^2]。

2. **引入必要的JavaScript文件**

要在HTML文档内加载并初始化海康SDK JavaScript库，需先下载对应版本的`HCNetSDK.js`以及相关依赖项至项目目录下：

<script src="path/to/HCNetSDK.js"></script>

3. **编写HTML结构体**

创建一个容器用来承载即将显示出来的实时监控画面：

<div id="videoContainer" style="width:800px;height:600px;"></div>

4. **初始化对象与参数设定**

定义全局变量保存实例化后的控件句柄；同时指定要连接的目标摄像机IP地址、用户名密码等认证信息作为登录凭证传递给API函数调用：

var hPlayWnd;
function initPlayer() {
    try {
        var container = document.getElementById('videoContainer');
        
        // 创建新的播放窗口
        hPlayWnd = HCNetSDK.CreateWindow(container, "Real Play");

        // 设置登录参数
        let loginParam = new HCNetSDK.NET_DVR_USER_LOGIN_INFO();
        loginParam.sDeviceAddress = '192.168.1.xxx'; // 设备IP
        loginParam.wPort = 8000;                     // RTSP端口，默认8000
        loginParam.sUserName = 'admin';
        loginParam.sPassword = '';

        // 执行登录动作
        if (HCNetSDK.NET_DVR_Login_V40(loginParam)) {
            console.log("Login successful");
            
            // 开始预览
            startPreview(hPlayWnd);
        } else {
            alert("Failed to connect camera.");
        }
    } catch(e){
        console.error(e.message);
    }
}

5. **启动实时预览**

一旦成功建立了会话，则可以通过调用相应接口开启针对选定通道号的数据抓取过程，在这里假设只关注单路视频源的情况：

function startPreview(playHandle) {
    const previewInfo = new HCNetSDK.NET_DVR_PREVIEWINFO();
    previewInfo.hPlayWnd = playHandle;
    previewInfo.lChannel = 1;                        // 预览通道编号
    
    if (!HCNetSDK.NET_DVR_RealPlay_V40(previewInfo)){
        throw Error(`Start Preview Failed`);
    }
    
    console.log("Started real-time video stream...");
}

上述代码片段展示了如何基于海康威视提供的开发工具包快速搭建起一套简易版在线监看平台的核心逻辑。