Code Monkey home page Code Monkey logo

airensoft / ovenplayer Goto Github PK

View Code? Open in Web Editor NEW
495.0 35.0 123.0 162.07 MB

OvenPlayer is JavaScript-based LLHLS and WebRTC Player for OvenMediaEngine.

Home Page: https://OvenMediaEngine.com/ovenplayer

License: MIT License

JavaScript 94.10% Shell 0.02% Less 4.78% Vue 1.01% TypeScript 0.09%
webrtc sub-second-latency-streaming low-latency-http mpeg-dash hls html5 ovenmediaengine streaming low-latency-dash lldash ovenplayer javascript javascript-player html5-player llhls low-latency-hls

ovenplayer's Introduction

OvenPlayer

What is OvenPlayer?

OvenPlayer is a JavaScript-based Player that can play Low Latency HLS (LLHLS) and WebRTC streams optimized for OvenMediaEngine. It provides various APIs, so you can build and operate your media service more easily.

Demo

OvenSpace is a sub-second latency streaming demo service using OvenMediaEngine, OvenPlayer and OvenLiveKit. You can experience OvenPlayer in the OvenSpace Demo and see examples of applying in OvenSpace Repository.

Features

  • HTML5 Standard Video Player
  • Live Streaming with Various Protocols
    • Sub-Second Latency: WebRTC (Signalling Protocol Conforms to the OME Specification)
    • Low Latency: LLHLS, LLDASH (Chunked CMAF)
    • Legacy: HLS, MPEG-DASH
  • Automatic Fallback Streaming
  • Fully Customizable UI and SDK
  • Insert ADs with Various Formats<
    • VAST4, VAST3, VAST2, VPAID2 (HTML5), VMAP1.0.1
  • Support Multiple Subtitle Formats
    • SMI, VTT, SRT

Quick Start

Please read the Quick Start.

OvenPlayer Demo

API and Configuration

Start the Demo and see API and Configuration for more details.

Build the source code

Check out Build section how to create ovenplayer.js for deployment or development after modifying the source code.

How to contribute

We appreciate your interest in OvenPlayer.

We need your help to keep and develop our open-source project, and we want to tell you that you can contribute in many ways. Please read our Guidelines, Rules, and Contribute.

We always hope that OvenPlayer will make your project a success.

For more information

License

OvenPlayer is licensed under the MIT license.

About AirenSoft

AirenSoft aims to make it easier for you to build a stable broadcasting/streaming service with Sub-Second Latency. Therefore, we will continue developing and providing the most optimized tools for smooth Sub-Second Latency Streaming.

Would you please click on each link below for details:

ovenplayer's People

Contributors

bchah avatar command-tab avatar dependabot[bot] avatar dimiden avatar dygy avatar emzawadzki avatar fcqpl avatar genofire avatar getroot avatar hernanrz avatar lee-hammer99 avatar leporel avatar marcosbozza avatar miaulightouch avatar mj1618 avatar morpheus235 avatar mrxermon avatar neuhaus avatar nums avatar rebound-software avatar sangwonoh avatar uelideschwert avatar xylanme avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ovenplayer's Issues

cant translate

Hi, i get your change language script from github but i get a error on console

ovenplayer.js:2 Uncaught TypeError: Cannot read property 'api' of undefined
at Object.t.init (ovenplayer.js:2)
at Object.s.create (ovenplayer.js:2)
at Object.u.create (ovenplayer.js:2)
at player.php:14

it say as you can see, cant read api property

Port Forwarding

Can someone tell me the exact ports I need to forward in my firewall to get this working on the internet for webrtc? The player comes up in the browser but the UDP traffic doesn't seem to be playing. I set the ICE port server.xml to just use 10000 and I have forwarded 10000/udp but still not working. Everything works locally.

Importing OvenPlayer is undefined even though in debugger it is not.

When I import in vue OvenPlayer like this after installing it:

import { OvenPlayer } from 'OvenPlayer'

and then do OvenPlayer("player", {}), I get the error "Type Error: cannot read property create of undefined"
When I do console.log(OvenPlayer), I get 'undefined' also.

However, in the debugger I have access to OvenPlayer which is not undefined but this:
Object {playerList: Array(0), create:, getPlayerList:, ...}

Is the issue with webpack?

help UI Customize

How to cover oven player in fullscreen mode
when ovenplayer is in fullscreen mode
I want to put the chat on top.
I created a chat layer and set the zindex 1099,9999.
There is still a layer under the ovenplayer.
Can you help me?

Switching between 2 WebRTC streams

Hello,

I'm wondering if/what I'm doing wrong when trying to switch between 2 webrtc streams

