Question

57

How to publish a live video stream from HTML and JavaScript?

rated 0 times [ 63] [ 6] / answers: 1 / hits: 16134 / 7 Years ago, thu, february 2, 2017, 12:00:00

I have this piece of code which takes input the the camera and displays it within the web browser window (works only if served from a web server, not directly by opening a file):

<html>

<body>



<video id=video width=640 height=480 autoplay=true></video>



<script>

    var video = document.getElementById('video');

    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {

        navigator.mediaDevices.getUserMedia({video: true}).then(function (stream) {

            video.src = window.URL.createObjectURL(stream);

            video.play();

        });

    }

</script>



</body>

</html>

I'd like to live-stream the video it to a URL (example: to /publish/?password= as in https://github.com/vbence/stream-m)

How do I code that?

Thanks!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

sonja

Add To Favorites

Follow

Total Points: 541

Total Questions: 113

Total Answers: 114

Location: Anguilla

Member since Sun, Jan 29, 2023

1 Year ago

sonja questions

1 Filtering table data for multiple columns Angular 10

Mon, Nov 30, 20, 00:00, 4 Years ago

1 Auto clear cache from browser

Sun, Oct 11, 20, 00:00, 4 Years ago

1 react-table has a issue with rendering in next.js

Thu, May 21, 20, 00:00, 4 Years ago

1 How to stop purging tailwind components

Sun, Nov 10, 19, 00:00, 5 Years ago

1 JS - String includes a substring that matches regex

Mon, Aug 26, 19, 00:00, 5 Years ago

View All

answered 7 Years ago samir · Accepted Answer

The best practice approach, especially if you expect to have multiple clients viewing the video is to stream to a video streaming server and then have the video streaming server stream it to the individual clients.

Video streaming servers are available opensource or commercial and are quiet specialised with mechanisms to maximise device coverage and to handle different network conditions and device screen size/resolutions. rebuilding this type of functionality yourself would not be trivial.

Below is an example of the approach using Wowza a commercial streaming server (I have no affiliation to them):

More info here (from where the above picture was taken): https://www.wowza.com/products/capabilities/webrtc-streaming-software

An source example of streaming servers which will support similar approaches is GStreamer:

https://gstreamer.freedesktop.org

Update

Some links with info on using the Janus server. This supports connections from WebRTC clients and includes a streaming plugin:

https://github.com/meetecho/janus-gateway

https://github.com/meetecho/janus-gateway/blob/master/plugins/janus_streaming.c