-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
113 lines (95 loc) · 3.53 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO Webhooks</title>
<script src="https://unpkg.com/@mux/upchunk@2"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<style>
.response{
padding: 1em;
font-family: 'Courier New', Courier, monospace;
font-size: medium;
border: 2px solid #565252;
width: 100%;
margin: 1em auto;
}
</style>
</head>
<body>
<div style="width: 1000px;margin:auto">
<h1 style="text-align:center">Create Asset</h1>
<input type="text" placeholder="asset url" id="asset_url" style="display:block;margin:auto" />
<button onClick="javascript: createAssetFromUrl();" style="display:block;margin:auto">Create Asset</button>
<h1 style="text-align:center">Direct Upload</h1>
<input id="picker" type="file" style="display:block;margin:auto" />
<video
id="my-player"
controls
style="width: 100%; max-width: 500px; display:block; margin: 1em auto"
></video>
<h1 style="text-align:center">Received webhooks</h1>
<div id="msg"></div>
</div>
<script>
const createAssetFromUrl = async () => {
const rawResponse = await fetch('/create', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({url: $('#asset_url').val()})
});
}
const socket = io();
socket.on("webhook", function(message) {
if(message.data.hasOwnProperty('playback_ids')){
const playbackid = message.data.playback_ids[0].id;
playVideo(playbackid);
}
console.log("webhook: ", message);
$( "#msg" ).prepend(
$('<pre></pre>').addClass('response').text(JSON.stringify(message, null, ' '))
);
});
const picker = document.getElementById('picker');
picker.onchange = async () => {
const fetchUploadUrl = await fetch('/url');
const getUploadUrl = await fetchUploadUrl.text();
console.log(getUploadUrl);
const upload = UpChunk.createUpload({
endpoint: getUploadUrl,
file: picker.files[0],
chunkSize: 30720,
});
upload.on('error', err => {
console.error('💥 🙀', err.detail);
});
upload.on('progress', progress => {
console.log(`So far we've uploaded ${progress.detail}% of this file.`);
});
upload.on('success', () => {
console.log("Wrap it up, we're done here. 👋");
});
};
function playVideo(playbackid){
const video = document.querySelector('#my-player');
const src = `https://stream.mux.com/${playbackid}.m3u8`;
if (video.canPlayType('application/vnd.apple.mpegurl')) {
// Some browsers (safari and ie edge) support HLS natively
video.src = src;
video.play();
} else if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(src);
hls.attachMedia(video);
video.play();
} else {
console.error("This is a legacy browser that doesn't support MSE");
}
}
</script>
</body>
</html>