With only one source (live_o or live2_o) webrtc stream is playing nicely on demo page -> screen 1

screen1

Modifiying sources to include both webrtc streams, first stream is playing ok -> screen2

screen2

Switching from first to second stream -> screen 3

screen3

Second stream begins to play, but there are some errors - > screen 4

screen4

Switching back to first stream -> screen 5

screen5

Got more websocket errors -> screen 6
screen6

Added console screen with server when started and server configuration file

server
config1
config2

Kind Regards,

Valko

How to clean install?

I wanna remove old version and brandnew install OME.

Yum doesn't working on Centos 7.

how to remove?

Switching to HLS in Safari

Starting the player with HLS source works fine. However, if the first source is WebRTC, switching to HLS doesn't work both in mobile and desktop versions of Safari.
Demo

Customize Player Question

Hi -

I am really excited about this technology! I am using it to deliver real time live video in a school without needing VLC! This is absolutely perfect because teachers have Smartboards with an HTML5 browser.

I am using the following code in the player but when I am not sending RTMP traffic to it, the player displays the message Connection with low-latency(OME) server failed with a exclamation point in a triangle.

How might I modify this script to suppress this message in favor of a simple play button?

<script> let player = OvenPlayer.create("player", { autoStart: true, mute: false, title: "Bulldog Livestream Player (offline)", controls: true, currentProtocolOnly: true, sources: [ { host : 'ws://192.168.8.12:3333', application : 'app', stream : "stream", label : "WebRTC 1080P" } ] }); </script>

If the player pauses, will streaming continue?

Hi

I found in testing that streaming continues while the player video is paused. or the browser continued to play without timeout even when minimized without closing the browser.

Is there any way to stop streaming? Because this causes depletion of data capacity on mobile devices and accelerates battery consumption when considering services.

If there are other reasons to continue streaming, I would like to know the background.

I checked the oven player API but couldn't find any related support. I would like to know how to solve this.

[chrome://webrtc-internals]
image

WebRTC on Firefox doesn't work with or without a TURN server

I'm getting this error on the console
WebRTC: ICE failed, add a TURN server and see about:webrtc for more details

The same video plays fine on Safari and Chrome (both windows, mac os and mobile phones)

image

OvenMedia is running on Docker with default ICE ports 10000-10005/udp

Update package.json and publish to NPM

Thanks for this work and OME. It would be more convenient if this package was available on the npm directory.

I did a test of npm publish, and currently it fails due to:

npm ERR! 404  '[email protected]' is not in the npm registry.
npm ERR! 404 Your package name is not valid, because
npm ERR! 404  1. name can no longer contain capital letters

Do you have availability to do this? 

If not, let me know and I can have a go at making the package.json changes necessary and doing a publish, then handing over ownership to your team.

Access to OME via Player behind Firewall

Hi @ all,

at the moment we are trying to use your great product in a test-environment and after some small problems it is working great now.
For Home-Users which want to view the livestream (without outgoing firewall restrrictions) everything is working. But Users which are behind a company firewall it isnt working.

Its because several ports are blocked like 3334 tcp and most of the udp-ports. So they get "no connectin to OME".
As we cant say to them "ask your it-department for reconfigure the company firewall" its not possible for them to use it.

Is there a solution for that? Some sort of Reverse-Proxy or something like that?

Auto-refresh when streaming is not started...

I'm using webrtc and it works well...
Only one thing: if I go to the page with the oven player, but my friend has not started the streaming from OBS->OvenMediaEngine, the player says: "Connection with low-latency(OME) server failed."
After that, if my friend starts streaming from OBS, shouldn't the player start to show video alone automatically? Instead I have to refresh the page (but I don't know when my friend streaming will start... so I have to refresh many times...?!? )
Is it normal?

OvenPlayer issue on android chrome...

Hi... I'm testing ovenmediaengine...
I made a webpage with inside the oven player and on desktop I see my streaming in webrtc made with OBS (rtmp) to-> ovenmediaengine... without problems.
But same page seen in android mobile browser (chrome) at first load not working.. I have to refresh the page and then it works...
Do you know why?
In the ovenmediaengine.log I see this...

