使用H5Stream实现rtsp视频流播放，在Vue项目中 (无插件、可多视频源播放、亲测可用)

本文主要介绍用H5Stream 在Web页面播放摄像头的RTSP视频流，从0到1的过程。包括WebSocket代理、h5ss.bat文件运行一会就自己卡死了、H5ss服务死掉自动定时重启的脚本等可以遇到的问题。

第一步：点击这个链接下载 h5s-r12.13.0805.21-win64-release.zip

https://www.linkingvision.cn/download/h5stream/

我下载的是这个版本找不到这个版本可以下载最新版本的h5s

如下图：

第二步：解压后修改压缩包中的文件 修改\h5s-r12.13.0805.21-win64-release\conf目录下的h5ss.conf配置文件，将strUrl的流地址修改为你自己的

如下图：

多视频时

在视频源配置中，strToken 是视频源的唯一标识，请保持多视频源时该字符串不要相同。

这里提供一个公开 RTSP在线视频流资源地址： rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4

tip:你可以使用VLC播放器测试一下流地址是否正常，如果无法播放，请更换为其他的

如下图（这步是为了测试流是否正常不做也可以玩一手自信）：

第三步：运行根目录下的regservice.bat文件，这个文件只要运行一次就行，以后不需要运行。

第四步：双击运行h5ss.bat文件，运行后不要关闭，项目存放路径不要带中文，否则会启动失败！

浏览器输入网址 http://localhost:8080/demo.html 可以查看效果（默认是8080 我修改成了8089）

效果图

接下来就是在Vue 项目中应用了

第五步：在VUE项目中的使用需要引入两个js文件 h5splayer.js，h5splayerhelper.js 并且这两个js文件必须向外暴露。

h5splayerhelper.js 文件如下

import { H5sPlayerWS, H5sPlayerHls, H5sPlayerRTC } from './h5splayer.js'
/** * Check on iOS platform
*/
function H5siOS() {var iDevices = ['iPad Simulator','iPhone Simulator','iPod Simulator','iPad','iPhone','iPod'];if (!!navigator.platform) {while (iDevices.length) {if (navigator.platform === iDevices.pop()) { return true; }}}return false;
}/** *=================H5Player Create**/function H5sPlayerCreate(conf) {var player;if (H5siOS()) {player = new H5sPlayerRTC(conf);} else {player = new H5sPlayerWS(conf);}return player;
}/** *=================H5Player Delete**/
function H5sPlayerDelete(player) {// delete player;return true;
}export { H5siOS, H5sPlayerCreate }

h5splayer.js 这个文件比较大所以这里是压缩版

