请问如何使用webscoket实现视频直播

[baydou]

我看到别人的一个站点是用egret开发的，有视频直播功能，我把他们前端代码都扒下来之后，找到了他们的rtmp地址，换成我自己的之后在pc端上可以播放，切换到移动端之后发现是使用ws协议将视频数据不断发送到客户端来，然后解码。部分代码是这样的：

然后通过抓包得到的视频数据是这样的，都是已00000001开头，后面的有变化：

00000001419a60c0065b0e6b1baffffffff3d70ff4af17f2ef047e14d439224a03a6e8e131fdf65f515ac3de2fb56998ccdbf793eb38defeb5bf97155defffbc3546ae5566856d205c7821168857ef9cfedd3fe404578654fb653dfb124a88f827c718de2187397d6abb15c295c379504a035b497fde2359f5827a3f5eeae39612dfd235179b768f9da367fade0bfbf63959e4fd56c59ebf7f455d705da6afe789e4cefbfe4e2cbe5634dc17ed79627a5652fcd0f6ffb13d2bf774dd6faf4717041a5eeeff7ee09b79f1fe0f2c55f2fbe2b7824d7ec759f51dab5307eb2880cf0b9201f6a4bdeff769faac5c57845c9dbabf63b99e0f7fb5e97efe6c178597fffd3e73f86c70ff494c41cd965f7f55b822b06623bc1875e34a0aa8f8abf9fe2f08c675dba1f6bbdfa8ca68d310b2df436651a8e72ce873b3d219ef6921ac5e876ebfcc53d9fa78313af966d3f8d20ccbf3ff351bbc1d2c3f1e597c6923606c77e4a29b04f3589450a7d77bfa7015d8edc5043796907b58aa8ba7d7680dc3ee3f7477de26ae9307d3f241964f898ac46103b3cb7d615214c376ceb43ffa903f5e5e52b2c47a80dba19271cd6585cb2c5b4d476d2db97947d4498db01517da2afcc8fe909ec598fbfad694ecb70c1a60f3f706bf028f701455c0dbdc06c77053bc0890

我想请问，是如何在服务端将rtmp的视频流这样一点一点的发送给客户端的呢？php能实现吗，或者其他技术呢
请高人指点，谢谢。

[夕心o]

@baydou 我也遇到一样的问题，请问你解决没，代码能不能发一下， qq2330396312

[baydou]

js部分代码：

XPlayer.prototype.init = function (e) {
    var t = this;
    this.status = "init", this.display = new H264bsdCanvas(e), this.decoder = new Worker("resource/js/livestream.min.js?20170418");
    var r = void 0 != this.display.isWebGL();
    return this.decoder.postMessage({
        type: "setWebGlMode",
        data: r
    }), this.decoder.addEventListener("error", function (e) {
        console.log("Decoder error", e)
    }), this.decoder.addEventListener("message", function (r) {
        var i = r.data;
        if (i.hasOwnProperty("type"))switch (i.type) {
            case"pictureParams":
                croppingParams = i.croppingParams, null === croppingParams ? (e.width = i.width, e.height = i.height) : (e.width = croppingParams.width, e.height = croppingParams.height), t.listener && t.listener(102, t.id, "video ready");
                break;
            case"noInput":
                break;
            case"pictureReady":
                for (t.listener && !t.firstFrame && (t.firstFrame = !0, t.listener(103, t.id, "first frame")), t.width = i.width, t.height = i.height, t.croppingParams = i.croppingParams, t.frames.push(new Uint8Array(i.data)); t.frames.length > 5;) {
                    console.log("Shift frames");
                    var a = t.frames.shift();
                    a = null
                }
                break;
            case"decoderReady":
                t.ready = !0, t.listener && t.listener(100, t.id, "Decoder ready");
                break;
            case"decoderClosed":
                t.frames = [], t.display.clearCanvas(), t.listener && t.listener(105, t.id, "Decoder Closed")
        }
    }), this.decoder.playerid
}, XPlayer.prototype.setSourceUrl = function (e) {
    this.sourceUrl = e;
    var t = /\/\/([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?$/, r = t.exec(e);
	console.log('live',r);
    r && r.length > 0 && (this.host = r[1], this.port = r[2], this.stream = r[3]), -1 != e.indexOf(".mp4") ? this.wsuri = "ws://%s:%s/dvr".format(this.host, this.port) : this.wsuri ="ws://%s:%s/live".format(this.host, this.port)//"ws://192.168.1.2:8008";// 
}, XPlayer.prototype.setStatusListener = function (e) {
    this.listener = e
}, XPlayer.prototype.play = function () {
    if (!this.ready)return void console.log("decoder is not ready");
    if (this.host && this.port && null == this.sock) {
        var e = this;
        return this.sock = new WebSocket(this.wsuri), this.sock.binaryType = "arraybuffer", this.sock.onopen = function () {
            this.playerid = e.decoder.playerid, e.listener && e.listener(101, e.id, "socket opened");
            "%s/%s".format(e.host, e.stream);
            e.sock.send(JSON.stringify({
                cmd: "play",
                stream: e.stream,
                starttime: e.currentTime
            })), e.firstFrame = !1, e.status = "videoPlaying", requestAnimFrame(function () {
                e.renderNextFrame(e)
            })
        }, this.sock.onclose = function (t) {
            e.listener && e.listener(104, e.id, "socket closed")
        }, this.sock.onmessage = function (t) {
            if ("string" == typeof t.data) {
                var r = JSON.parse(t.data);
                "status" == r.type || ("duration" == r.type ? e.duration = r.duration : "timestamp" == r.type && (e.currentTime = r.time))
            } else if (t.data.byteLength > 0) {
                var i = new Uint8Array(t.data);
                (0 == i[0] || 0 == i[1] || 0 == i[2] || 1 == i[3]) && e.decoder.postMessage({
                    type: "queueInput",
                    data: i.buffer
                }, [i.buffer])
            }
        }, !0
    }
    return !1
}

[baydou]

[baydou]

请大神指点，谢谢