[2020-06-30 12:50:31.415] I 3424 HttpServer | http_server.cpp:225 | Client(xxx.xx.xxx.xxx:42208) is connected on 0.0.0.0:3334
[2020-06-30 12:50:31.498] I 3422 HttpServer | http_server.cpp:185 | Client(xxx.xx.xxx.xxx:42208) is requested uri: [https://streaming01.xxxxxx.xxx:3334/app/stream_o]
[2020-06-30 12:50:31.498] I 3422 Signalling | rtc_signalling_server.cpp:99 | New client is connected: <ClientSocket: 0x7f8637454910, #30, state: 4, TCP, xxx.xx.xxx.xxx:42208>
[2020-06-30 12:50:31.778] I 3422 HttpServer | http_server.cpp:286 | The HTTP client(xxx.xx.xxx.xxx:42208) has been disconnected from 0.0.0.0:3334 (101)
[2020-06-30 12:50:31.779] I 3422 Signalling | rtc_signalling_server.cpp:233 | Client is disconnected: <WebSocketClient: 0x7f8628cbac90, <ClientSocket: 0x7f8637454910, #30, state: 4, TCP, xxx.xx.xxx.xxx:42208>> (#xxx.xx.xxx.xxx#app / stream_o, ufr
ag: local: UK8bRa, remote: (N/A))

Android client connects just for a fraction of second and the disconnects after some ms.. (I see blank...)
But if I refresh page the streaming starts. Every time that I open a new browser window and I go to this page it happens this proble.. then refreshing page all goes ok...
What can it be?

The oven media player page I made is very simple:

<script src="ovenplayer/ovenplayer.js"></script> <style> </style>
<script> let player = OvenPlayer.create("player", { autoStart: true, mute: true, sources: [ { "file": "wss://streaming01.xxxxxxx.xxx:3334/app/stream_o", "type": "webrtc" } ] }); player.on("error", function(error){ console.log(error); }); </script>

Thx for answering... and for your great work :)

Switch Protocol

Does the OvenPlayer provide a method to switch from WebRTC to HLS or MPEG-DASH automatically or manually when the network environment is bad?

$(document).ready(function() { "Uncaught ReferenceError: $ is not defined

in production folder

<script src="./lib/vue.min.js"></script> Uncaught SyntaxError: Invalid or unexpected token <script src="./lib/dash.all.min.js"></script> Uncaught SyntaxError: missing ) after argument list <script src="./lib/clipboard.min.js"></script> <script src="./lib/jquery-1.12.4.min.js"></script>Uncaught SyntaxError: Invalid or unexpected token <script src="./lib/popper.min.js"></script> <script src="./lib/bootstrap.min.js"></script>Uncaught SyntaxError: Invalid or unexpected token <script src="./ovenplayer/ovenplayer.js"></script> Uncaught SyntaxError: Invalid or unexpected token

Hello, AirenSoft team.

Can you let me know about autoplay .html sample?
My html text is...
<script>
var player = OvenPlayer.create("player", {autoStart:true},
sources: [
{
"file": "ws://0.0.0.0/app/stream_o",
"type": "webrtc"
}
]
},);

    hljs.initHighlightingOnLoad();

But doesn't working....
I'm beginner. Help me.

[Questions] Functional request

Hello!
Does this player have the following features:

  1. An opportunity for manual switching of quality of HLS
  2. Is it possible to install the VTT file for preview when hovering over the progress bar?

autoStrat option doesn't

i'm using the OMEPlayer to reproduce my streaming.
The option autoStrat doesn't work and don't start playing.
My code is:

player = OvenPlayer.create("player", { autoStart : true, mute : true, sources:[omeURL] });

Can't use RTMP stream as input directly

Thank for this great player!

It seems that OvenPlayer fails to support RTMP source natively, although, the Demo shows we can select RTMP as the source.

The code:

player = OvenPlayer.create("player", {
sources: [
{
"file": "rtmp://stream.example.com/app/mystream",
"type": "rtmp"
}
]
});

The error:

{code: 101, message: "Can not load due to unsupported media.", reason: "Can not load due to unsupported media."}

Is there any plan to support RTMP source?

Thanks.

On mobile device not work.

Update OME ver. 10.6 to 10.7

On PC working as well.

Mobile device apple and samsung phone just circle looping.

How has same problem? protocol is webrtc.

playbox was not displayed

Hello, when I tested the ovenplayer demo, I found that the playbox was not displayed(firefox,chrom..), and didn't give the user any hints. It seems to be because there is no flash installed. But the ovenplayer is an html5 player. Is there something wrong with it?
qq 20181219175413

Change Text on connection error

Hi Together,

is it possible to change the text which is displayed when there is an error like:

image

This one is shown when nothing is streamed but showing an errormessage on a publishing website results in panic by the enduser ;-)

Synchronize the playback time

Hello,

With Oven Player, can we synchronize the playback time between the server (or the backend admin), where I will send the web socket signal every 1s to the connected client, to let them know we're at the second of 59, and the client will update accordingly?

Why I ask this since I want, at the time of 60, on every client connected, I will show a message.