function H5sPlayerWS(t) { this.sourceBuffer, this.buffer = [], this.t, this.s, this.i, this.o, this.h, this.l = 0, this.u = 0, this.S = 0, this.v = !1, this.k = !1, this.p = !1, this.H, this.P = t, console.log("Websocket Conf:", t), this.W = t.videoid, this.C = t.token, void 0 === this.W ? (this.I = t.videodom, console.log(t.token, "use dom directly")) : (this.I = document.getElementById(this.W), console.log(t.token, "use videoid")), this.s = this.I; var s = this.P.protocol + "//" + this.P.host + this.P.rootpath + "api/v1/GetImage?token=" + this.C + "&session=" + this.P.session; this.I.setAttribute("poster", s) } function H5sPlayerHls(t) { this.i, this.h, this.P = t, this.W = t.videoid, this.C = t.token, this.R, this.m = t.hlsver, void 0 === this.W ? (this.I = t.videodom, console.log(t.token, "use dom directly")) : (this.I = document.getElementById(this.W), console.log(t.token, "use videoid")), this.A = this.I, this.A.type = "application/x-mpegURL", this.T = 0, this.M = 0; var s = this.P.protocol + "//" + window.location.host + "/api/v1/GetImage?token=" + this.C + "&session=" + this.P.session; this.I.setAttribute("poster", s) } function H5sPlayerRTC(t) { this.i, this.o, this.h, this.l = 0, this.u = 0, this.S = 0, this.v = !1, this.k = !1, this.P = t, this.W = t.videoid, this.C = t.token, void 0 === this.W ? (this.I = t.videodom, console.log(t.token, "use dom directly")) : (this.I = document.getElementById(this.W), console.log(t.token, "use videoid")), this.s = this.I, this.O = null, this.J = { optional: [{ DtlsSrtpKeyAgreement: !0 }] }, this.N = { mandatory: { offerToReceiveAudio: !0, offerToReceiveVideo: !0 } }, this.g = { B: [] }, this.L = []; var s = this.P.protocol + "//" + this.P.host + this.P.rootpath + "api/v1/GetImage?token=" + this.C + "&session=" + this.P.session; this.I.setAttribute("poster", s) } function createRTCSessionDescription(t) { return console.log("createRTCSessionDescription "), new RTCSessionDescription(t) } function H5sPlayerAudio(t) { this.buffer = [], this.i, this.v = !1, this.k = !1, this.P = t, console.log("Aduio Player Conf:", t), this.C = t.token, this.D = new AudioContext } function H5sPlayerAudBack(t) { this.buffer = [], this.i, this.v = !1, this.k = !1, this.P = t, this.U = 0, console.log("Aduio Back Conf:", t), this.C = t.token, this.D = new AudioContext } function float32ToInt16(t) { for (l = t.length, buf = new Int16Array(l); l--;)buf[l] = 32767 * Math.min(1, t[l]); return buf } H5sPlayerWS.prototype.G = function () { console.log("Try Reconnect...", this.v), !0 === this.v && (console.log("Reconnect..."), this._(this.C), this.v = !1), console.log("Try Reconnect...", this.v) }, H5sPlayerWS.prototype.K = function (t) { var s; console.log("H5SWebSocketClient"); try { "http:" == this.P.protocol && (s = "undefined" != typeof MozWebSocket ? new MozWebSocket("ws://" + this.P.host + t) : new WebSocket("ws://" + this.P.host + t)), "https:" == this.P.protocol && (console.log(this.P.host), s = "undefined" != typeof MozWebSocket ? new MozWebSocket("wss://" + this.P.host + t) : new WebSocket("wss://" + this.P.host + t)), console.log(this.P.host) } catch (t) { return void alert("error") } return s }, H5sPlayerWS.prototype.V = function () { if (null !== this.sourceBuffer && void 0 !== this.sourceBuffer) { if (0 !== this.buffer.length && !this.sourceBuffer.updating) try { var t = this.buffer.shift(), s = new Uint8Array(t); this.sourceBuffer.appendBuffer(s) } catch (t) { console.log(t) } } else console.log(this.sourceBuffer, "is null or undefined") }, H5sPlayerWS.prototype.j = function () { try { var t = { cmd: "H5_KEEPALIVE", nSpeed: "1.0", nTime: "0" }; this.i.send(JSON.stringify(t)) } catch (t) { console.log(t) } }, H5sPlayerWS.prototype.q = function (t) { if (!0 !== this.k) return !1 === this.p ? (this.H = String.fromCharCode.apply(null, new Uint8Array(t.data)), this.F(this), void (this.p = !0)) : (this.buffer.push(t.data), void this.V()) }, H5sPlayerWS.prototype.F = function (t) { try { window.MediaSource = window.MediaSource || window.WebKitMediaSource, window.MediaSource || console.log("MediaSource API is not available"); var s = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'; "MediaSource" in window && MediaSource.isTypeSupported(s) ? console.log("MIME type or codec: ", s) : console.log("Unsupported MIME type or codec: ", s), t.t = new window.MediaSource, t.s.autoplay = !0, console.log(t.W); t.s.src = window.URL.createObjectURL(t.t), t.s.play(), t.t.addEventListener("sourceopen", t.X.bind(t), !1) } catch (t) { console.log(t) } }, H5sPlayerWS.prototype.X = function () { console.log("Add SourceBuffer"), this.sourceBuffer = this.t.addSourceBuffer(this.H), this.t.duration = 1 / 0, this.t.removeEventListener("sourceopen", this.X, !1), this.sourceBuffer.addEventListener("updateend", this.V.bind(this), !1) }, H5sPlayerWS.prototype._ = function (t) { this.s.autoplay = !0; var s = "api/v1/h5swsapi"; s = this.P.rootpath + s + "?token=" + t + "&session=" + this.P.session, console.log(s), this.i = this.K(s), console.log("setupWebSocket", this.i), this.i.binaryType = "arraybuffer", (this.i.Y = this).i.onmessage = this.q.bind(this), this.i.onopen = function () { console.log("wsSocket.onopen", this.Y), this.Y.o = setInterval(this.Y.Z.bind(this.Y), 1e4), this.Y.h = setInterval(this.Y.j.bind(this.Y), 1e3) }, this.i.onclose = function () { console.log("wsSocket.onclose", this.Y), !0 === this.Y.k ? console.log("wsSocket.onclose disconnect") : this.Y.v = !0, this.Y.$(this.Y), this.Y.tt(this.Y), this.Y.H = "", this.Y.p = !1 } }, H5sPlayerWS.prototype.$ = function (t) { console.log("Cleanup Source Buffer", t); try { t.sourceBuffer.removeEventListener("updateend", t.V, !1), t.sourceBuffer.abort(), document.documentMode || /Edge/.test(navigator.userAgent) ? console.log("IE or EDGE!") : t.t.removeSourceBuffer(t.sourceBuffer), t.sourceBuffer = null, t.t = null, t.buffer = [] } catch (t) { console.log(t) } }, H5sPlayerWS.prototype.tt = function (t) { console.log("CleanupWebSocket", t), clearInterval(t.h), clearInterval(t.o), t.l = 0, t.u = 0, t.S = 0 }, H5sPlayerWS.prototype.Z = function () { !0 === this.k && (console.log("CheckSourceBuffer has been disconnect", this), clearInterval(this.h), clearInterval(this.o), clearInterval(this.st)); try { if (console.log("CheckSourceBuffer", this), this.sourceBuffer.buffered.length <= 0) { if (this.l++, 8 < this.l) return console.log("CheckSourceBuffer Close 1"), void this.i.close() } else { this.l = 0; this.sourceBuffer.buffered.start(0); var t = this.sourceBuffer.buffered.end(0), s = t - this.s.currentTime; if (5 < s || s < 0) return console.log("CheckSourceBuffer Close 2", s), void this.i.close(); if (t == this.u) { if (this.S++, 3 < this.S) return console.log("CheckSourceBuffer Close 3"), void this.i.close() } else this.S = 0; this.u = t } } catch (t) { console.log(t) } }, H5sPlayerWS.prototype.connect = function () { this._(this.C), this.st = setInterval(this.G.bind(this), 3e3) }, H5sPlayerWS.prototype.disconnect = function () { console.log("disconnect", this), this.k = !0, clearInterval(this.st), null != this.i && (this.i.close(), this.i = null), console.log("disconnect", this) }, H5sPlayerWS.prototype.pause = function () { try { var t = { cmd: "H5_PAUSE", nSpeed: "1.0", nTime: "0" }; this.i.send(JSON.stringify(t)) } catch (t) { console.log(t) } }, H5sPlayerWS.prototype.resume = function () { try { var t = { cmd: "H5_RESUME", nSpeed: "1.0", nTime: "0" }; this.i.send(JSON.stringify(t)) } catch (t) { console.log(t) } }, H5sPlayerWS.prototype.seek = function (t) { try { var s = { cmd: "H5_SEEK", nSpeed: "1.0" }; s.nTime = t, this.i.send(JSON.stringify(s)) } catch (t) { console.log(t) } }, H5sPlayerWS.prototype.speed = function (t) { try { var s = { cmd: "H5_SPEED" }; s.nSpeed = t, s.nTime = 0, this.i.send(JSON.stringify(s)) } catch (t) { console.log(t) } }, H5sPlayerHls.prototype.K = function (t) { var s; console.log("H5SWebSocketClient"); try { "http:" == this.P.protocol && (s = "undefined" != typeof MozWebSocket ? new MozWebSocket("ws://" + this.P.host + t) : new WebSocket("ws://" + this.P.host + t)), "https:" == this.P.protocol && (console.log(this.P.host), s = "undefined" != typeof MozWebSocket ? new MozWebSocket("wss://" + this.P.host + t) : new WebSocket("wss://" + this.P.host + t)), console.log(this.P.host) } catch (t) { return void alert("error") } return s }, H5sPlayerHls.prototype.j = function () { try { var t = { type: "keepalive" }; this.i.send(JSON.stringify(t)) } catch (t) { console.log(t) } }, H5sPlayerHls.prototype.q = function (t) { console.log("HLS received ", t.data) }, H5sPlayerHls.prototype._ = function (t) { var s = "api/v1/h5swscmnapi"; s = this.P.rootpath + s + "?token=" + t, console.log(s), this.i = this.K(s), console.log("setupWebSocket", this.i), this.i.binaryType = "arraybuffer", (this.i.Y = this).i.onmessage = this.q.bind(this), this.i.onopen = function () { console.log("wsSocket.onopen", this.Y), this.Y.h = setInterval(this.Y.j.bind(this.Y), 1e3) }, this.i.onclose = function () { console.log("wsSocket.onclose", this.Y), this.Y.tt(this.Y) } }, H5sPlayerHls.prototype.tt = function (t) { console.log("H5sPlayerHls CleanupWebSocket", t), clearInterval(t.h) }, H5sPlayerHls.prototype.et = function () { console.log("HLS video.ended", this.A.ended), console.log("HLS video.currentTime", this.A.currentTime); var t = this.A.currentTime, s = t - this.T; console.log("HLS diff", s), 0 === s && this.M++, this.T = t, 3 < this.M && (null != this.i && (this.i.close(), this.i = null), this._(this.C), console.log("HLS reconnect"), this.A.src = "", this.T = 0, this.M = 0, this.A.src = this.P.protocol + "//" + this.P.host + this.P.rootpath + "hls/" + this.m + "/" + this.C + "/hls.m3u8", this.A.play()) }, H5sPlayerHls.prototype.connect = function () { this._(this.C), this.T = 0, this.M = 0, this.A.onended = function (t) { console.log("The End") }, this.A.onpause = function (t) { console.log("Pause") }, this.A.onplaying = function (t) { console.log("Playing") }, this.A.onseeking = function (t) { console.log("seeking") }, this.A.onvolumechange = function (t) { console.log("volumechange") }, this.A.src = this.P.protocol + "//" + this.P.host + this.P.rootpath + "hls/" + this.m + "/" + this.C + "/hls.m3u8", this.A.play(), this.R = setInterval(this.et.bind(this), 3e3) }, H5sPlayerHls.prototype.disconnect = function () { clearInterval(this.R), this.T = 0, this.M = 0, null != this.i && (this.i.close(), this.i = null), console.log("disconnect", this) }, H5sPlayerRTC.prototype.G = function () { console.log("Try Reconnect...", this.v), !0 === this.v && (console.log("Reconnect..."), this._(this.C), this.v = !1), console.log("Try Reconnect...", this.v) }, H5sPlayerRTC.prototype.K = function (t) { var s; console.log("H5SWebSocketClient"); try { "http:" == this.P.protocol && (s = "undefined" != typeof MozWebSocket ? new MozWebSocket("ws://" + this.P.host + t) : new WebSocket("ws://" + this.P.host + t)), "https:" == this.P.protocol && (console.log(this.P.host), s = "undefined" != typeof MozWebSocket ? new MozWebSocket("wss://" + this.P.host + t) : new WebSocket("wss://" + this.P.host + t)), console.log(this.P.host) } catch (t) { return void alert("error") } return s }, H5sPlayerRTC.prototype.j = function () { try { var t = { type: "keepalive" }; this.i.send(JSON.stringify(t)) } catch (t) { console.log(t) } }, H5sPlayerRTC.prototype.it = function (t) { if (t.candidate) { var s; console.log("onIceCandidate currentice", t.candidate), s = t.candidate, console.log("onIceCandidate currentice", s, JSON.stringify(s)); var e = JSON.parse(JSON.stringify(s)); e.type = "remoteice", console.log("onIceCandidate currentice new", e, JSON.stringify(e)), this.i.send(JSON.stringify(e)) } else console.log("End of candidates.") }, H5sPlayerRTC.prototype.ot = function (t) { var s; console.log("Remote track added:" + JSON.stringify(t)), s = t.nt ? t.nt[0] : t.stream; var e = this.I; e.src = URL.createObjectURL(s), e.play() }, H5sPlayerRTC.prototype.ct = function () { console.log("createPeerConnection  config: " + JSON.stringify(this.g) + " option:" + JSON.stringify(this.J)); var s = new RTCPeerConnection(this.g, this.J), e = this; return s.onicecandidate = function (t) { e.it.call(e, t) }, void 0 !== s.ht ? s.ht = function (t) { e.ot.call(e, t) } : s.onaddstream = function (t) { e.ot.call(e, t) }, s.oniceconnectionstatechange = function (t) { console.log("oniceconnectionstatechange  state: " + s.iceConnectionState) }, console.log("Created RTCPeerConnnection with config: " + JSON.stringify(this.g) + "option:" + JSON.stringify(this.J)), s }, H5sPlayerRTC.prototype.rt = function (t) { console.log("ProcessRTCOffer", t); try { this.O = this.ct(), this.L.length = 0; var s = this; this.O.setRemoteDescription(createRTCSessionDescription(t)), this.O.createAnswer(this.N).then(function (t) { console.log("Create answer:" + JSON.stringify(t)), s.O.setLocalDescription(t, function () { console.log("ProcessRTCOffer createAnswer", t), s.i.send(JSON.stringify(t)) }, function () { }) }, function (t) { alert("Create awnser error:" + JSON.stringify(t)) }) } catch (t) { this.disconnect(), alert("connect error: " + t) } }, H5sPlayerRTC.prototype.lt = function (t) { console.log("ProcessRemoteIce", t); try { var s = new RTCIceCandidate({ sdpMLineIndex: t.sdpMLineIndex, candidate: t.candidate }); console.log("ProcessRemoteIce", s), console.log("Adding ICE candidate :" + JSON.stringify(s)), this.O.addIceCandidate(s, function () { console.log("addIceCandidate OK") }, function (t) { console.log("addIceCandidate error:" + JSON.stringify(t)) }) } catch (t) { alert("connect ProcessRemoteIce error: " + t) } }, H5sPlayerRTC.prototype.q = function (t) { console.log("RTC received ", t.data); var s = JSON.parse(t.data); console.log("Get Message type ", s.type), "offer" === s.type && (console.log("Process Message type ", s.type), this.rt(s)), "remoteice" === s.type && (console.log("Process Message type ", s.type), this.lt(s)) }, H5sPlayerRTC.prototype._ = function (t) { this.s.autoplay = !0; var s = "api/v1/h5srtcapi"; s = this.P.rootpath + s + "?token=" + t, console.log(s), this.i = this.K(s), console.log("setupWebSocket", this.i), this.i.binaryType = "arraybuffer", (this.i.Y = this).i.onmessage = this.q.bind(this), this.i.onopen = function () { console.log("wsSocket.onopen", this.Y); var t = { type: "open" }; this.Y.i.send(JSON.stringify(t)), this.Y.h = setInterval(this.Y.j.bind(this.Y), 1e3) }, this.i.onclose = function () { console.log("wsSocket.onclose", this.Y), !0 === this.Y.k ? console.log("wsSocket.onclose disconnect") : this.Y.v = !0, this.Y.tt(this.Y) } }, H5sPlayerRTC.prototype.tt = function (t) { console.log("CleanupWebSocket", t), clearInterval(t.h), t.l = 0, t.u = 0, t.S = 0 }, H5sPlayerRTC.prototype.connect = function () { this._(this.C), this.st = setInterval(this.G.bind(this), 3e3) }, H5sPlayerRTC.prototype.disconnect = function () { console.log("disconnect", this), this.k = !0, clearInterval(this.st), null != this.i && (this.i.close(), this.i = null), console.log("disconnect", this) }, H5sPlayerAudio.prototype.K = function (t) { var s; console.log("H5SWebSocketClient"); try { "http:" == this.P.protocol && (s = "undefined" != typeof MozWebSocket ? new MozWebSocket("ws://" + this.P.host + t) : new WebSocket("ws://" + this.P.host + t)), "https:" == this.P.protocol && (console.log(this.P.host), s = "undefined" != typeof MozWebSocket ? new MozWebSocket("wss://" + this.P.host + t) : new WebSocket("wss://" + this.P.host + t)), console.log(this.P.host) } catch (t) { return void alert("error") } return s }, H5sPlayerAudio.prototype.j = function () { try { this.i.send("keepalive") } catch (t) { console.log(t) } }, H5sPlayerAudio.prototype.q = function (t) { for (var s = new Int16Array(t.data), e = s.length, i = this.D.createBuffer(1, e, 8e3), o = 0; o < 1; o++)for (var n = i.getChannelData(o), c = 0; c < e; c++)n[c] = s[c] / 16383.5; var h = this.D.createBufferSource(); h.buffer = i, h.connect(this.D.destination), h.start() }, H5sPlayerAudio.prototype.tt = function (t) { console.log("CleanupWebSocket", t), clearInterval(t.h) }, H5sPlayerAudio.prototype._ = function (t) { var s = "api/v1/h5saudapi"; s = this.P.rootpath + s + "?token=" + t + "&session=" + this.P.session, console.log(s), this.i = this.K(s), console.log("setupWebSocket for audio", this.i), this.i.binaryType = "arraybuffer", (this.i.Y = this).i.onmessage = this.q.bind(this), this.i.onopen = function () { console.log("wsSocket.onopen", this.Y), this.Y.h = setInterval(this.Y.j.bind(this.Y), 1e3) }, this.i.onclose = function () { console.log("wsSocket.onclose", this.Y), this.Y.tt(this.Y) } }, H5sPlayerAudio.prototype.connect = function () { this._(this.C) }, H5sPlayerAudio.prototype.disconnect = function () { console.log("disconnect", this), null != this.i && (this.i.close(), this.i = null), console.log("disconnect", this) }, H5sPlayerAudBack.prototype.K = function (t) { var s; console.log("H5SWebSocketClient"); try { "http:" == this.P.protocol && (s = "undefined" != typeof MozWebSocket ? new MozWebSocket("ws://" + this.P.host + t) : new WebSocket("ws://" + this.P.host + t)), "https:" == this.P.protocol && (console.log(this.P.host), s = "undefined" != typeof MozWebSocket ? new MozWebSocket("wss://" + this.P.host + t) : new WebSocket("wss://" + this.P.host + t)), console.log(this.P.host) } catch (t) { return void alert("error") } return s }, H5sPlayerAudBack.prototype.j = function () { try { this.i.send("keepalive") } catch (t) { console.log(t) } }, H5sPlayerAudBack.prototype.q = function (t) { }, H5sPlayerAudBack.prototype.tt = function (t) { console.log("CleanupWebSocket", t), clearInterval(t.h) }, H5sPlayerAudBack.prototype.at = function (t) { console.log("wsSocket.onopen", this); try { navigator.getUserMedia({ s: !1, ut: !0 }, this.dt.bind(this)) } catch (t) { return void alert("Audio intecomm error", t) } }, H5sPlayerAudBack.prototype._ = function (t) { var s = "api/v1/h5saudbackapi"; s = this.P.rootpath + s + "?token=" + t + "&session=" + this.P.session, console.log(s), this.i = this.K(s), console.log("setupWebSocket for audio back", this.i), this.i.binaryType = "arraybuffer", (this.i.Y = this).i.onmessage = this.q.bind(this), this.i.onopen = this.at.bind(this), this.i.onclose = function () { console.log("wsSocket.onclose", this.Y), this.Y.tt(this.Y) } }, H5sPlayerAudBack.prototype.ft = function (t) { var s = float32ToInt16(t.inputBuffer.getChannelData(0)); this.i.send(s) }, H5sPlayerAudBack.prototype.dt = function (t) { try { var s = this.D.createMediaStreamSource(t); console.log("sampleRate", this.D.sampleRate); var e = this.D.createScriptProcessor(256, 1, 1); s.connect(e), e.connect(this.D.destination), e.onaudioprocess = this.ft.bind(this) } catch (t) { return void alert("Audio intecomm error", t) } }, H5sPlayerAudBack.prototype.connect = function () { this._(this.C) }, H5sPlayerAudBack.prototype.disconnect = function () { console.log("disconnect", this), null != this.i && (this.i.close(), this.i = null), console.log("disconnect", this) };export { H5sPlayerWS, H5sPlayerHls, H5sPlayerRTC }

第六步：Vue中写入代码代码中的host端口目前是写死的 这个端口需要和第4步骤h5ss.conf文件中的nHTTPPort保持一致源码如下

<template><div class="h5videowrapper h5container"><video class="h5video" id='h5sVideoid'></video></div>
</template><script>
import { H5sPlayerWS, H5sPlayerHls, H5sPlayerRTC } from '../../store/camera/h5splayer.js'
import { H5siOS, H5sPlayerCreate } from '../../store/camera/h5splayerhelper.js'
export default {name: 'liveplayer',props: ['h5id', 'h5videoid'],data() {return {videoid: this.h5videoid,h5handler: undefined,currtoken: undefined,ptzshow: false,proto: 'WS'}},beforeDestroy() {if (this.h5handler != undefined) {this.h5handler.disconnect();delete this.h5handler;this.h5handler = undefined;}this.currtoken = undefined;},mounted() {this.PlayVideo('token1');},methods: {PlayVideo(token) {if (this.h5handler != undefined) {this.h5handler.disconnect();delete this.h5handler;this.h5handler = undefined;}this.currtoken = token;var root = process.env.API_ROOT;var wsroot = process.env.WS_HOST_ROOT;if (root == undefined) {root = window.location.protocol + '//' + window.location.host + window.location.pathname;}if (wsroot == undefined) {wsroot = window.location.host;}var conf1 = {videoid: 'h5sVideoid',protocol: window.location.protocol, //'http:' or 'https:'// host: window.location.host, //'localhost:8080'host: 'localhost:8089', //'localhost:8080'rootpath: '/', // '/' or window.location.pathnametoken: token,hlsver: 'v1', //v1 is for ts, v2 is for fmp4session: 'c1782caf-b670-42d8-ba90-2244d0b0ee83' //session got from login};this.h5handler = H5sPlayerCreate(conf1);this.h5handler.connect();},CloseVideo(event) {var $container = $("#" + this.h5id);var $controls = $container.children(".h5controls");var $rtcbutton = $controls.children(".rtcbutton");if (this.h5handler != undefined) {$rtcbutton.css("display", "none");this.h5handler.disconnect();delete this.h5handler;this.h5handler = undefined;this.$Notice.info({title: "Stop successfully"})}}}
}
</script><style scoped>
.h5video {width: 80%;height: 50%;background: black;
}
</style>

运行Vue项目，就可以看到视频了！

效果如下

下面是我在实际应用遇到的问题和解决方法

（1）本地测试的时候一切正常，部署到线上的时候链接报错：WebSocket连接错误Error during WebSocket handshake Unexpected response code 404

当项目使用域名+端口号的方式访问的时候ws连接正常，而通过nginx反向代理后ws连接就不正常了

解决方案：

nginx.conf文件里增加下面的代码

proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";proxy_connect_timeout 4s;
proxy_read_timeout 7200s;
proxy_send_timeout 12s;

具体要根据业务来调整。最终的配置如下：

（2）h5ss.bat文件运行一会就自己卡死了或者 H5ss服务死掉的情况

原因： 没有买商业版的就会有这个限制

解决方案：写一个隔半小时重启h5ss服务的脚本并让脚本和exe程序后台运行不弹出黑框

这块是我同事（柯老板）帮忙写出来的非常厉害

下面是源码可根据重启时间和文件路径自行调整 3个脚本缺一不可

放在h5s-r12.13.0805.21-win64-release 文件夹里 双击testVB.vbs 就自动后台运行了