Не работает преобразование буфера массива в base64 - PullRequest
Новая
       9

Не работает преобразование буфера массива в base64

0 голосов
/ 05 апреля 2020

Я пытаюсь транслировать видео с камеры, используя socketio.

У меня есть эта opencv python функция, которая кодирует кадры камеры и излучает с использованием функции Flask-Socketio.

Клиент Сторона JS может декодировать кодировку base64 и назначать ее тегу HTML img, но изображения не отображаются. Браузер говорит, что изображение содержит ошибки. Но на удивление я могу открыть это изображение в своем P C с помощью таких инструментов изображения, как средство просмотра изображений FastStone или Photoshop.

Что здесь пошло не так?

Функция OpenCV: 

img = image.copy()
(flag, encodedImage) = cv2.imencode(".jpg", img)
yield (b'--frame\r\n' b'Content-Type: image/jpeg\r\n\r\n' + bytearray(encodedImage) + b'\r\n')

socketio: 

def stream():
    print('emiting data')
    for video_frame in gen():
        socketio.emit('from_flask', {'data': video_frame},  namespace='/stream')

# streaming
@socketio.on('connect', namespace='/stream')
def test_connect():
    global thread2
    with thread_lock:
        if thread2 is None:
            thread2 = socketio.start_background_task(stream)

Клиент JS: 

socketStream.on('from_flask', function (msg) {
    var arrayBuffer = msg.data,
        bytes = new Uint8Array(arrayBuffer),
        image = document.getElementById('img');
    image.src = 'data:image/jpeg;base64,'+ encode(bytes);
    console.log(msg.data)
});

function encode (input) {
    var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
    var output = "";
    var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
    var i = 0;

    while (i < input.length) {
        chr1 = input[i++];
        chr2 = i < input.length ? input[i++] : Number.NaN; // Not sure if the index
        chr3 = i < input.length ? input[i++] : Number.NaN; // checks are needed here

        enc1 = chr1 >> 2;
        enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
        enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
        enc4 = chr3 & 63;

        if (isNaN(chr2)) {
            enc3 = enc4 = 64;
        } else if (isNaN(chr3)) {
            enc4 = 64;
        }
        output += keyStr.charAt(enc1) + keyStr.charAt(enc2) +
                  keyStr.charAt(enc3) + keyStr.charAt(enc4);
    }
    return output;
}
...