Mirroristas/gun
2
0
Fork 0
mirror of https://github.com/amark/gun.git synced 2025-06-07 22:56:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

cleaner & smaller video & upload

Browse Source
This commit is contained in:
Mark Nadal 2020-05-23 22:35:47 -07:00
parent c45950a771
commit 47a841fbcd
2 changed files with 29 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
examples/basic/upload.html
View File

@ -1,9 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<center> <center>
<video width="100%" controls="controls"></video> <video width="100%" controls autoplay></video>
<audio width="100%" controls autoplay></audio>
<img style="max-width: 100%;"> <img style="max-width: 100%;">
<span id="up">Drag & drop video or image to upload!</span> <p>Drag & drop videos, songs, or images to upload!</p>
</center> </center>
<script src="../jquery.js"></script> <script src="../jquery.js"></script>
@ -22,11 +23,12 @@ $('html').upload(function resize(eve, up){
}) })
gun.get('test').get('paste').on(function(data){ gun.get('test').get('paste').on(function(data){
$('video, img').css({display: 'none'}) $('video, audio, img').css({display: 'none'})
if(!data){ return } if(!data){ return }
var type = data.split(';')[0], ui; var type = data.split(';')[0], ui;
if(type.indexOf('image') + 1){ ui = $("img") } if(type.indexOf('image') + 1){ ui = $("img") }
if(type.indexOf('video') + 1){ ui = $('video') } if(type.indexOf('video') + 1){ ui = $('video') }
if(type.indexOf('audio') + 1){ ui = $('audio') }
($(ui).css({display: 'block'}).get(0)||{}).src = data; ($(ui).css({display: 'block'}).get(0)||{}).src = data;
}) })
</script> </script>

69
examples/basic/video.html
View File

@ -1,9 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<video id="video" width="100%"></video> <video id="video" width="100%" controls autoplay></video>
<center> <center>
<input id="pass" placeholder="password"> <input id="pass" placeholder="password">
<button id="play">Play</button>
Record <button class="record">Camera</button> or <button class="record">Screen</button> Record <button class="record">Camera</button> or <button class="record">Screen</button>
</center> </center>
@ -13,27 +12,36 @@
<script> <script>
var gun = Gun(location.origin + '/gun'); var gun = Gun(location.origin + '/gun');
var record = {recorder: null, recording: false};
$('.record').on('click', function(){ gun.get('test').get('video').on(async function(data){
if(record.ing){ return } if($('#pass').val()){ data = await SEA.decrypt(data, $('#pass').val()) }
record.stream($(this).text()); $('#video').get(0).src = data;
}) })
record.stream = function(type){ $('.record').on('click', function(){
if(record.ing){
if(record.ing.stop){ record.ing.stop() }
$(this).text(record.type);
record.ing = false;
return;
}
record(record.type = $(this).text());
$(this).text("End");
})
function record(type){
if('Camera' === type){ if('Camera' === type){
navigator.getMedia({ video: true, audio: true }, stream, error); navigator.getMedia({ video: true, audio: true }, load, error);
} }
if('Screen' === type){ if('Screen' === type){
navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }).then(stream, error); navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }).then(load, error);
} }
function stream(stream){ function load(media){
var chunks = []; // we have a stream, we can record it var chunks = [];
record.ing = new MediaRecorder(stream); record.ing = new MediaRecorder(media);
record.ing.ondataavailable = eve => chunks.push(eve.data); record.ing.ondataavailable = function(eve){ chunks.push(eve.data) }
record.ing.onstop = eve => record.save(new Blob(chunks)); record.ing.onstop = function(eve){record.save(new Blob(chunks)) }
record.ing.start() record.ing.start();
$('#play').text("End");
} }
function error(err){ console.log(err) } function error(err){ console.log(err) }
} }
@ -46,38 +54,9 @@ record.save = function(data){
b64 = $('#video').get(0).src = "data:video/webm" + b64.slice(b64.indexOf(';')); b64 = $('#video').get(0).src = "data:video/webm" + b64.slice(b64.indexOf(';'));
if($('#pass').val()){ b64 = await SEA.encrypt(b64, $('#pass').val()) } if($('#pass').val()){ b64 = await SEA.encrypt(b64, $('#pass').val()) }
gun.get('test').get('video').put(b64); gun.get('test').get('video').put(b64);
$('#play').trigger('click');
} }
} }
$('#play').on('click', function(){
if(record.ing){
if(record.ing.stop){ record.ing.stop() }
record.ing = false;
return;
}
if(record.playing){
$('#video').get(0).pause();
$('#play').text("Play");
record.playing = false;
return;
}
if($('#video').get(0).src){
$('#video').get(0).play();
$('#play').text("Pause");
record.playing = true;
return;
}
$('#play').text("Loading");
gun.get('test').get('video').once(async function(data){
if($('#pass').val()){ data = await SEA.decrypt(data, $('#pass').val()) }
try{ $('#video').get(0).src = data }catch(e){}
$('#play').trigger('click');
})
})
$('#video').on('ended', function(){ $('#play').trigger('click') })
$('#video').on('error', function(){ $('#play').text("Failed"); })
navigator.getMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia navigator.getMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia
|| navigator.mozGetUserMedia || navigator.msGetUserMedia); || navigator.mozGetUserMedia || navigator.msGetUserMedia);
</script> </script>