Потоковое видео в веб-браузер

Я хочу отображать видеопоток в реальном времени в веб-браузере. (Совместимость с IE, Firefox и Chrome была бы отличной, если это возможно.) Кто-то другой позаботится о потоковой передаче видео, но я должен иметь возможность получать и отображать его. Я буду получать видео по UDP, но пока я использую VLC только для потоковой передачи его себе в целях тестирования. Есть ли библиотека с открытым исходным кодом, которая может помочь мне добиться этого с помощью HTML и / или JavaScript? Или хороший веб-сайт, который помог бы мне разобраться, как это сделать самостоятельно?

Я немного читал о RTSP, который кажется традиционным вариантом для чего-то вроде этого. Это может быть то, к чему я должен прибегнуть, если я не могу сделать это с помощью UDP, но если это так, я все еще не уверен, как это сделать, используя RTSP / RTMP / RTP, или каковы различия между всеми этими аббревиатуры, если таковые имеются.

Я думал, что адаптивная потоковая передача HTTP может быть лучшим вариантом какое-то время, но казалось, что все решения, использующие ее, были проприетарными (Microsoft IIS Smooth Streaming, Apple HTTP Live Streaming или Adobe HTTP Dynamic Streaming), и у меня было мало Удачи в том, чтобы понять, как это сделать самостоятельно. MPEG-DASH тоже звучал как отличное решение, но, похоже, он еще не используется, так как он еще совсем новый. Но теперь мне сказали, что я в любом случае должен ожидать получения видео по UDP, поэтому эти решения, вероятно, для меня больше не имеют значения.

Я гуглил этот материал в течение нескольких дней, но не нашел ничего, что могло бы помочь мне его реализовать. Все, что я могу найти, это статьи, объясняющие, что такое технологии (например, RTSP, HTTP Adaptive Streaming и т. Д.) Или инструменты, которые вы можете купить для потоковой передачи собственных видео через Интернет. Будем признательны за ваше руководство!


javascript html streaming video video-streaming
person Steph    schedule 24.01.2012    source источник
comment
http://www-itec.uni-klu.ac.at/dash/?page_id=746   -  person Robert Rowntree    schedule 07.05.2012

Ответы (3)


arrow_upward
1
arrow_downward

Неверно, что большинство видеосайтов используют FLV, MP4 - это наиболее широко поддерживаемый формат, и он также воспроизводится через проигрыватели Flash. Самый простой способ добиться желаемого - открыть учетную запись S3Amzon / cloudFront и работать с JW player. Тогда у вас будет доступ к программному обеспечению RTMP для потоковой передачи видео и аудио. Эта услуга очень дешевая. если вы хотите узнать об этом больше, ознакомьтесь с этими руководствами: http://www.miracletutorials.com/category/s3-amazon-cloudfront/ Начните снизу и продвигайтесь к руководствам выше.

Надеюсь, это поможет тебе встать на путь.

person RudolfB    schedule 31.01.2012
comment
Спасибо за ссылку на руководства, они выглядят очень обстоятельными и полезными. - person Steph; 16.03.2012

arrow_upward
0
arrow_downward

Настоящая кроссбраузерная потоковая передача возможна только через «мультимедийные» клиенты, такие как Flash, поэтому почти все видеосайты по умолчанию обслуживают видео с использованием проприетарного формата .flv Adobe.

Для неживого видео появление видео встраиваний в HTML5 является многообещающим, и использование потоковой передачи Canvas и JavaSCript должно быть технически возможным, но обработка потоков и предварительная загрузка двоичных видеообъектов должна выполняться на JavaScript и не будет очень простой.

person buley    schedule 24.01.2012
comment
Так вы говорите, что в настоящее время действительно нет хорошего способа обработки потоковой передачи с помощью HTML5? Если это так, то, думаю, мне нужно прекратить использование HTML5, и это нормально, если есть другой способ заставить потоковое видео работать в веб-браузере. Вот почему я пытался изучить некоторые другие варианты, упомянутые в моем вопросе (например, RTSP). Нет ли простых способов реализовать и эти другие варианты? - person Steph; 26.01.2012
comment
Кроме того, что вы имеете в виду, когда говорите «предварительная загрузка двоичных видеообъектов». Я не совсем уверен, как видеообъект будет двоичным. Означает ли это просто возможность выключить / включить видео? - person Steph; 26.01.2012

arrow_upward
0
arrow_downward

Если вам не нужен звук, вы можете отправлять файлы JPEG с таким заголовком:

Content-Type: multipart / x-mixed-replace

Это простая демонстрация с nodejs, она использует библиотеку opencv4nodejs для генерации изображений. Вы можете использовать любой другой HTTP-сервер, который позволяет добавлять данные в сокет, сохраняя при этом соединение открытым. Проверено в Chrome и FF в Ubuntu Linux.

Чтобы запустить образец, вам нужно будет установить эту библиотеку с помощью npm install opencv4nodejs, это может занять некоторое время, а затем запустить сервер следующим образом: node app.js, вот приложение сам .js

var http = require('http')
const cv = require('opencv4nodejs');

var m=new cv.Mat(300, 300, cv.CV_8UC3);
var cnt = 0;
const blue = new cv.Vec3(255, 220, 120);
const yellow = new cv.Vec3(255, 220, 0);
var lastTs = Date.now();
http.createServer((req, res) => {
    if (req.url=='/'){
        res.end("<!DOCTYPE html><style>iframe {transform: scale(.67)}</style><html>This is a streaming video:<br>" +
            "<img  src='/frame'></img></html>")
    } else if (req.url=='/frame') {
        res.writeHead(200, { 'Content-Type': 'multipart/x-mixed-replace;boundary=myboundary' });
        var x =0;
        var fps=0,fcnt=0;
        var next = function () {
            var ts = Date.now();
            var m1=m.copy();
            fcnt++;
            if (ts-lastTs > 1000){
                lastTs = ts;
                fps = fcnt;
                fcnt=0;
            }
            m1.putText(`frame ${cnt}  FPS=${fps}`, new cv.Point2(20,30),1,1,blue);
            m1.drawCircle(new cv.Point2(x,50),10,yellow,-1);
            x+=1;
            if (x>m.cols) x=0;
            cnt++;
            var buf = cv.imencode(".jpg",m1);
            res.write("--myboundary\r\nContent-type:image/jpeg\r\nDaemonId:0x00258009\r\n\r\n");
            res.write(buf,function () {
                next();
            });
        };
        next();
    }
}).listen(80);

Чуть позже я нашел этот пример с более подробной информацией на python: https://blog.miguelgrinberg.com/post/video-streaming-with-flask

ОБНОВЛЕНИЕ: он также работает, если вы транслируете это в тег html img.

person Stepan Yakovenko    schedule 16.02.2020