LM视频中间件H5实时视频打开API-Toy模板网

这篇具有很好参考价值的文章主要介绍了LM视频中间件H5实时视频打开API。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

概览
LM视频中间件支持对接入的海康、大华、GB28181、RTSP、ISUP/EHOME等设备码流进行转换，提供HLS、Websocket-flv, http-flv, webrtc,rtsp流输出。

视频开放api,视频中间件,无插件视频,安防视频中间件,音视频,中间件,视频

视频编码支持：

H265
H264

音频编码支持：

PCMA
PCMU
G722
AAC
实时视频的API调用也比较简单，本文中只针对API调用后需要对URL进行拼接做下说明。

说明：
因目前H5浏览器没有支持H265的显示播放，业界现在H265的播放都是采用修改FLV格式的视频编码，浏览器在收到H265时，采用WASM的方式进行软解码播放，在多路播放时稳定性还待观察，同时对电脑的要求都比较高，并且在移动环境下支持的也不友好，因此我们暂时使用的是服务器转码方案，这样对前端的开发门槛比较低

API接口说明
获取实时流视频地址API中 type 参数根据采用H5播放器自行选择。

视频开放api,视频中间件,无插件视频,安防视频中间件,音视频,中间件,视频
参数 subString 默认为false，获取主码流的播放地址，true为获取辅码流播放地址，辅码流的占用带宽小，但是视频分辨率比主码流低

视频返回的参数 url 在请求不同的视频协议地址时，拼接规则有所不同，具体参见下表：

视频开放api,视频中间件,无插件视频,安防视频中间件,音视频,中间件,视频

ip : LM视频中间件访问地址
port : LM视频中间件访问端口
url : 获取实时流视频地址API返回的参数 url

注意

辅码流只支持海康、大华和ISUP(EHOME)协议接入的设备
获取视频地址API返回的参数 ssid 只有是请求码流类型为RTSP时才有效
获取视频地址API返回的参数 expires 数值时指，应用系统在请求视频地址后，却不进行播放，该地址保留的最长时间，若已通过此地址连接观看视频，此参数失效

H5播放示例
相关播放js文件可咨询商务人员获取https://houhangkeji.com/

HTTP-FLV& Websocket-flv
打开视频

startVideo(data, num) {
    let play1 = document.getElementById(num);
    data.flvPlayer = flvjs.createPlayer({
        type: 'flv',
        isLive: true,
        hasAudio: true,
        hasVideo: true,
        url: data.url
    },
    {
        enableWorker:true,
        stashInitialSize: 64,
        enableStashBuffer: false
    });
    data.flvPlayer.attachMediaElement(play1);
    data.flvPlayer.load();
    data.flvPlayer.on('error', err => {
        console.log(err);
    });
    data.flvPlayer.play();
    this.selectVideo(num+1);
    data.timerId = setInterval(()=> {
        if(!play1.buffered.length){
            return
        }
    
        var diff = parseFloat(play1.buffered.end(0) - play1.currentTime);   
        if(diff >= 2) {
            play1.playbackRate = 2;
        }
        else if(diff >= 1.5 && diff < 2) {
            play1.playbackRate = 1.3;
        }
        else if (diff < 1.5 && diff >= 1.2){
            play1.playbackRate = 1.2;
        }
        else if (diff < 1.2 && diff >= 0.5){
            play1.playbackRate = 1.1;
        }
        else if(diff < 0.5 && diff >= 0.2){
            play1.playbackRate = 1;
        }
        else if(diff < 0.2){
            play1.playbackRate = 0.5;
        }
    },500);
}

关闭视频

closeVideo_flv(item,index) {
    let play = document.getElementById(index);
    let e = this.outside[index] ? this.outside[index].flvPlayer : null;
    if (!e) {
        return;
    }
    this.selectVideo(index);
    e.pause();
    e.unload();
    e.detachMediaElement();
    e.destroy();
    clearInterval(this.outside[index].timerId);
    this.outside[index].flvPlayer = null;
}

WEBRTC

打开视频

startVideo_webrtc(data, num) {
    let play1 = document.getElementById(num);
    data.flvPlayer = new JSWebrtc_Player(
        data.url, 
        { 
            video: play1, 
            autoplay: true, 
            protocol:window.location.protocol, 
            hostname: window.location.hostname, 
            port:window.location.port
        });
    this.selectVideo(num+1);
}

关闭视频

closeVideo_webrtc(item,index) {
    let play = document.getElementById(index);
    let o = this.outside[index]
    if(o.flvPlayer){
        o.flvPlayer.destroy();

        this.selectVideo(index);
    }
    o.url = null;
    this.outside[index].flvPlayer = null;
}

HLS

打开视频

startVideo_hls(data, num) {
    let video = document.getElementById(num);
    data.html = video.outerHTML;

    var hls = videojs(video);
    hls.src({ type: "application/x-mpegURL", src: data.url });
    hls.load(data.url);
    hls.play();

    data.flvPlayer = hls;
    this.selectVideo(num+1);
}

关闭视频

closeVideo_hls(item, index){
    let e = this.outside[index] ? this.outside[index].flvPlayer : null;
    if (!e) {
        return;
    }
    this.selectVideo(index);
    e.dispose();
    var myVideoDiv = document.getElementById(this.getId(index));
    myVideoDiv.insertAdjacentHTML('afterbegin', this.outside[index].html);
    this.outside[index].flvPlayer = null;
}