一、简介

既然webcoekt是基于tcp连接的，理论上讲所有的浏览器是可以私有协议处理二进制的，如果我们需要播放视频，我们可以将视频数据在后端解码后直接将图片推送到webcoekt前端，然后前端通过websocket接收图片然后将图片显示到img或canvas中即可，当然这个是我自己设想的，也是应该可以做的到了，做到如下需要以下技术支持：

• 后端直接ffmpeg转码为jpeg图片流
• 后端定制播放协议包括基本指令如play、stop、pause、faster、slower
• 后端需要提供websocket支持发送图片流到前端
• 前端需要接受图片流并显示出来

后端ffmpeg解码这里就不说明了，我有很多库，需要的单独联系我购买，前端的显示jpg流，这里要借助前端显示图片放的做法，使用图片base64数据！前端HTML显示二进制jpeg图片：图片流=>二进制转image的base64编码=>设置到img的src中，如前端代码

二进制通过arraybuffer转base64

function arrayBufferToBase64(buffer) {
        var binary = '';
        var bytes = new Uint8Array(buffer);
        var len = bytes.byteLength;
        for (var i = 0; i < len; i++) {
            binary += String.fromCharCode(bytes[i]);
        }
        return window.btoa(binary);
    }

最后显示：

var player = document.getElementById('player');
      var url= arrayBufferToBase64(data);
      player.src='data:image/jpeg;base64,'+url;

当然，还有其他的方式：