But the user's connectivity might be different, the delay between each client might be +-5 seconds, maybe.

So, depending on an admin view, where the player is playing 60s, we will send a signal contains a message to the client.

Then the client's time meets the 60s, it will show the message.

Could we achieve this?

Thank you!

Let's Encrypt in OvenMediaEngine

Good morning, I understand that Let's Encrypt is installed over Apache or Nginx. But in the case of OvenMediaEngine, how should I install it? I need the embedded video to be viewed on sites with SSL active! Thank you!

Embedded Player

Good morning, I tell you that I have a problem with OvenPlayer. I downloaded the OvenPlayer from this site and unzipped it, there are several files and folders and almost all have examples of video playback and only one with example of streaming (oem_player) but when changing the addresses it does not contact! Can someone tell me what else I should do? I only need the video frame to embed on my website!

Seamless switching streams

Hi,

Id like to be able to switch streams seamlessly, an approach is start receiving as soon as the player is told but only start decoding/displaying when there is enough data.

Then further we could optimise the switching algorithm so that the player switches on its own, up quality when the buffer is full and reduce quality if the buffer is nearly empty maybe.

Please discuss solutions and where I might modify the source - this is my first contribution ;)

Thanks,

Ian

Hardcoded DNS Server

Hey,

It looks like the JavaScript player hard codes to use dns.google.com to resolve the backend server:

fetch('https://dns.google.com/resolve?name=' + newDomain)

As well as a hard-coded google STUN server:

'urls': 'stun:stun.l.google.com:19302'

This makes the player unusable when users have Google sources/domains blocked.

It would be nice if this could be configured or bypassed without having to ad-hoc patch the JavaScript.

Thanks

Chrome and Safari WebRTC Stereo Audio Downmix To Mono

Hi,

During testing, we noticed that WebRTC stereo audio is being downmixed to mono within chrome and safari. Firefox is working as expected. It appears that the issue is related to this open issue (https://bugs.chromium.org/p/webrtc/issues/detail?id=8133). I believe they also outline a potential work around in the thread.

Not sure if this belongs in the player repo or the ovenmediaengine repo. Please let me know if you want me to move this issue.

How to add a thumbnail ?

Hi ! I have a page with a list of streams displayed and I show a preview of the stream when the mouse hovers over a stream. However, when the page is loaded, all the streams display a black screen with the play button.

Is there a way to capture an image of the stream to make a thumbnail of it? And is it possible to remove the play button ? (I already set controls to false).

Regards,

Matéo

Feature request: Set Buffer in WebRTC

Is it possible to set 0.5 or 1 second buffering for WebRTC so it adds some delay but ensures seamless playback? I don't even know if it's possible but it would be great if there was such an option and something that's dynamic (so it can reduce and increase buffer depending on the network conditions)

How to use a TURN server with credentials?

According to documentation, we can either enter STUN or TURN server to OvenPlayer. However, what's the correct way of entering TURN server with credentials?

below is my STUN experiment and it's working (or it's using this server by default and I'm not making a dent)
webrtcConfig : [{iceServers : "stun.l.google.com:19302"}]
 

About ads

Hi, Docs ads not Say a lot, does it can show popups every x time ??? How can i do it ir it can??? As i told You the doc not Say a lot.

Thanks and go on

Need help with player...

Can someone tell me why this does not work and display the player? I realize I need to customize the host, port etc but I would expect this to display the player on the html page.

<!doctype html>

<script src="dist/production/ovenplayer/ovenplayer.js"></script> <title>OvenPlayer For OME</title>
<script> let webrtcSources = [{type : "webrtc", file : "ws://host:port/app/stream_1080", label : "1080"}, {type : "webrtc", file : "ws://host:port/app/stream_480", label : "480P"}] let player = OvenPlayer.create("player_id", { sources: webrtcSources }); </script>

UI Customize

Hello ! I'm sorry to bother you again for so little, I should have asked that in my last post.

The player documentation tells us that we can change the color of the volume bar and the loader circle by providing us their classes : .ovp-volume-silder .ovp-volume-slider-value for the volume and .ovp-ellipsis div for the loader.

However, I tried to change background color, line color, and many other elements but nothing worked :(

Can someone please help me?

Thank you for your help.

Mateo

Set resolution or size of ovenplayer

Hi,
I am very new to Onvenmediaengine and Ovenplayer. Apologies in advance if my question sounds noob.

When i call Ovennplayer on my web page; my content is 800x600 and it plays fine; however there are 2 vertical black band in the player window itself. i have gone through the documentation but was not able to find a solution to set the right size of the player window. any guidance / pointers will help

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.