Skip to content

Instantly share code, notes, and snippets.

@moeiscool

moeiscool/ffmpegToWeb.js

Last active January 27, 2025 16:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save moeiscool/e2a584cca6f4e3f1691a96b6c56856f9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save moeiscool/e2a584cca6f4e3f1691a96b6c56856f9 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. moeiscool revised this gist Oct 30, 2017. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,9 @@
    <script src="http://cdn.shinobi.video/js/socket.io.js"></script>
    <script src="http://cdn.shinobi.video/js/jquery.min.js"></script>
    <!--Special JSMPEG Start-->
    <!--You need this version. Check for updates here https://github.com/ShinobiCCTV/jsmpeg-pipe -->
    <script src="http://cdn.shinobi.video/js/jsmpeg.pipe.js"></script>
    <!--Special JSMPEG End-->
    <canvas id="canvas" height=500 width=500></canvas>
    <script>
    //start socket.io client connection
  2. moeiscool revised this gist Oct 30, 2017. 2 changed files with 17 additions and 11 deletions.
    4 changes: 2 additions & 2 deletions ffmpegToWeb.js
    View file
    Original file line number Diff line number Diff line change
    @@ -85,8 +85,8 @@ app.get(['/h264','/h264/:feed'], function (req, res) {
    //ffmpeg
    console.log('Starting FFMPEG')
    var ffmpegString = '-i '+config.url+''
    ffmpegString += ' -f mpegts -c:v copy -an http://localhost:'+config.port+'/streamIn/1'
    ffmpegString += ' -f mpegts -c:v copy -an http://localhost:'+config.port+'/streamIn/2'
    ffmpegString += ' -f mpegts -c:v mpeg1video -an http://localhost:'+config.port+'/streamIn/1'
    ffmpegString += ' -f mpegts -c:v mpeg1video -an http://localhost:'+config.port+'/streamIn/2'
    if(ffmpegString.indexOf('rtsp://')>-1){
    ffmpegString='-rtsp_transport tcp '+ffmpegString
    }
    24 changes: 15 additions & 9 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,16 +3,22 @@
    <script src="http://cdn.shinobi.video/js/jsmpeg.pipe.js"></script>
    <canvas id="canvas" height=500 width=500></canvas>
    <script>
    var socket = io();
    console.log(socket)
    //start socket.io client connection
    var socket = io();
    //on socket.io connection success
    socket.on('connect',function(){
    //pretend this is the command you use to initiate getting H.264 (MPEG) data
    socket.emit('f',{function:'getStream',feed:'2'})
    })
    var player = new JSMpeg.Player('pipe',{
    canvas:document.getElementById('canvas')
    });
    socket.on('h264', function (data) {
    console.log(data)
    player.write(data.buffer)
    });
    // initiate a player that can be piped to.
    var player = new JSMpeg.Player('pipe',{
    canvas:document.getElementById('canvas')
    });
    //on data from "h264" handle
    socket.on('h264', function (data) {
    // `data.buffer` is the raw video data from FFMPEG
    // pretend you are getting data as follows
    // var data = {buffer:ArrayBuffer}
    player.write(data.buffer)
    });
    </script>
  3. moeiscool revised this gist Oct 29, 2017. 1 changed file with 0 additions and 3 deletions.
    3 changes: 0 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -11,9 +11,6 @@
    var player = new JSMpeg.Player('pipe',{
    canvas:document.getElementById('canvas')
    });
    socket.on('data', function (data) {
    console.log(data)
    });
    socket.on('h264', function (data) {
    console.log(data)
    player.write(data.buffer)
  4. moeiscool revised this gist Oct 29, 2017. 1 changed file with 0 additions and 2 deletions.
    2 changes: 0 additions & 2 deletions ffmpegToWeb.js
    View file
    Original file line number Diff line number Diff line change
    @@ -37,8 +37,6 @@ app.get('/', function (req, res) {
    //ffmpeg pushed stream in here to make a pipe
    app.all('/streamIn/:feed', function (req, res) {
    req.Emitter = initEmitter(req.params.feed)
    console.log('STREAM_'+req.params.feed)
    req.Recipient =
    //req.params.feed = Feed Number (Pipe Number)
    res.connection.setTimeout(0);
    req.on('data', function(buffer){
  5. moeiscool revised this gist Oct 29, 2017. 1 changed file with 39 additions and 37 deletions.
    76 changes: 39 additions & 37 deletions ffmpegToWeb.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,17 @@
    // Shinobi (http://shinobi.video) - FFMPEG H.264 over HTTP Test
    // How to Use
    // 0. run `npm install`
    // How to Use raw H.264 (Simulated RTSP)
    // 1. Start with `node ffmpegToWeb.js`
    // 2. Get the IP address of the computer where you did step 1. Example : 127.0.0.1
    // 3. Open VLC and "Open Network Stream".
    // 4. Input the following without quotes : `http://127.0.0.1:8001` and start.
    // 4. Input the following without quotes : `http://127.0.0.1:8001/h264` and start.

    var child = require('child_process');
    var io = require('socket.io');
    var events = require('events');
    var express = require('express')
    var app = express();
    var server = require('http').Server(app);
    var io = require('socket.io')(server);
    var spawn = child.spawn;
    var exec = child.exec;
    var Emitters = {}
    @@ -22,39 +25,16 @@ var initEmitter = function(feed){
    }
    return Emitters[feed]
    }
    //ffmpeg
    console.log('Starting FFMPEG')
    var ffmpegString = '-i '+config.url+''
    ffmpegString += ' -f mpegts -c:v copy -an http://localhost:'+config.port+'/streamIn/1'
    ffmpegString += ' -f mpegts -c:v copy -an http://localhost:'+config.port+'/streamIn/2'
    if(ffmpegString.indexOf('rtsp://')>-1){
    ffmpegString='-rtsp_transport tcp '+ffmpegString
    }
    console.log('Executing : ffmpeg '+ffmpegString)
    var ffmpeg = spawn('ffmpeg',ffmpegString.split(' '));
    ffmpeg.on('close', function (buffer) {
    console.log('ffmpeg died')
    })
    //ffmpeg.stderr.on('data', function (buffer) {
    // console.log(buffer.toString())
    //});
    //ffmpeg.stdout.on('data', function (buffer) {
    // Emitter.emit('data',buffer)
    //});
    //web app
    console.log('Starting Express Web Server on Port '+config.port)

    var express = require('express')
    var app = express();
    var server = require('http').Server(app);
    var io = require('socket.io')(server);

    server.listen(config.port);

    app.get('/', function (req, res) {
    res.sendFile(__dirname + '/index.html');
    })

    //ffmpeg pushed stream in here to make a pipe
    app.all('/streamIn/:feed', function (req, res) {
    req.Emitter = initEmitter(req.params.feed)
    console.log('STREAM_'+req.params.feed)
    @@ -70,6 +50,19 @@ app.all('/streamIn/:feed', function (req, res) {
    });
    })

    //socket.io client commands
    io.on('connection', function (cn) {
    cn.on('f',function (data) {
    switch(data.function){
    case'getStream':
    console.log(data)
    cn.join('STREAM_'+data.feed)
    break;
    }
    })
    });

    //simulate RTSP over HTTP
    app.get(['/h264','/h264/:feed'], function (req, res) {
    if(!req.params.feed){req.params.feed='1'}
    req.Emitter = initEmitter(req.params.feed)
    @@ -91,13 +84,22 @@ app.get(['/h264','/h264/:feed'], function (req, res) {
    })
    });

    io.on('connection', function (cn) {
    cn.on('f',function (data) {
    switch(data.function){
    case'getStream':
    console.log(data)
    cn.join('STREAM_'+data.feed)
    break;
    }
    })
    });
    //ffmpeg
    console.log('Starting FFMPEG')
    var ffmpegString = '-i '+config.url+''
    ffmpegString += ' -f mpegts -c:v copy -an http://localhost:'+config.port+'/streamIn/1'
    ffmpegString += ' -f mpegts -c:v copy -an http://localhost:'+config.port+'/streamIn/2'
    if(ffmpegString.indexOf('rtsp://')>-1){
    ffmpegString='-rtsp_transport tcp '+ffmpegString
    }
    console.log('Executing : ffmpeg '+ffmpegString)
    var ffmpeg = spawn('ffmpeg',ffmpegString.split(' '));
    ffmpeg.on('close', function (buffer) {
    console.log('ffmpeg died')
    })
    //ffmpeg.stderr.on('data', function (buffer) {
    // console.log(buffer.toString())
    //});
    //ffmpeg.stdout.on('data', function (buffer) {
    // Emitter.emit('data',buffer)
    //});
  6. moeiscool created this gist Oct 29, 2017.
    103 changes: 103 additions & 0 deletions ffmpegToWeb.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,103 @@
    // Shinobi (http://shinobi.video) - FFMPEG H.264 over HTTP Test
    // How to Use
    // 0. run `npm install`
    // 1. Start with `node ffmpegToWeb.js`
    // 2. Get the IP address of the computer where you did step 1. Example : 127.0.0.1
    // 3. Open VLC and "Open Network Stream".
    // 4. Input the following without quotes : `http://127.0.0.1:8001` and start.

    var child = require('child_process');
    var io = require('socket.io');
    var events = require('events');
    var spawn = child.spawn;
    var exec = child.exec;
    var Emitters = {}
    var config = {
    port:8001,
    url:'rtsp://131.95.3.162/axis-media/media.3gp'
    }
    var initEmitter = function(feed){
    if(!Emitters[feed]){
    Emitters[feed] = new events.EventEmitter().setMaxListeners(0)
    }
    return Emitters[feed]
    }
    //ffmpeg
    console.log('Starting FFMPEG')
    var ffmpegString = '-i '+config.url+''
    ffmpegString += ' -f mpegts -c:v copy -an http://localhost:'+config.port+'/streamIn/1'
    ffmpegString += ' -f mpegts -c:v copy -an http://localhost:'+config.port+'/streamIn/2'
    if(ffmpegString.indexOf('rtsp://')>-1){
    ffmpegString='-rtsp_transport tcp '+ffmpegString
    }
    console.log('Executing : ffmpeg '+ffmpegString)
    var ffmpeg = spawn('ffmpeg',ffmpegString.split(' '));
    ffmpeg.on('close', function (buffer) {
    console.log('ffmpeg died')
    })
    //ffmpeg.stderr.on('data', function (buffer) {
    // console.log(buffer.toString())
    //});
    //ffmpeg.stdout.on('data', function (buffer) {
    // Emitter.emit('data',buffer)
    //});
    //web app
    console.log('Starting Express Web Server on Port '+config.port)

    var express = require('express')
    var app = express();
    var server = require('http').Server(app);
    var io = require('socket.io')(server);

    server.listen(config.port);

    app.get('/', function (req, res) {
    res.sendFile(__dirname + '/index.html');
    })

    app.all('/streamIn/:feed', function (req, res) {
    req.Emitter = initEmitter(req.params.feed)
    console.log('STREAM_'+req.params.feed)
    req.Recipient =
    //req.params.feed = Feed Number (Pipe Number)
    res.connection.setTimeout(0);
    req.on('data', function(buffer){
    req.Emitter.emit('data',buffer)
    io.to('STREAM_'+req.params.feed).emit('h264',{feed:req.params.feed,buffer:buffer})
    });
    req.on('end',function(){
    console.log('close');
    });
    })

    app.get(['/h264','/h264/:feed'], function (req, res) {
    if(!req.params.feed){req.params.feed='1'}
    req.Emitter = initEmitter(req.params.feed)
    var contentWriter
    var date = new Date();
    res.writeHead(200, {
    'Date': date.toUTCString(),
    'Connection': 'keep-alive',
    'Cache-Control': 'no-cache',
    'Pragma': 'no-cache',
    'Content-Type': 'video/mp4',
    'Server': 'Shinobi H.264 Test Stream',
    });
    req.Emitter.on('data',contentWriter=function(buffer){
    res.write(buffer)
    })
    res.on('close', function () {
    req.Emitter.removeListener('data',contentWriter)
    })
    });

    io.on('connection', function (cn) {
    cn.on('f',function (data) {
    switch(data.function){
    case'getStream':
    console.log(data)
    cn.join('STREAM_'+data.feed)
    break;
    }
    })
    });
    21 changes: 21 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    <script src="http://cdn.shinobi.video/js/socket.io.js"></script>
    <script src="http://cdn.shinobi.video/js/jquery.min.js"></script>
    <script src="http://cdn.shinobi.video/js/jsmpeg.pipe.js"></script>
    <canvas id="canvas" height=500 width=500></canvas>
    <script>
    var socket = io();
    console.log(socket)
    socket.on('connect',function(){
    socket.emit('f',{function:'getStream',feed:'2'})
    })
    var player = new JSMpeg.Player('pipe',{
    canvas:document.getElementById('canvas')
    });
    socket.on('data', function (data) {
    console.log(data)
    });
    socket.on('h264', function (data) {
    console.log(data)
    player.write(data.buffer)
    });
    </script>
    15 changes: 15 additions & 0 deletions package.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    {
    "name": "ffmpegtoweb",
    "version": "1.0.0",
    "description": "Shinobi Testing Tool for H.264 over HTTP and Socket.IO",
    "main": "ffmpegToWeb.js",
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    },
    "dependencies": {
    "express": "^4.14.0",
    "socket.io": "^1.7.1"
    },
    "author": "Moe Alam",
    "license": "MIT"
    }