网页中播放RTSP(5) WebSocket播放视频

WebSocket播放视频是结合MediaSource的

总结：通过WebSocket获取视频流，提供给MediaSource，MediaSource结合video标签，播放视频。

这一套完全就是基于浏览器支持MediaSourceExtension(MSE)的，而我最终的目的是在unity3d里面播放视频，加入uinty3d不支持MediaSource和video标签，怎么折腾都没用。可能最后还会变成在uinty里面调要能够网页上的video来播放视频，调整一下窗口的大小。

在AppStore里面找了一下，没找到合适的资料，有个Embedded Browser说是完全支持HTML5包括视频，但是它的平台是windows,ios,linux，其实就是一个浏览器嵌入到unity程序中，没有webgl，而webgl其实就在浏览器里面了。这个在淘宝上有，3.0还买到35或者80。

接下来三个方向 1.WebRTC 2.Unity调用浏览器 3.解码播放

参考：MediaSource

1.理解并修改h5splayer.js

将文件和github上面的h5media.js以及h5sevent.js比较，将混淆后的变量名和方法名还原回去

function H5sPlayerWS(conf) {var s;this.sourceBuffer, this.buffer = [], this._mediaSource, this.video, this.wsSocket, this.checkSourceBufferTimerId, this.keepAliveTimerId, this.h = 0, this.l = 0,this.u = 0, this.S = false, this.v = false, this.p = false, this.strCodec, this._conf = conf, console.log("Websocket Conf:",conf), this._videoId = conf.videoid, this._pbconf = conf.pbconf, this._token = conf.token, void 0 === this._videoId ? (this._videoElemet = conf.videodom,console.log(conf.token, "use dom directly")) : (this._videoElemet = document.getElementById(this._videoId), console.log(conf.token,"use videoid")), this.video = this._videoElemet, null != this._pbconf && "false" == this._pbconf.showposter || (s = this._conf.protocol + "//" + this._conf.host + this._conf.rootpath + "api/v1/GetImage?token=" + this._token + "&session=" + this._conf.session,console.log(conf.token, "connect src"), this._videoElemet.setAttribute("poster", s))
}
function H5sPlayerRTC(conf) {var s;this.wsSocket, this.checkSourceBufferTimerId, this.keepAliveTimerId, this.h = 0, this.l = 0, this.u = 0, this.S = false, this.v = false, this._conf = conf,this._videoId = conf.videoid, this._pbconf = conf.pbconf, this._token = conf.token, void 0 === this._videoId ? (this._videoElemet = conf.videodom,console.log(conf.token, "use dom directly")) : (this._videoElemet = document.getElementById(this._videoId), console.log(conf.token,"use videoid")), this.video = this._videoElemet, this.R = null, this.I = {optional: [{DtlsSrtpKeyAgreement: true}]},this.A = {mandatory: {offerToReceiveAudio: true, offerToReceiveVideo: true}},this.T = {M: []},this.O = [], null != this._pbconf && "false" == this._pbconf.showposter || (s = this._conf.protocol + "//" + this._conf.host + this._conf.rootpath + "api/v1/GetImage?token=" + this._token + "&session=" + this._conf.session,console.log("connect src", conf.token), this._videoElemet.setAttribute("poster", s))
}
function createRTCSessionDescription(t) {return console.log("createRTCSessionDescription "), new RTCSessionDescription(t)
}
function H5sPlayerHls(t) {this.wsSocket, this.keepAliveTimerId, this._conf = t, this._videoId = t.videoid, this._token = t.token, this.J, this.N = t.hlsver, void 0 === this._videoId ? (this._videoElemet = t.videodom,console.log(t.token, "use dom directly")) : (this._videoElemet = document.getElementById(this._videoId), console.log(t.token,"use videoid")), this.g = this._videoElemet, this.g.type = "application/x-mpegURL", this.B = 0, this.U = 0;var s = this._conf.protocol + "//" + window.location.host + "/api/v1/GetImage?token=" + this._token + "&session=" + this._conf.session;this._videoElemet.setAttribute("poster", s)
}
function H5sPlayerAudio(t) {this.buffer = [], this.wsSocket, this.S = false, this.v = false, this._conf = t, console.log("Aduio Player Conf:",t), this._token = t.token, this._ = new AudioContext
}
function H5sPlayerAudBack(t) {this.buffer = [], this.wsSocket, this.S = false, this.v = false, this._conf = t, this.L = 0, this.D = 48e3, this.G = false,console.log("Aduio Back Conf:", t), this._token = t.token, this._ = new AudioContext, console.log("sampleRate",this._.sampleRate), this.K()
}
function float32ToInt16(t) {for (var s = t.length, e = new Int16Array(s); s--;) {e[s] = 32767 * Math.min(1, t[s]);}return e
}
H5sPlayerWS.prototype.reconnectFunction = function () {console.error('reconnectFunction'+new Date());true === this.S && (console.log("Reconnect..."), this.setupWebSocket(this._token), this.S = false)
},H5sPlayerWS.prototype.getWebSocket = function (url) {console.log('>> H5sPlayerWS.prototype.getWebSocket');var ws;try {"http:" == this._conf.protocol && (ws = "undefined" != typeof MozWebSocket ? new MozWebSocket("ws://" + this._conf.host + url) : new WebSocket("ws://" + this._conf.host + url)),"https:" == this._conf.protocol && (console.log(this._conf.host), ws = "undefined" != typeof MozWebSocket ? new MozWebSocket("wss://" + this._conf.host + url) : new WebSocket("wss://" + this._conf.host + url)),console.log(this._conf.host)}catch (err) {return void alert("error")}return ws;},H5sPlayerWS.prototype.readFromBuffer = function () {//console.error('F');//console.log(this.sourceBuffer);if (null !== this.sourceBuffer && void 0 !== this.sourceBuffer) {if (0 !== this.buffer.length && !this.sourceBuffer.updating) {try {var first = this.buffer.shift(), buff = new Uint8Array(first);this.sourceBuffer.appendBuffer(buff)}catch (err) {console.log(err)}}}else {console.log(this.sourceBuffer, "is null or undefined");}//console.log(this.sourceBuffer);},H5sPlayerWS.prototype.keepAlive = function () {//console.error('X keepaliveTimer');//console.log(this);//console.log(this.wsSocket);try {var t = {cmd: "H5_KEEPALIVE"};this.wsSocket.send(JSON.stringify(t))}catch (err) {console.log(err)}},//获取websocket数据H5sPlayerWS.prototype.onReceived = function (msg) {//console.log('>> H5sPlayerWS.prototype.onReceived');//console.log(msg.data);//var ttt=String.fromCharCode.apply(null, new Uint8Array(msg.data));//console.log(ttt);return msg.data, ArrayBuffer, "string" == typeof msg.data ? (console.log("string"), void (null != this._pbconf && null != this._pbconf.callback && this._pbconf.callback(msg.data,this._pbconf.userdata))) : true !== this.v ? false === this.p ? (this.strCodec = String.fromCharCode.apply(null, new Uint8Array(msg.data)),this.initMediaSource(this), void (this.p = true)) : (this.buffer.push(msg.data), void this.readFromBuffer()) : void 0;},H5sPlayerWS.prototype.initMediaSource = function (player) {console.log('initMediaSource');try {window.MediaSource = window.MediaSource || window.WebKitMediaSource, window.MediaSource || console.log("MediaSource API is not available");var codec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';"MediaSource" in window && MediaSource.isTypeSupported(codec) ? console.log("MIME type or codec: ",codec) : console.log("Unsupported MIME type or codec: ", codec), player._mediaSource = new window.MediaSource, player.video.autoplay = true,console.log(player._videoId);player.video.src = window.URL.createObjectURL(player._mediaSource), player.video.play(), player._mediaSource.addEventListener("sourceopen",player.onMediaSourceOpen.bind(player), false)}catch (err) {console.log(err)}},H5sPlayerWS.prototype.onMediaSourceOpen = function () {console.log("Add SourceBuffer"), this.sourceBuffer = this._mediaSource.addSourceBuffer(this.strCodec), this._mediaSource.duration = 1 / 0,this._mediaSource.removeEventListener("sourceopen", this.onMediaSourceOpen, false), this.sourceBuffer.addEventListener("updateend",this.readFromBuffer.bind(this), false);},H5sPlayerWS.prototype.setupWebSocket = function (token) {console.log('>> H5sPlayerWS.prototype.setupWebSocket');this.video.autoplay = true;var url = "api/v1/h5swsapi", prof = "main";if (void 0 === this._conf.streamprofile || (prof = this._conf.streamprofile), void 0 === this._pbconf) {url = this._conf.rootpath + url + "?token=" + token + "&profile=" + prof + "&session=" + this._conf.session;}else {var i = "false", o = "fake";void 0 === this._pbconf.serverpb || (i = this._pbconf.serverpb), void 0 === this._pbconf.filename || (o = this._pbconf.filename),url = this._conf.rootpath + url + "?token=" + token + "&playback=true&profile=" + prof + "&serverpb=" + i + "&begintime=" + encodeURIComponent(this._pbconf.begintime) + "&endtime=" + encodeURIComponent(this._pbconf.endtime) + "&filename=" + o + "&session=" + this._conf.session}this._conf.session, console.log(url), this.wsSocket = this.getWebSocket(url), console.log("setupWebSocket", this.wsSocket), this.wsSocket.binaryType = "arraybuffer",(this.wsSocket._player = this).wsSocket.onmessage = this.onReceived.bind(this), this.wsSocket.onopen = function () {console.log("wsSocket.onopen", this._player), this._player.checkSourceBufferTimerId = setInterval(this._player.checkSourceBuffer.bind(this._player), 1e4),this._player.keepAliveTimerId = setInterval(this._player.keepAlive.bind(this._player), 1e3), null != this._player._pbconf && "true" === this._player._pbconf.autoplay && this._player.start();},this.wsSocket.onclose = function () {console.log("wsSocket.onclose", this._player), true === this._player.v ? console.log("wsSocket.onclose disconnect") : this._player.S = true,this._player.cleanupSourceBuffer(this._player), this._player.cleanupWebSocket(this._player), this._player.strCodec = "", this._player.p = false;}},H5sPlayerWS.prototype.cleanupSourceBuffer = function (player) {console.log("Cleanup Source Buffer", player);try {player.sourceBuffer.removeEventListener("updateend", player.readFromBuffer, false), player.sourceBuffer.abort(), document.documentMode || /Edge/.test(navigator.userAgent) ? console.log("IE or EDGE!") : player._mediaSource.removeSourceBuffer(player.sourceBuffer),player.sourceBuffer = null, player._mediaSource = null, player.buffer = []}catch (err) {console.log(err)}},H5sPlayerWS.prototype.cleanupWebSocket = function (player) {console.log("CleanupWebSocket", player);//console.error(player);clearInterval(player.keepAliveTimerId), clearInterval(player.checkSourceBufferTimerId), player.h = 0, player.l = 0, player.u = 0;},H5sPlayerWS.prototype.checkSourceBuffer = function () {if (void 0 === this._pbconf) {true === this.v && (console.log("CheckSourceBuffer has been disconnect", this), clearInterval(this.keepAliveTimerId),clearInterval(this.checkSourceBufferTimerId), clearInterval(this.reconnectTimerId));try {if (console.log("CheckSourceBuffer", this), this.sourceBuffer.buffered.length <= 0) {if (this.h++ , 8 < this.h) {return console.log("CheckSourceBuffer Close 1"), void this.wsSocket.close();}}else {this.h = 0;this.sourceBuffer.buffered.start(0);var t = this.sourceBuffer.buffered.end(0), s = t - this.video.currentTime;if (5 < s || s < 0) {return console.log("CheckSourceBuffer Close 2", s), void this.wsSocket.close();}if (t == this.l) {if (this.u++ , 3 < this.u) {return console.log("CheckSourceBuffer Close 3"), void this.wsSocket.close();}}else {this.u = 0;}this.l = t;}}catch (err) {console.log(err)}}},H5sPlayerWS.prototype.connect = function () {this.setupWebSocket(this._token);this.reconnectTimerId = setInterval(this.reconnectFunction.bind(this), 3e3);//没3s重连一次。},H5sPlayerWS.prototype.disconnect = function () {console.log("disconnect", this), this.v = true, clearInterval(this.reconnectTimerId), null != this.wsSocket && (this.wsSocket.close(),this.wsSocket = null), console.log("disconnect", this);},H5sPlayerWS.prototype.start = function () {try {var t = {cmd: "H5_START"};this.wsSocket.send(JSON.stringify(t))}catch (err) {console.log(err)}},H5sPlayerWS.prototype.pause = function () {try {var t = {cmd: "H5_PAUSE"};this.wsSocket.send(JSON.stringify(t))}catch (err) {console.log(err)}},H5sPlayerWS.prototype.resume = function () {try {var t = {cmd: "H5_RESUME"};this.wsSocket.send(JSON.stringify(t))}catch (err) {console.log(err)}},H5sPlayerWS.prototype.seek = function (t) {try {var s = {cmd: "H5_SEEK"};s.nSeekTime = t, this.wsSocket.send(JSON.stringify(s))}catch (err) {console.log(err)}},H5sPlayerWS.prototype.speed = function (t) {try {var s = {cmd: "H5_SPEED"};s.nSpeed = t, this.wsSocket.send(JSON.stringify(s))}catch (err) {console.log(err)}},H5sPlayerRTC.prototype.reconnectFunction = function () {true === this.S && (console.log("Reconnect..."), this.j(this._token), this.S = false)},H5sPlayerRTC.prototype.q = function (t) {var s;console.log("H5SWebSocketClient");try {"http:" == this._conf.protocol && (s = "undefined" != typeof MozWebSocket ? new MozWebSocket("ws://" + this._conf.host + t) : new WebSocket("ws://" + this._conf.host + t)),"https:" == this._conf.protocol && (console.log(this._conf.host), s = "undefined" != typeof MozWebSocket ? new MozWebSocket("wss://" + this._conf.host + t) : new WebSocket("wss://" + this._conf.host + t)),console.log(this._conf.host)}catch (err) {return void alert("error")}return s;},H5sPlayerRTC.prototype.keepAlive = function () {try {var t = {type: "keepalive"};this.wsSocket.send(JSON.stringify(t))}catch (err) {console.log(err)}},H5sPlayerRTC.prototype.nt = 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.wsSocket.send(JSON.stringify(e))}else {console.log("End of candidates.");}},H5sPlayerRTC.prototype.ht = function (t) {var s;console.log("Remote track added:" + JSON.stringify(t)), s = t.ct ? t.ct[0] : t.stream;var e = this._videoElemet;e.src = URL.createObjectURL(s), e.play();},H5sPlayerRTC.prototype.rt = function () {console.log("createPeerConnection  config: " + JSON.stringify(this.T) + " option:" + JSON.stringify(this.I));var s = new RTCPeerConnection(this.T, this.I), e = this;return s.onicecandidate = function (t) {e.nt.call(e, t)},void 0 !== s.lt ? s.lt = function (t) {e.ht.call(e, t)}: s.onaddstream = function (t) {e.ht.call(e, t)},s.oniceconnectionstatechange = function (t) {console.log("oniceconnectionstatechange  state: " + s.iceConnectionState)},console.log("Created RTCPeerConnnection with config: " + JSON.stringify(this.T) + "option:" + JSON.stringify(this.I)),s},H5sPlayerRTC.prototype.at = function (t) {console.log("ProcessRTCOffer", t);try {this.R = this.rt(), this.O.length = 0;var s = this;this.R.setRemoteDescription(createRTCSessionDescription(t)), this.R.createAnswer(this.A).then(function (t) {console.log("Create answer:" + JSON.stringify(t)), s.R.setLocalDescription(t, function () {console.log("ProcessRTCOffer createAnswer", t), s.s.send(JSON.stringify(t))},function () { })},function (t) {alert("Create awnser error:" + JSON.stringify(t))})}catch (err) {this.disconnect(), alert("connect error: " + err)}},H5sPlayerRTC.prototype.ut = 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.R.addIceCandidate(s, function () {console.log("addIceCandidate OK")},function (t) {console.log("addIceCandidate error:" + JSON.stringify(t))})}catch (err) {alert("connect ProcessRemoteIce error: " + err)}},H5sPlayerRTC.prototype.onReceived = function (msg) {msg.data, ArrayBuffer, msg.data, console.log("RTC received ", msg.data);var s = JSON.parse(msg.data);return console.log("Get Message type ", s.type), "offer" === s.type ? (console.log("Process Message type ",s.type), void this.at(s)) : "remoteice" === s.type ? (console.log("Process Message type ", s.type),void this.ut(s)) : void (null != this._pbconf && null != this._pbconf.callback && this._pbconf.callback(msg.data, this._pbconf.userdata))},H5sPlayerRTC.prototype.j = function (t) {this.video.autoplay = true;var s = "api/v1/h5srtcapi", e = "main";if (void 0 === this._conf.streamprofile || (e = this._conf.streamprofile), void 0 === this._pbconf) {s = this._conf.rootpath + s + "?token=" + t + "&profile=" + e + "&session=" + this._conf.session;}else {var i = "false", o = "fake";void 0 === this._pbconf.serverpb || (i = this._pbconf.serverpb), void 0 === this._pbconf.filename || (o = this._pbconf.filename),s = this._conf.rootpath + s + "?token=" + t + "&playback=true&profile=" + e + "&serverpb=" + i + "&begintime=" + encodeURIComponent(this._pbconf.begintime) + "&endtime=" + encodeURIComponent(this._pbconf.endtime) + "&filename=" + o + "&session=" + this._conf.session}console.log(s), this.wsSocket = this.q(s), console.log("setupWebSocket", this.wsSocket), this.wsSocket.binaryType = "arraybuffer",(this.wsSocket._player = this).wsSocket.onmessage = this.onReceived.bind(this), this.wsSocket.onopen = function () {console.log("wsSocket.onopen", this._player);var t = {type: "open"};this._player.s.send(JSON.stringify(t)), this._player.keepAliveTimerId = setInterval(this._player.keepAlive.bind(this._player), 1e3), null != this._player._pbconf && "true" === this._player._pbconf.autoplay && this._player.start();},this.wsSocket.onclose = function () {console.log("wsSocket.onclose", this._player), true === this._player.v ? console.log("wsSocket.onclose disconnect") : this._player.S = true,this._player.cleanupWebSocket(this._player)}},H5sPlayerRTC.prototype.cleanupWebSocket = function (t) {console.log("CleanupWebSocket", t), clearInterval(t.keepAliveTimerId), t.h = 0, t.l = 0, t.u = 0;},H5sPlayerRTC.prototype.connect = function () {this.j(this._token), this.reconnectTimerId = setInterval(this.reconnectFunction.bind(this), 3e3);},H5sPlayerRTC.prototype.disconnect = function () {console.log("disconnect", this), this.v = true, clearInterval(this.reconnectTimerId), null != this.wsSocket && (this.wsSocket.close(),this.wsSocket = null), console.log("disconnect", this);},H5sPlayerRTC.prototype.start = function () {try {var t = {cmd: "H5_START"};this.wsSocket.send(JSON.stringify(t))}catch (err) {console.log(err)}},H5sPlayerRTC.prototype.pause = function () {try {var t = {cmd: "H5_PAUSE"};this.wsSocket.send(JSON.stringify(t))}catch (err) {console.log(err)}},H5sPlayerRTC.prototype.resume = function () {try {var t = {cmd: "H5_RESUME"};this.wsSocket.send(JSON.stringify(t))}catch (err) {console.log(err)}},H5sPlayerRTC.prototype.seek = function (t) {try {var s = {cmd: "H5_SEEK"};s.nSeekTime = t, this.wsSocket.send(JSON.stringify(s))}catch (err) {console.log(err)}},H5sPlayerRTC.prototype.speed = function (t) {try {var s = {cmd: "H5_SPEED"};s.nSpeed = t, this.wsSocket.send(JSON.stringify(s))}catch (err) {console.log(err)}},H5sPlayerHls.prototype.q = function (t) {var s;console.log("H5SWebSocketClient");try {"http:" == this._conf.protocol && (s = "undefined" != typeof MozWebSocket ? new MozWebSocket("ws://" + this._conf.host + t) : new WebSocket("ws://" + this._conf.host + t)),"https:" == this._conf.protocol && (console.log(this._conf.host), s = "undefined" != typeof MozWebSocket ? new MozWebSocket("wss://" + this._conf.host + t) : new WebSocket("wss://" + this._conf.host + t)),console.log(this._conf.host)}catch (err) {return void alert("error")}return s;},H5sPlayerHls.prototype.keepAlive = function () {try {var t = {type: "keepalive"};this.wsSocket.send(JSON.stringify(t))}catch (err) {console.log(err)}},H5sPlayerHls.prototype.onReceived = function (msg) {console.log("HLS received ", msg.data)},H5sPlayerHls.prototype.j = function (t) {var s = "api/v1/h5swscmnapi";s = this._conf.rootpath + s + "?token=" + t + "&session=" + this._conf.session, console.log(s), this.wsSocket = this.q(s),console.log("setupWebSocket", this.wsSocket), this.wsSocket.binaryType = "arraybuffer", (this.wsSocket._player = this).wsSocket.onmessage = this.onReceived.bind(this),this.wsSocket.onopen = function () {console.log("wsSocket.onopen", this._player), this._player.keepAliveTimerId = setInterval(this._player.keepAlive.bind(this._player), 1e3);},this.wsSocket.onclose = function () {console.log("wsSocket.onclose", this._player), this._player.cleanupWebSocket(this._player)}},H5sPlayerHls.prototype.cleanupWebSocket = function (t) {console.log("H5sPlayerHls CleanupWebSocket", t), clearInterval(t.keepAliveTimerId)},H5sPlayerHls.prototype.dt = function () {console.log("HLS video.ended", this.g.ended), console.log("HLS video.currentTime", this.g.currentTime);var t = this.g.currentTime, s = t - this.B;console.log("HLS diff", s), 0 === s && this.U++ , this.B = t, 3 < this.U && (null != this.wsSocket && (this.wsSocket.close(),this.wsSocket = null), this.j(this._token), console.log("HLS reconnect"), this.g.src = "", this.B = 0, this.U = 0,this.g.src = this._conf.protocol + "//" + this._conf.host + this._conf.rootpath + "hls/" + this.N + "/" + this._token + "/hls.m3u8",this.g.play());},H5sPlayerHls.prototype.connect = function () {this.j(this._token), this.B = 0, this.U = 0, this.g.onended = function (t) {console.log("The End")},this.g.onpause = function (t) {console.log("Pause")},this.g.onplaying = function (t) {console.log("Playing")},this.g.onseeking = function (t) {console.log("seeking")},this.g.onvolumechange = function (t) {console.log("volumechange")},this.g.src = this._conf.protocol + "//" + this._conf.host + this._conf.rootpath + "hls/" + this.N + "/" + this._token + "/hls.m3u8",this.g.play(), this.J = setInterval(this.dt.bind(this), 3e3);},H5sPlayerHls.prototype.disconnect = function () {clearInterval(this.J), this.B = 0, this.U = 0, null != this.wsSocket && (this.wsSocket.close(), this.wsSocket = null),console.log("disconnect", this);},H5sPlayerAudio.prototype.q = function (t) {var s;console.log("H5SWebSocketClient");try {"http:" == this._conf.protocol && (s = "undefined" != typeof MozWebSocket ? new MozWebSocket("ws://" + this._conf.host + t) : new WebSocket("ws://" + this._conf.host + t)),"https:" == this._conf.protocol && (console.log(this._conf.host), s = "undefined" != typeof MozWebSocket ? new MozWebSocket("wss://" + this._conf.host + t) : new WebSocket("wss://" + this._conf.host + t)),console.log(this._conf.host)}catch (err) {return void alert("error")}return s;},H5sPlayerAudio.prototype.keepAlive = function () {try {this.wsSocket.send("keepalive")}catch (err) {console.log(err)}},H5sPlayerAudio.prototype.onReceived = function (msg) {for (var s = new Int16Array(msg.data), e = s.length, i = this._.createBuffer(1, e, 8e3), o = 0; o < 1; o++) {for (var n = i.getChannelData(o), h = 0; h < e; h++) {n[h] = s[h] / 16383.5;}}var c = this._.createBufferSource();c.buffer = i, c.connect(this._.destination), c.start();},H5sPlayerAudio.prototype.cleanupWebSocket = function (t) {console.log("CleanupWebSocket", t), clearInterval(t.keepAliveTimerId)},H5sPlayerAudio.prototype.j = function (t) {var s = "api/v1/h5saudapi";s = this._conf.rootpath + s + "?token=" + t + "&session=" + this._conf.session, console.log(s), this.wsSocket = this.q(s),console.log("setupWebSocket for audio", this.wsSocket), this.wsSocket.binaryType = "arraybuffer", (this.wsSocket._player = this).wsSocket.onmessage = this.onReceived.bind(this),this.wsSocket.onopen = function () {console.log("wsSocket.onopen", this._player), this._player.keepAliveTimerId = setInterval(this._player.keepAlive.bind(this._player), 1e3);},this.wsSocket.onclose = function () {console.log("wsSocket.onclose", this._player), this._player.cleanupWebSocket(this._player)}},H5sPlayerAudio.prototype.connect = function () {this.j(this._token)},H5sPlayerAudio.prototype.disconnect = function () {console.log("disconnect", this), null != this.wsSocket && (this.wsSocket.close(), this.wsSocket = null), console.log("disconnect",this);},H5sPlayerAudBack.prototype.q = function (t) {var s;console.log("H5SWebSocketClient");try {"http:" == this._conf.protocol && (s = "undefined" != typeof MozWebSocket ? new MozWebSocket("ws://" + this._conf.host + t) : new WebSocket("ws://" + this._conf.host + t)),"https:" == this._conf.protocol && (console.log(this._conf.host), s = "undefined" != typeof MozWebSocket ? new MozWebSocket("wss://" + this._conf.host + t) : new WebSocket("wss://" + this._conf.host + t)),console.log(this._conf.host)}catch (err) {return void alert("error")}return s;},H5sPlayerAudBack.prototype.keepAlive = function () {try {this.wsSocket.send("keepalive")}catch (err) {console.log(err)}},H5sPlayerAudBack.prototype.onReceived = function (msg) { }, H5sPlayerAudBack.prototype.cleanupWebSocket = function (t) {console.log("CleanupWebSocket", t), clearInterval(t.keepAliveTimerId)},H5sPlayerAudBack.prototype.K = function () {console.log("sampleRate", this._.sampleRate), navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.ft;try {navigator.getUserMedia({video: false, audio: true},this.St.bind(this))}catch (err) {return void alert("Audio back false getUserMedia", err);}},H5sPlayerAudBack.prototype.yt = function () {this.G = true},H5sPlayerAudBack.prototype.j = function (t) {var s = "api/v1/h5saudbackapi";s = this._conf.rootpath + s + "?token=" + t + "&samplerate=" + this.D + "&session=" + this._conf.session,console.log(s), this.wsSocket = this.q(s), console.log("setupWebSocket for audio back", this.wsSocket), this.wsSocket.binaryType = "arraybuffer",(this.wsSocket._player = this).wsSocket.onmessage = this.onReceived.bind(this), this.wsSocket.onopen = this.yt.bind(this), this.wsSocket.onclose = function () {console.log("wsSocket.onclose", this._player), this._player.cleanupWebSocket(this._player)}},H5sPlayerAudBack.prototype.vt = function (t) {var s = float32ToInt16(t.inputBuffer.getChannelData(0));true === this.G && this.wsSocket && this.wsSocket.send(s)},H5sPlayerAudBack.prototype.St = function (t) {try {var s = this._.createMediaStreamSource(t), e = this._.createScriptProcessor(1024, 1, 1);s.connect(e), e.connect(this._.destination), e.onaudioprocess = this.vt.bind(this)}catch (err) {return void alert("Audio intecomm error", err);}},H5sPlayerAudBack.prototype.connect = function () {this.j(this._token)},H5sPlayerAudBack.prototype.disconnect = function () {console.log("disconnect", this), null != this.wsSocket && (this.wsSocket.close(), this.wsSocket = null), console.log("disconnect",this);};

2.创建简单播放视频原型代码

结合前面H5Stream里面的h5splayer.js，实验并成功播放了一个H5Stream的ws视频。

还有一些细节问题。

<html><head><title>WebsocketVideo</title><script src="ws.js"></script><script src="jquery.js"></script></head><body><input style="width:100px;"><button id="btnPlay">Play</button><div><video id="video1" autoplay webkit-playsinline playsinline></video></div></body><script>$(document).ready(function(){var conf={};conf.url="ws://localhost:8080/api/v1/h5swsapi?token=token2&profile=main&session=c1782caf-b670-42d8-ba90-2244d0b0ee83";conf.videoId='video1';var player=new WebSocketPlayer(conf);player.openWebSocket();});function WebSocketPlayer(conf){this.conf=conf;this.strCodec='';this.inited=false;this.buffer=[];this.openWebSocket=function(){console.log('openWebSocket');var player=this;var url=player.conf.url;var wsImp=window.WebSocket || window.MozWebSocket;var ws=new wsImp(url);ws.binaryType='arraybuffer';ws.onopen=function(){console.log('onopen');};ws.onclose=function(){console.log('onclose');}ws.onmessage=player.onReceived;ws.player=player;};this.onReceived=function(msg){console.log('onmessage',msg.data);var ws=this;var player=ws.player;if(player.inited===false){player.inited=true;player.strCodec=String.fromCharCode.apply(null,new Uint8Array(msg.data));player.initMediaSource(player);console.log(player.strCodec);}else{//player.buffer.push(msg.data);//player.readFromBuffer();player.sourceBuffer.appendBuffer(msg.data);}};this.initMediaSource=function(player){try {console.log('initMediaSource',player);var msImp=window.MediaSource || window.WebKitMediaSource;var ms=new msImp();ms.player=player;player.ms=ms;var video=document.getElementById(player.conf.videoId);video.src=URL.createObjectURL(ms);video.play();ms.addEventListener('sourceopen',player.msSourceOpen)player.video=video;}catch(ex){console.error(ex);}};this.msSourceOpen=function(){console.log('msSourceOpen');var ms=this;var player=ms.player;var buffer=ms.addSourceBuffer(player.strCodec);ms.duration=Infinity;buffer.addEventListener('updateend',player.readFromBuffer)player.sourceBuffer=buffer;};this.readFromBuffer=function(){console.log('readFromBuffer1',this);//var player=this;//var buffer=player.buffer;//console.log('readFromBuffer2',buffer);//var first=buffer.shift();//var sourceBuffer=player.sourceBuffer;//sourceBuffer.appendBuffer(first);};}</script>
</html>

网页中播放RTSP(5) WebSocket播放视频相关推荐

html flash 循环播放,在网页中插入flv格式的flash视频怎么让其循环播放_html/css_WEB-ITnose...
求解在网页中插入flv格式的flash视频怎么让其循环播放回复讨论(解决方案) 求解在网页中插入flv格式的flash视频怎么让其循环播放这个得让flash coder设置flash播放器吧 ...
静态博客网页中的网易云音乐播放器
见我的博客 https://blog.wyue.site/2020/04/12/1/ 转载前请联系我,联系方式请见我博客 https://blog.wyue.site/ 一直想做个博客中的音乐播放器, ...
网页中插入视频播放，音频播放，自动验证输入框格式
<body> <progress value="30" max="100" min="1" >进度条 ...
html播放rtsp流,浏览器播放rtsp视频流解决方案
最近项目中需要实时播放摄像头rtsp视频流,于是就专门做了些研究.而浏览器不能直接播放,只有通过插件或者转码来实现这个需求. 要实现这个目的,可以采用的方案非常得多,有商业的也有开源的,这里主要列举一 ...
PHP如何调取vlc播放rtsp,H5+VLC播放RTSP视频流
最新项目涉及到摄像头,这篇文章记录一下在VUE中播放RTSP视频流. 这篇文章主要介绍使用VLC插件播放RTSP视频流,目前支持的浏览器有 360浏览器.2345浏览器,可用于一些对播放器要求不高的项 ...
网页中播放RTSP(6) WebRTC播放视频
1.还是基于h5stream的h5splayer.js学习,还是基于websocket. 与原来的不同,在onopen里面要发送一些open指令 ws.onopen = function () {in ...
网页中插入能全屏播放swf,flv视频的播放器
原帖地址:http://aykkk.blog.163.com/blog/static/161779533201211044316285/ 今天一客户提出此要求,上网查资料,无意中看到一个网站有此功能, ...
android使用Ffmpeg JNI实时播放RTSP、RTMP等视频(主码流，子码流均能流畅播放)
前言:最近公司项目需要在电视上播放摄像头视频,而且可以随时切换流,延时要求在500ms以内,网上试过了各种开源库 ,都不能达到要求.于是自己找到公司C++开发人员请教,最后终于完成,在此记录,也 ...
在网页中使用iframe嵌入B站视频（腾讯视频同理）
先上效果: 首先是自己的页面: 点击图片后出现一个遮罩.遮罩上显示B站的视频: 这个效果很常见,例如在索尼中国的网站中: 点击图中的播放图标会出现腾讯视频的iframe窗口: 那么下面来看代码: &l ...

网页中播放RTSP(5) WebSocket播放视频

网页中播放RTSP(5) WebSocket播放视频相关推荐

最新文章

热门文章