rodolfoap/README.md

## README.md

      
    Raw
  

              README.md
            
          
    HTML5 <video> tag exercise

Simple HTML5 video client/server application, which works fine in Chromium, but DOES NOT WORK in Firefox.
Start the server (node server.js), launch your Firefox browser, press F12 to open debug tools and connect to http://localhost:3000
Notes


Video taken from https://motchallenge.net/vis/PETS09-S2L1
Stackoverflow: https://stackoverflow.com/questions/78192326/html5-sourcebuffer-stalls-in-firefox


## index.html
<!DOCTYPE html><html><body>

<video id="videoElement" width="320" height="240" autoplay controls></video>
<script src="/socket.io/socket.io.js"></script>
<script>
	const socket = io();
	const videoElement = document.getElementById('videoElement');
	const mediaSource = new MediaSource();
	videoElement.src = URL.createObjectURL(mediaSource);
	socket.on('connect', () => {socket.emit('offer', 'start');});
	mediaSource.addEventListener("sourceopen", (event) => {
		const sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs=vp8');
		socket.on('data', (data) => {
			// console.log(sourceBuffer.buffered);
			console.log("data: "+data.byteLength+" bytes");
			sourceBuffer.appendBuffer(data);
		});
	});
</script>

</body></html>

## server.js
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const socketIo = require('socket.io');
const io = socketIo(server);
const ffmpegPath = require('@ffmpeg-installer/ffmpeg').path;
const ffmpeg = require('fluent-ffmpeg');
ffmpeg.setFfmpegPath(ffmpegPath);
app.get('/', (req, res) => {res.sendFile(__dirname + '/index.html');});
io.on('connection', (socket) => {
	console.log('connection');
	socket.on('offer', (offer) => {
		console.log(`offer: ${offer}`);
		ffmpeg()
			.input('video.mp4')
			.inputFormat('mp4')
			.outputOptions(['-vf', 'scale=320:240', '-an', '-pix_fmt', 'yuv420p', '-vcodec', 'libvpx', '-preset', 'slow', '-crf', '18', '-strict', 'experimental'])
			.outputFormat('webm')
			.pipe()
			.on('data', function(data) {
				console.log('emit: ' + data.length + ' bytes');
				socket.emit('data', data );
			});
	})
});
server.listen(3000, () => {console.log('Server running on http://localhost:3000');});

## video.mp4

      
    Raw
  

              video.mp4
            
          
      This file has been truncated, but you can view the full file.
    

            View raw
	<!DOCTYPE html><html><body>

	<video id="videoElement" width="320" height="240" autoplay controls></video>
	<script src="/socket.io/socket.io.js"></script>
	<script>
	const socket = io();
	const videoElement = document.getElementById('videoElement');
	const mediaSource = new MediaSource();
	videoElement.src = URL.createObjectURL(mediaSource);
	socket.on('connect', () => {socket.emit('offer', 'start');});
	mediaSource.addEventListener("sourceopen", (event) => {
	const sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs=vp8');
	socket.on('data', (data) => {
	// console.log(sourceBuffer.buffered);
	console.log("data: "+data.byteLength+" bytes");
	sourceBuffer.appendBuffer(data);
	});
	});
	</script>

	</body></html>
	const express = require('express');
	const app = express();
	const http = require('http');
	const server = http.createServer(app);
	const socketIo = require('socket.io');
	const io = socketIo(server);
	const ffmpegPath = require('@ffmpeg-installer/ffmpeg').path;
	const ffmpeg = require('fluent-ffmpeg');
	ffmpeg.setFfmpegPath(ffmpegPath);
	app.get('/', (req, res) => {res.sendFile(__dirname + '/index.html');});
	io.on('connection', (socket) => {
	console.log('connection');
	socket.on('offer', (offer) => {
	console.log(`offer: ${offer}`);
	ffmpeg()
	.input('video.mp4')
	.inputFormat('mp4')
	.outputOptions(['-vf', 'scale=320:240', '-an', '-pix_fmt', 'yuv420p', '-vcodec', 'libvpx', '-preset', 'slow', '-crf', '18', '-strict', 'experimental'])
	.outputFormat('webm')
	.pipe()
	.on('data', function(data) {
	console.log('emit: ' + data.length + ' bytes');
	socket.emit('data', data );
	});
	})
	});
	server.listen(3000, () => {console.log('Server running on http://localhost:3000');});