suconghou / U2web
stream video with p2p
Stars: ✭ 97
Projects that are alternatives of or similar to U2web
P2p Cdn Sdk Javascript
Free p2p cdn github javascript sdk to reduce video streaming costs of live and on demand video using webrtc by upto 90% and improve scalability by 6x - 🚀 Vadootv 🚀
Stars: ✭ 158 (+62.89%)
Mutual labels: player, dash, webrtc, p2p
P2p Media Loader
An open-source engine for P2P streaming of live and on demand video directly in a web browser HTML page
Stars: ✭ 822 (+747.42%)
Mutual labels: player, dash, webrtc, p2p
P2P-DPlayer
DPLayer powered by CDNBye P2P Engine
Stars: ✭ 63 (-35.05%)
Mutual labels: player, webrtc, p2p
Ios P2p Engine
Let your viewers become your unlimitedly scalable CDN.
Stars: ✭ 31 (-68.04%)
Mutual labels: player, webrtc, p2p
Hlsjs P2p Engine
Let your viewers become your unlimitedly scalable CDN.
Stars: ✭ 759 (+682.47%)
Mutual labels: player, webrtc, p2p
Html5 Dash Hls Rtmp
🌻 HTML5播放器、M3U8直播/点播、RTMP直播、低延迟、推流/播流地址鉴权
Stars: ✭ 1,805 (+1760.82%)
Mutual labels: player, dash, webrtc
Android P2p Engine
Let your viewers become your unlimitedly scalable CDN.
Stars: ✭ 70 (-27.84%)
Mutual labels: player, webrtc, p2p
p2p-cdn-sdk-android
Free p2p cdn android github sdk to reduce video streaming costs of live and on demand video using webrtc by upto 90% and improve scalability by 6x - 🚀 Vadootv 🚀
Stars: ✭ 39 (-59.79%)
Mutual labels: player, p2p, dash
Peer Calls
Group peer to peer video calls for everyone written in Go and TypeScript
Stars: ✭ 837 (+762.89%)
Mutual labels: webrtc, p2p
Video.js
Video.js - open source HTML5 & Flash video player
Stars: ✭ 32,478 (+33382.47%)
Mutual labels: player, dash
Webrtc android
webrtc VideoCall VideoConference 视频通话 视频会议
Stars: ✭ 764 (+687.63%)
Mutual labels: webrtc, p2p
Libcrtc
WebRTC C++ library built on top of chromium webrtc.
Stars: ✭ 89 (-8.25%)
Mutual labels: webrtc, p2p
Viraljs
Express.JS middleware to enable P2P distribution for your app. Your decentralized CDN made easy.
Stars: ✭ 952 (+881.44%)
Mutual labels: webrtc, p2p
Webtorrent Cli
WebTorrent, the streaming torrent client. For the command line.
Stars: ✭ 633 (+552.58%)
Mutual labels: webrtc, p2p
Waggle.js
An experiment to distribute the bandwidth among video viewers
Stars: ✭ 29 (-70.1%)
Mutual labels: webrtc, p2p
Webtorrent Desktop
❤️ Streaming torrent app for Mac, Windows, and Linux
Stars: ✭ 8,587 (+8752.58%)
Mutual labels: webrtc, p2p
u2web
支持多源多线程下载的P2P视频分享
支持多线程下载
支持多源下载
CDN缓存友好,全部接口均可长缓存
下载引擎/播放引擎 https://github.com/suconghou/fastloadjs
P2P说明
P2P 分享使用的信令服务器 https://github.com/suconghou/signalserver
P2P 分享使用的网络库 https://github.com/suconghou/rtc
P2P分享当在线客户端播放的是同一资源(Chrome播放的是webm,Firefox播放的是mp4),同一清晰度时才会相互分享.
网站里的设置说明
这些设置一般无需更改,如播放卡顿,可修改视频解析服务
内容API服务
资源提供接口,调用有次数限制,一般使用默认值无需修改
可用的后端项目
https://github.com/suconghou/videoproxy
https://github.com/suconghou/u2proxyapi
视频解析服务
可用的后端项目
https://github.com/suconghou/videoproxy
使用cf workers 中转的 https://github.com/suconghou/u2worker
使用netlify functions 中转的 https://github.com/suconghou/netlifyworker
如果要使用多源负载均衡,可以使用多个地址,用;号隔开
例如
/video;https://stream.pull.workers.dev/video
代表当前域名的和部署在cf workers的两个地址负载均衡
注意第一个地址始终占有更高的权重,地址不可用后将会重试到其他地址.
信令服务器
一般无需修改
可用的后端项目
https://github.com/suconghou/signalserver
同一信令服务器下的用户才会相互分享
编译发布
注意修改 public/index.html public/play.html 中js库的版本号
然后执行 make release
组件模式
编译为组件模式
- 修改
service/index.js中abs变量为https绝对地址 - 执行
yarn buildwc
参数
v: {
type: String,
required: true
},
level : {
type:Number,
default:0,
},
autoplay: {
type: Boolean,
default: true
},
audio: {
type: Boolean,
default: false
},
playlist: {
type: [String, Array],
default: ""
}
nop2p: {
type: Boolean,
default: false,
},
screenshot: {
type: Boolean,
default: true,
},
作为web component组件,所有参数默认均为零值,需自己按需设置值
level 可配置 1 2 3 对应不同权限的清晰度
playlist仅在audio模式下可用,
可取值为一个播放列表ID,或者一个数组形式为
[
{
v:'视频ID',
title:'名称'
}
]
audio模式需开启autoplay
screenshot截图默认开启,播放器聚焦时快捷键s可直接触发
safari不支持对mse的视频截图,已对其屏蔽,见https://github.com/video-dev/hls.js/issues/1806
因需要MSE的支持,移动端手机IOS系统(IOS13,14等)均不支持,iPadOS 13+支持
https://stackoverflow.com/questions/52999825/why-exactly-doesnt-html5-media-source-video-work-on-ios
安卓微信支持,UC浏览器支持,手机QQ浏览器不支持.
embed video
click 嵌入视频 below the video player , It shows you how to embed iframe or component
when use web component, it needs some dependencies vue axios fastloadjs u2-player
a simple example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* only for css reset */
html{width:100%;height:100%;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}body{margin:0;width:100%;height:100%;}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
input,button,select,textarea{outline:none}textarea{resize:none}a{text-decoration:none;color:#000}ul{padding-left:0;list-style:none;}
/* css reset end */
.wrapper {
width: 70%;
margin: 10px auto;
background: #faa;
}
.player-box {
height: 0;
padding-bottom: 59%;
/* 最小56.25%, 稍微加大可留一些间距,看灰色底 */
background: #aaa; /* this is only for debug view */
}
.unsupport {
text-align: center;
padding-top: 100px;
font-size: 16px;
color: #f11;
}
</style>
</head>
<body>
<script>
// please set localStorage to use your own worker or videoproxy
// localStorage.setItem("baseurl","https://your_worker_or_videoproxy_domain/video");
</script>
<script src="https://cdn.jsdelivr.net/combine/npm/[email protected]/dist/vue.min.js,npm/[email protected]/dist/axios.min.js,gh/suconghou/[email protected]/fastload.min.js,gh/suconghou/[email protected]/u2-player.min.js"></script>
<div class="wrapper">
<div class="player-box">
<u2-player autoplay="true" nop2p="true" screenshot="true" v="9-4aWqk7b0k" id="video"></u2-player>
</div>
</div>
<script>
// optional , give message if browser too low
var modern = window.Promise &&
window.ReadableStream &&
window.fetch &&
window.ArrayBuffer &&
window.MediaSource;
if (!modern) {
var el = document.getElementsByClassName('player-box')
if (el && el.length) {
el[0].innerHTML = '<div class="unsupport">此浏览器不支持,请更换浏览器</div>'
}
}
</script>
</body>
</html>
notice
you should change service/index.js and yarn buildwc to use your own worker or videoproxy backend
or set localStorage on your website
本项目仅作为学习使用,切勿用作其他用途
更多说明可参考
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].