Skip to content

Commit

Permalink
[mirotalk] - add sharing video mp4 - audio mp3
Browse files Browse the repository at this point in the history
  • Loading branch information
@miroslavpejic85
miroslavpejic85 committed Jul 14, 2022
1 parent d072aad commit 3d1ccdb
Show file tree
Hide file tree
Showing 5 changed files with 123 additions and 21 deletions.
15 changes: 13 additions & 2 deletions public/css/client.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -836,9 +836,10 @@ progress {
}

/*--------------------------------------------------------------
# Video IFrame
# Video Audio IFrame
--------------------------------------------------------------*/

#videoAudioUrlCont,
#videoUrlCont {
z-index: 15;
display: none;
Expand All @@ -848,17 +849,19 @@ progress {
border-radius: 5px;
}

#videoAudioUrlHeader,
#videoUrlHeader {
z-index: 15;
position: absolute;
display: flex;
left: 0px;
top: 0px;
width: 100%;
cursor: move;
border-radius: 5px;
background-color: rgba(0, 0, 0, 0.7);
}

#videoAudioUrlHeader button,
#videoUrlHeader button {
height: 30px;
width: 30px;
Expand All @@ -870,6 +873,7 @@ progress {
background: black;
}

#videoAudioUrlHeader button:hover,
#videoUrlHeader button:hover {
color: var(--hover-color);
transform: var(--btns-hover-scale);
Expand All @@ -882,6 +886,12 @@ progress {
border-radius: 5px;
}

#videoAudioUrlElement {
width: var(--iframe-width);
height: var(--iframe-height) - 20px;
border-radius: 5px;
}

/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
Expand Down Expand Up @@ -970,6 +980,7 @@ progress {
display: none;
}

#videoAudioCloseBtn,
#videoUrlCloseBtn {
border: none;
border-radius: 10px;
Expand Down
Binary file added public/images/audio.gif
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/va-share.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
117 changes: 98 additions & 19 deletions public/js/client.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ const deleteImg = '../images/delete.png';
const youtubeImg = '../images/youtube.png';
const messageImg = '../images/message.png';
const kickedOutImg = '../images/leave-room.png';
const audioGif = '../images/audio.gif';
const videoAudioShare = '../images/va-share.png';
const aboutImg = '../images/mirotalk-logo.png';
// nice free icon: https://www.iconfinder.com

