Html5之webcoekt播放JPEG图片流的示例分析

这篇文章给大家分享的是有关Html5之webcoekt播放JPEG图片流的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联主营四平网站建设的网络公司,主营网站建设方案,成都APP应用开发,四平h5小程序开发搭建,四平网站营销推广欢迎四平等地区企业咨询

一、简介

既然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;

当然，还有其他的方式：

var wsCtrl = new WebSocket("ws://127.0.0.1/ctrl/");
//Establish channel code
....
var wsVideo = new WebSocket("ws://127.0.0.1/video/channel1");
wsVideo.onmessage = function(evt)
{
   //Method 1
   document.getElementById("img1").src = URL.createObjectURL(evt.data);
   
   //Method 2
   var read = new FileReader();
   read.onload = function(e)
   {
      document.getElementById("img2").src = e.target.result;
   }
   read.readAsDataURL(evt.data);
}

ws.onmessage = function(evt) {
    if(typeof(evt.data)=="string"){
        //textHandler(JSON.parse(evt.data));
    }else{
        var reader = new FileReader();
        reader.onload = function(evt){
            if(evt.target.readyState == FileReader.DONE){
                var url = evt.target.result;
                alert(url);
                var img = document.getElementById("imgDiv");
                img.innerHTML = "";
            }
        }
        reader.readAsDataURL(evt.data);
    }
};

关于c++的websocket开源工程：websocketpp、QWebSocketServer

二、websocket播放图片流

多说无益，还不如痛痛快快的来一把，为了减低复杂度，我用java的websocket来实现图片流的发送(当然c++的库我也一个实战项目中用过的名为WebSocket的封装的dll工程项目，需要的自行私下购买源码),前端使用一个img标签展示图片，这里说明一下，后台模拟发送图片(这里仅仅是图片,不是流,如果是流直接连续不断发送即可需要ffmpeg转码)

首先前端的代码如下所示：

    
        
        
        
        
    
    
    
    
        
WebSocket播放图片
        

        请求图片
    
    
        var websocket = {
            send: function (str) {
            }
        };
        window.onload = function () {
            if (!'WebSocket' in window) return;
            webSocketInit();
        };
        function webSocketInit() {
            // 连接到服务端端点
            websocket = new WebSocket("ws://127.0.0.1:8080/image/show");
            // 成功建立连接
            websocket.onopen = function () {
                console.log("成功连接到服务器");
                websocket.send("成功连接到服务器");
            };
            // 接收到消息
            websocket.onmessage = function (event) {
                // 文本数据包
                if(typeof(event.data)=="string"){
                    // JSON.parse(evt.data)
                    console.log("收到服务端发送的消息：" + event.data);
                // 图片数据包Blob
                }else{
                    var reader = new FileReader();
                    reader.onload = function(evt){
                        if(evt.target.readyState == FileReader.DONE){
                            // base64数据
                            var url = evt.target.result;
                            document.getElementById("player").src = url;
                        }
                    }
                    reader.readAsDataURL(event.data);
                }
            };
            // 连接发生错误
            websocket.onerror = function () {
                console.log("WebSocket连接发生错误");
            };
            // 连接关闭
            websocket.onclose = function () {
                console.log("WebSocket连接关闭");
            };
            // 监听窗口关闭事件，当窗口关闭时，主动关闭websocket连接
            window.onbeforeunload = function () {
                websocket.close()
            };
        }
    

每次点击发送的时候就向后台请求一张图，后台将改图发送出去（我简单的使用websocket群发,可以使用websocket的可变参数将websocket和http关联起来,这个应该很容易我这里不再赘述，不了解的进群讨论)

package com.easystudy.controller;

import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.net.URL;
import java.util.Random;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import com.easystudy.websocket.ImgEndPoint;

/**
 * @文件名称: TestController.java
 * @功能描述: 图片流请求请求发送接口(websocket发送图片到web端)
 * @版权信息：  www.easystudy.com
 * @技术交流：  961179337(QQ群)
 * @编写作者：  lixx2048@163.com
 * @联系方式：  941415509(QQ)
 * @开发日期：  2020年9月21日
 * @历史版本： V1.0 
 * @备注信息：
 */
@RestController
@RequestMapping("/test")
public class TestController {
    
    /**
     * @功能描述: 发送请求接口
     * @版权信息：  www.easystudy.com
     * @编写作者：  lixx2048@163.com
     * @开发日期：  2020年9月21日
     * @备注信息：
     */
    @SuppressWarnings("unused")
    @GetMapping("/send")
    public String reponseMsgToClient(@RequestParam(name="content", required = true)String content) throws Exception{
        System.out.println("开始发送图片数据");
        
        // 随机选择一张图片发送
        int index = new Random().nextInt(4) + 1;
        String imgName = index + ".jpg";
        
        // 判断图片是否存在
        URL url = getClass().getClassLoader().getResource(imgName);
        File file = new File(url.getFile());
        if (!file.exists()) {
            return "未找到图片!";
        }
        
        // 创建输入图片流
        InputStream in = new FileInputStream(file);
        if (null == in) {
            return "打开文件失败!";
        }
        
        // 读取图片数据
        int size = (int)file.length();
        byte[] buffer = new byte[ size];
        int count = in.read(buffer, 0, size);    
        System.out.println("文件长度:" + size + ", 读取长度:" + count);
        
        // 发送图片数据(理论上讲应该只发对端连接的)
        ImgEndPoint.fanoutMessage(buffer);
        
        // 关闭文件流
        try {
            in.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
        
        // 接口响应
        return "消息【" +content+ "】发送成功!";
    }
}

我这里多一句嘴，如果是音视频应用的录像播放，这里可以使用websocket传输图片流，然后通过计算发送定点的图片流数据到前端来实现自定义的播放器功能（海康萤石云使用的就是websocket播放录像流的，做法类似）

播放效果如下：

感谢各位的阅读！关于“Html5之webcoekt播放JPEG图片流的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

文章标题：Html5之webcoekt播放JPEG图片流的示例分析
当前路径：http://scjbc.cn/article/pcpocc.html