CODEWITHSUNDEEP
javascriptnode.jsvideostreamingnode.js-stream
nameless
nameless

Reputation: 1521

HTML video tag content as video stream to MPV player - node.js

I have a little node.js application. On it, I have a video tag that get its content from a canvas (via the captureStream()-method).

Now I'd like to somehow send this video stream to a MPV player (on the same device) to play it as a real live stream. For example as a UDP stream or something like that. Does anybody have an idea on how to do that?

<canvas id="mycanvas" width="600" height="600" style="border:2px solid;"></canvas>
<video id="video" autoplay
      style="border:1px solid black; height: 600px; width:600px;"></video>

This is the definition of the video tag (as well as of the canvas). How is it possible with node.js to send this video tag content as a stream to mpv player?

My video, as I said is basically from the canvas, so its an endless video and I don't have like an url, I just have the stream variable, which basically is just the following:

PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0.5…}
altKey
:
false
bubbles
:
true
button
:
-1
buttons
:
1
cancelBubble
:
false
cancelable
:
true
clientX
:
345
clientY
:
302
composed
:
true
ctrlKey
:
false
currentTarget
:
null
defaultPrevented
:
false
detail
:
0
eventPhase
:
0
fromElement
:
null
height
:
1
isPrimary
:
true
isTrusted
:
true
layerX
:
337
layerY
:
294
metaKey
:
false
movementX
:
10
movementY
:
14
offsetX
:
335
offsetY
:
292
pageX
:
345
pageY
:
302
path
:
Array(7)
pointerId
:
1
pointerType
:
"mouse"
pressure
:
0.5
relatedTarget
:
null
returnValue
:
true
screenX
:
345
screenY
:
368
shiftKey
:
false
sourceCapabilities
:
null
srcElement
:
canvas#mycanvas
tangentialPressure
:
0
target
:
canvas#mycanvas
tiltX
:
0
tiltY
:
0
timeStamp
:
2981.2900000000004
toElement
:
canvas#mycanvas
twist
:
0
type
:
"pointermove"
view
:
Window(0)
which
:
0
width
:
1
x
:
345
y
:
302

So basically only the variable is not a complete video yet, but the video tag enables the video. However I somehow need to transfer this "video" into the backend or somehow play it with mpv player or send a udp stream of this video to somewhere to receive it with a player.

Upvotes: 0

Views: 2160

Answers (1)

JHolub
JHolub

Reputation: 300

As far as I know MPV is actually able to playback streams if you just give the stream to it.

I have written an NPM package called Node-MPV that lets you control MPV from NodeJs like so

let mpv = require('node-mpv')
let player = new mpv();

player.loadStream('link/to/your/stream');

And you're good to go. Check the GitHub Documentation for more information and if it does, what you're looking for.

I'm reworking the module at the moment which will change the initilazion slightly using promises like so

let mpv = require('node-mpv')
let player = new mpv();

player.start().then(() => {
    player.loadStream('link/to/your/stream');
}
.catch((error) => {
    console.log(error);
});

While it is slightly more code it is also more stable.

And if you're looking for some kind of communication between the browser and your NodeJs server (possible realtime), have a look at SocketIO, it's really easy to use and very powerful.

Upvotes: 0

Related Questions