Expand Down Expand Up @@ -269,9 +271,13 @@ let receiveInProgress = false;
const chunkSize = 1024 * 16; // 16kb/s
// video URL player
let videoUrlCont;
let videoAudioUrlCont;
let videoUrlHeader;
let videoAudioUrlHeader;
let videoUrlCloseBtn;
let videoAudioCloseBtn;
let videoUrlIframe;
let videoAudioUrlElement;
// speech recognition
let speechRecognitionStart;
let speechRecognitionStop;
Expand Down Expand Up @@ -411,9 +417,13 @@ function getHtmlElementsById() {
receiveFilePercentage = getId('receiveFilePercentage');
// video url player
videoUrlCont = getId('videoUrlCont');
videoAudioUrlCont = getId('videoAudioUrlCont');
videoUrlHeader = getId('videoUrlHeader');
videoAudioUrlHeader = getId('videoAudioUrlHeader');
videoUrlCloseBtn = getId('videoUrlCloseBtn');
videoAudioCloseBtn = getId('videoAudioCloseBtn');
videoUrlIframe = getId('videoUrlIframe');
videoAudioUrlElement = getId('videoAudioUrlElement');
// speech recognition
speechRecognitionStart = getId('speechRecognitionStart');
speechRecognitionStop = getId('speechRecognitionStop');
Expand Down Expand Up @@ -487,7 +497,8 @@ function setButtonsToolTip() {
setTippy(receiveHideBtn, 'Hide file transfer', 'right-start');
// video URL player
setTippy(videoUrlCloseBtn, 'Close the video player', 'right-start');
setTippy(msgerVideoUrlBtn, 'Share YouTube video to all participants', 'top');
setTippy(videoAudioCloseBtn, 'Close the video player', 'right-start');
setTippy(msgerVideoUrlBtn, 'Share a video or audio to all participants', 'top');
}

/**
Expand Down Expand Up @@ -1674,7 +1685,7 @@ async function loadRemoteMediaStream(stream, peers, peer_id) {
const remoteHandStatusIcon = document.createElement('button');
const remoteVideoStatusIcon = document.createElement('button');
const remoteAudioStatusIcon = document.createElement('button');
const remoteYoutubeBtnBtn = document.createElement('button');
const remoteVideoAudioUrlBtn = document.createElement('button');
const remoteFileShareBtn = document.createElement('button');
const remotePrivateMsgBtn = document.createElement('button');
const remotePeerKickOut = document.createElement('button');
Expand Down Expand Up @@ -1718,8 +1729,8 @@ async function loadRemoteMediaStream(stream, peers, peer_id) {
remoteFileShareBtn.className = 'fas fa-upload';

// remote peer YouTube video
remoteYoutubeBtnBtn.setAttribute('id', peer_id + '_youtube');
remoteYoutubeBtnBtn.className = 'fab fa-youtube';
remoteVideoAudioUrlBtn.setAttribute('id', peer_id + '_videoAudioUrl');
remoteVideoAudioUrlBtn.className = 'fab fa-youtube';

// my video to image
remoteVideoToImgBtn.setAttribute('id', peer_id + '_snapshot');
Expand All @@ -1739,7 +1750,7 @@ async function loadRemoteMediaStream(stream, peers, peer_id) {
setTippy(remoteHandStatusIcon, 'Participant hand is raised', 'bottom');
setTippy(remoteVideoStatusIcon, 'Participant video is on', 'bottom');
setTippy(remoteAudioStatusIcon, 'Participant audio is on', 'bottom');
setTippy(remoteYoutubeBtnBtn, 'Send YouTube video', 'bottom');
setTippy(remoteVideoAudioUrlBtn, 'Send Video or Audio', 'bottom');
setTippy(remotePrivateMsgBtn, 'Send private message', 'bottom');
setTippy(remoteFileShareBtn, 'Send file', 'bottom');
setTippy(remoteVideoToImgBtn, 'Take a snapshot', 'bottom');
Expand Down Expand Up @@ -1768,7 +1779,7 @@ async function loadRemoteMediaStream(stream, peers, peer_id) {
remoteStatusMenu.appendChild(remoteAudioStatusIcon);
remoteStatusMenu.appendChild(remotePrivateMsgBtn);
remoteStatusMenu.appendChild(remoteFileShareBtn);
remoteStatusMenu.appendChild(remoteYoutubeBtnBtn);
remoteStatusMenu.appendChild(remoteVideoAudioUrlBtn);
remoteStatusMenu.appendChild(remoteVideoToImgBtn);
remoteStatusMenu.appendChild(remotePeerKickOut);
remoteStatusMenu.appendChild(remoteVideoFullScreenBtn);
Expand Down Expand Up @@ -1821,8 +1832,8 @@ async function loadRemoteMediaStream(stream, peers, peer_id) {
handlePeerPrivateMsg(peer_id, peer_name);
// handle remote send file
handlePeerSendFile(peer_id);
// handle remote youtube video
handlePeerYouTube(peer_id);
// handle remote video - audio URL
handlePeerVideoAudioUrl(peer_id);
// show status menu
toggleClassElements('statusMenu', 'inline');
// notify if peer started to recording own screen + audio
Expand Down Expand Up @@ -2758,12 +2769,18 @@ function setupVideoUrlPlayer() {
document.documentElement.style.setProperty('--iframe-height', '240px');
} else {
dragElement(videoUrlCont, videoUrlHeader);
dragElement(videoAudioUrlCont, videoAudioUrlHeader);
}
videoUrlCloseBtn.addEventListener('click', (e) => {
e.preventDefault();
closeVideoUrlPlayer();
emitVideoPlayer('close');
});
videoAudioCloseBtn.addEventListener('click', (e) => {
e.preventDefault();
closeVideoUrlPlayer();
emitVideoPlayer('close');
});
}

/**
Expand Down Expand Up @@ -4503,11 +4520,11 @@ function handlePeerSendFile(peer_id) {
}

/**
* Send YouTube video to specific peer
* Send video - audio URL to specific peer
* @param {string} peer_id socket.id
*/
function handlePeerYouTube(peer_id) {
let peerYoutubeBtn = getId(peer_id + '_youtube');
function handlePeerVideoAudioUrl(peer_id) {
let peerYoutubeBtn = getId(peer_id + '_videoAudioUrl');
peerYoutubeBtn.onclick = () => {
sendVideoUrl(peer_id);
};
Expand Down Expand Up @@ -5731,9 +5748,9 @@ function sendVideoUrl(peer_id = null) {
Swal.fire({
background: swalBackground,
position: 'center',
imageUrl: youtubeImg,
title: 'Share YouTube Video',
text: 'Paste YouTube video URL',
imageUrl: videoAudioShare,
title: 'Share a Video or Audio',
text: 'Paste a Video or audio URL',
input: 'text',
showCancelButton: true,
confirmButtonText: `Share`,
Expand All @@ -5750,9 +5767,20 @@ function sendVideoUrl(peer_id = null) {
return;
}
console.log('Video URL: ' + result.value);
/*
https://www.youtube.com/watch?v=RT6_Id5-7-s
http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4
https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba.mp3
*/
if (!isVideoTypeSupported(result.value)) {
userLog('warning', 'Something wrong, try with another Video or audio URL');
return;
}
let is_youtube = getVideoType(result.value) == 'na' ? true : false;
let video_url = is_youtube ? getYoutubeEmbed(result.value) : result.value;
let config = {
video_src: result.value,
peer_id: peer_id,
video_src: video_url,
};
openVideoUrlPlayer(config);
emitVideoPlayer('open', config);
Expand All @@ -5764,24 +5792,70 @@ function sendVideoUrl(peer_id = null) {
* Open video url Player
*/
function openVideoUrlPlayer(config) {
console.log('Open video Player', config);
let videoSrc = config.video_src;
let videoType = getVideoType(videoSrc);
let videoEmbed = getYoutubeEmbed(videoSrc);
console.log('Video embed', videoEmbed);
//
if (!isVideoUrlPlayerOpen) {
if (videoEmbed) {
playSound('newMessage');
console.log('Load element type: iframe');
videoUrlIframe.src = videoEmbed;
videoUrlCont.style.display = 'flex';
isVideoUrlPlayerOpen = true;
} else {
userLog('error', 'Something wrong, try with another Youtube URL');
playSound('newMessage');
console.log('Load element type: Video');
videoAudioUrlCont.style.display = 'flex';
videoAudioUrlElement.setAttribute('src', videoSrc);
videoAudioUrlElement.type = videoType;
if (videoAudioUrlElement.type == 'video/mp3') {
videoAudioUrlElement.poster = audioGif;
}
isVideoUrlPlayerOpen = true;
}
} else {
// video player seems open
videoUrlIframe.src = videoEmbed;
if (videoEmbed) {
videoUrlIframe.src = videoEmbed;
} else {
videoAudioUrlElement.src = videoSrc;
}
}
}

/**
* Get video type
* @param {string} url
* @returns string video type
*/
function getVideoType(url) {
if (url.endsWith('.mp4')) return 'video/mp4';
if (url.endsWith('.mp3')) return 'video/mp3';
if (url.endsWith('.webm')) return 'video/webm';
if (url.endsWith('.ogg')) return 'video/ogg';
return 'na';
}

/**
* Check if video URL is supported
* @param {string} url
* @returns boolean true/false
*/
function isVideoTypeSupported(url) {
if (
url.endsWith('.mp4') ||
url.endsWith('.mp3') ||
url.endsWith('.webm') ||
url.endsWith('.ogg') ||
url.includes('youtube')
)
return true;
return false;
}

/**
* Get youtube embed URL
* @param {string} url of YouTube video
Expand All @@ -5797,9 +5871,14 @@ function getYoutubeEmbed(url) {
* Close Video Url Player
*/
function closeVideoUrlPlayer() {
// Reload all iframes again to stop videos & disable autoplay
videoUrlIframe.src = videoUrlIframe.src.replace('?autoplay=1', '');
console.log('Close video Player', {
videoUrlIframe: videoUrlIframe.src,
videoAudioUrlElement: videoAudioUrlElement.src,
});
if (videoUrlIframe.src != '') videoUrlIframe.setAttribute('src', '');
if (videoAudioUrlElement.src != '') videoAudioUrlElement.setAttribute('src', '');
videoUrlCont.style.display = 'none';
videoAudioUrlCont.style.display = 'none';
isVideoUrlPlayerOpen = false;
}

Expand Down
12 changes: 12 additions & 0 deletions public/views/client.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -400,6 +400,18 @@ <h1>Loading...</h1>

<!-- End Youtube Iframe -->

<!-- Start Video - Audio player -->

<div id="videoAudioUrlCont" class="center fadein">
<div id="videoAudioUrlHeader">
<button id="videoAudioCloseBtn" class="fas fa-times"></button>
</div>
<br />
<video id="videoAudioUrlElement" src="" autoplay controls></video>
</div>

<!-- End Video - Audio player -->

<!-- Start Video container -->

<div id="videoMediaContainer">
Expand Down

1 comment on commit 3d1ccdb

@miroslavpejic85
Copy link
Owner Author

@miroslavpejic85 miroslavpejic85 commented on 3d1ccdb Jul 14, 2022 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extended Video - Audio Sharing

Added possibility to streaming by URL also for video mp4, webm, ogg and mp3 audio!

YouTube Sharing

mirotalk-share-youtube-url
mirotalk-share-youtube

Video MP4 Sharing

mirotalk-share-mp4-url
mirotalk-share-mp4

Audio MP3 Sharing

mirotalk-share-mp3-url
mirotalk-share-mp3

Full Screen supported and other commands

mirotalk-mp4-options

Please sign in to comment.