基于React接入

萤石云

直播和回放均使用url拼接播放，所需必要参数：摄像头序列号、通道号和accessToken（回放情况下需要：开始时间、结束时间），参数均通过后台返回取得

//src\pages\monitor\video\index.tsx 230行

const url = 'https://open.ys7.com/ezopen/h5/iframe?url=ezopen://open.ys7.com/'
      + deviceSerial + '/' + channelNo + '.local.rec?begin=' + dateBegin + '&end=' + dateEnd + "&autoplay=1&accessToken=" + thistoken;

大华

通过引入ImouPlayer插件初始化div播放，所需必要参数：摄像头序列号、通道号和kitToken（回放情况下需要：开始时间、结束时间），参数均通过后台返回取得

//ImouPlayer引入 src\pages\monitor\video\index.tsx 79行

initPlayer = () => {
return new Promise(((resolve, reject) => {
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = '/Player/imouplayer.js';
    script.async = true;
    document.head.appendChild(script);
    window.init = () => {
    resolve(window.ImouPlayer);
    }
}))
}

src\pages\monitor\video\index.tsx 263行

//播放器初始化 
dahuaBackPlayer = new window.ImouPlayer('#playerBack');
dahuaBackPlayer.setup({
    src: [
    {
        url: 'imou://open.lechange.com/' + deviceSerial + '/' + channelNo + '/2?recordType=localRecord&streamId=1&beginTime=' + dateDHBegin + '&endTime=' + dateDHEnd, 
        kitToken: thisNewToken,
    }
    ], // 播放地址
    width: "100%", // 播放器宽度
    height: 380, // 播放器高度
    poster: '', // 封面图url
    autoplay: true, // 是否自动播放
    controls: true, // 是否展示控制栏
});

海康

海康采取接入萤石云官网的模式，与萤石云摄像头引入方式一致。