Blank Screen only

Question

Blank Screen only

Closed this issue 2 years ago · 20 comments

Working fine in chrome but showing blank in OBS plz fix asap

let isTransition = true;

/**

shuffleArr takes in an array and returns a new array in random order
@param {any[]} a any array to be shuffled
@return {any[]} shuffled array
*/
function shuffleArr(a) {
var j, x, i;
for (i = a.length - 1; i > 0; i--) {
j = Math.floor(Math.random() * (i + 1));
x = a[i];
a[i] = a[j];
a[j] = x;
}
return a;
}

/**

prependFolderToFiles simply adds a folder path to a list of files and returns
the new array
@param {string} folder folder path, must end with a trailing slash
@param {string[]} files array of file names
@returns {string[]} new array with full path to files
*/
function prependFolderToFiles(folder, files) {
return files.map((file) => ${folder}${file});
}

/**

storePlaylistState takes in a playlist and stores it into localstorage
@param {string[]} state
@returns {void}
*/
function storePlaylistState(state) {
localStorage.setItem('playlist', JSON.stringify(state));
}

/**

getNewPlaylist creates a newly randomize list of files and stores it in
localstorage
@returns {string[]} a new playlist
*/
function getNewPlaylist() {
const playlist = prependFolderToFiles(
mediaFolder,
shuffleArr(initMediaFiles),
);
storePlaylistState(playlist);
return playlist;
}

/**

getPlaylist will get the playlist state form localstorage or create a new one
@returns {string[]} current playlist state
*/
function getPlaylist() {
let playlist = [];
try {
playlist = JSON.parse(localStorage.getItem('playlist'));
} catch {
console.log('playlist empty!');
}
if (!playlist || playlist.length === 0) {
playlist = getNewPlaylist();
}
return playlist;
}

/**

progressPlaylistState removes the last item from the playlist and stores the
updated version in localstorage
@returns {void}
*/
function progressPlaylistState() {
const playlist = getPlaylist();
playlist.pop();
storePlaylistState(playlist);
}

/**

getNextPlaylistItem returns the next item in the playlist unless it matches
the last thing played then it moves that item to the end and returns the
next item after that
@returns {string} the next item in the playlist
*/
function getNextPlaylistItem() {
const playlist = getPlaylist();
let mediaItem = playlist.pop();

// check if we played this mediaItem last run
console.log({ lastPlayed: localStorage.getItem('lastPlayed'), mediaItem });
if (localStorage.getItem('lastPlayed') === mediaItem) {
// moves the repeated item to the end so its not skipped entirely
storePlaylistState([mediaItem].concat(playlist));
mediaItem = getNextPlaylistItem();
}
return mediaItem;
}

/**

playNext is the core function of this project and handles the loading and
playing of the alternating video players
@param {HTMLMediaElement} player currently playing video player
@param {HTMLMediaElement} nextPlayer the next video player to be played
@returns {void}
*/
function playNext(player, nextPlayer) {
const currentMp4Source = player.getElementsByClassName('mp4Source')[0];
const nextMp4Source = nextPlayer.getElementsByClassName('mp4Source')[0];
const currentVideo = currentMp4Source.getAttribute('src');
if (currentVideo !== transitionVideoPath) {
localStorage.setItem('lastPlayed', currentVideo);
}

let video = localStorage.getItem('lastPlayed');
if (!loopFirstVideo && (!transitionVideo || !isTransition)) {
video = getNextPlaylistItem();
console.log(next video: ${video});
}

// TODO: we can use this opacity to crossfade between mediaFiles
player.style['z-index'] = 1;
player.style['opacity'] = '1';
nextPlayer.style['z-index'] = 0;
nextPlayer.style['opacity'] = '0';

if (transitionVideo && transitionVideo !== '' && isTransition) {
video = transitionVideoPath;
isTransition = false;
} else {
isTransition = true;
}
nextMp4Source.setAttribute('src', video);
nextPlayer.load();
nextPlayer.pause();

if (playOnlyOne) {
// Remove videos after playing once
player.onended = () => {
currentMp4Source.removeAttribute('src');
nextMp4Source.removeAttribute('src');
player.load();
nextPlayer.load();
};
}

player.play();
}

</script>
<style>
  html,
  body {
    margin: 0;
    padding: 0;
  }
</style>

const player2 = /** @type {HTMLMediaElement} */ (
document.getElementById('videoPlayer2')
);
player.addEventListener(
'ended',
() => {
if (!loopFirstVideo) {
progressPlaylistState();
}
playNext(player2, player);
},
{
passive: true,
},
);
player2.addEventListener(
'ended',
() => {
if (!loopFirstVideo) {
progressPlaylistState();
}
playNext(player, player2);
},
{
passive: true,
},
);

/***** Initial load *****/

const mp4Source = player.getElementsByClassName('mp4Source')[0];
let video = getNextPlaylistItem();
// have to move the state forward after getting the first video
progressPlaylistState();

mp4Source.setAttribute('src', video);
player.load();

playNext(player, player2);

</script>

Answer 1 · 2022-03-15T01:20:36.000Z

Same, guessing obs changed there browser settings,

Answer 2 · 2022-03-15T10:43:46.000Z

Also have this problem. Actually must have been the latest update. Didn't work for like 2 to 3 weeks now I think

Answer 3 · 2022-03-15T11:03:52.000Z

some changes were made for browser source and chromium was updated https://github.com/obsproject/obs-studio/releases/tag/27.2.3

Answer 4 · 2022-03-15T11:08:43.000Z

let's wait for developer update

Answer 5 · 2022-03-15T15:27:44.000Z

Yea i just haven't had free time to look at this yet. I'm trying to get to it soon

Answer 6 · 2022-03-16T01:35:42.000Z

This issue here: obsproject/obs-studio#5932

Further discussion on this thread: https://obsproject.com/forum/threads/27-2-browser-source-no-longer-html-css-will-no-longer-load-local-images-with-absolute-paths.153581/

Hi there - thanks for the report. I see what's happening - our custom URL handler assumes relative paths, so it prepends the path of the HTML file before inserting the location of the file. I'll see what I can do. Hopefully I'll get a fix together in time for 27.2.1 or 27.2.2.

Answer 7 · 2022-03-16T21:11:23.000Z

TL;DR
So sounds like a workaround for everyone in this thread is to edit the HTML file to use relative paths for their videos instead of the absolute paths.

@retroNUC ah nice this is super helpful! I noticed another overlay I made that used a custom font wasn't loading the font. So i was confused as to what OBS had changes that would break something that simple.
Hopefully, it'll get fixed in the next bug fix release of OBS. I'm going to wait until then before I mess with the code here as I don't want to chase a moving target

Answer 8 · 2022-03-16T21:38:56.000Z

Hey Jared,

I've read the attached threads and comments, but i'm not quite seeing what the filepath needs to be changed to. Right now for example, the line within my HTML file is:

const mediaFolder = /** @type {string} */ ("C:\\Users\\TerrorVan\\Desktop\\Pop-Up Video\\");

What should it be manually changed to for it to work correctly?

Answer 9 · 2022-03-16T22:16:23.000Z

I've read the attached threads and comments, but i'm not quite seeing what the filepath needs to be changed to. Right now for example, the line within my HTML file is:

const mediaFolder = /** @type {string} */ ("C:\\Users\\TerrorVan\\Desktop\\Pop-Up Video\\");

What should it be manually changed to for it to work correctly?

The issue is if you're going to be using relative paths: I don't know. It depends on where your videos are relative to your OBS installation. The easiest thing would be to move the video folder to the same as your OBS and try something like
const mediaFolder = /** @type {string} */ ("./Pop-Up video");

Alternatively, there's a comment in the obs forum post that shows something like this:
const mediaFolder = /** @type {string} */ ("http:\\\\absolute\\C:\\Users\\TerrorVan\\Desktop\\Pop-Up Video\\");

Both of these methods I haven't tested so it might take some playing around with the string value to get it to match up with the folder but the second one is what I might have to update the code to do if OBS doesn't put out a fix

Answer 10 · 2022-03-17T08:05:36.000Z

I think this is a dupe of #33 so I'm going to close this.
Try the newest release https://github.com/UpDownLeftDie/obs-random-videos/releases/tag/v3.3.0 and comment back if you're still having issues

Answer 11 · 2022-03-17T08:15:53.000Z

Sorry to say but still not working.
OBS 27.2.3 64 Bit
Black Screen Only
Working Fine In Chrome.

Code :

/**

shuffleArr takes in an array and returns a new array in random order
@param {any[]} originalArray any array to be shuffled
@return {any[]} shuffled array
*/
function shuffleArr(originalArray) {
let a = [...originalArray]
let j, x, i;
for (i = a.length - 1; i > 0; i--) {
j = Math.floor(Math.random() * (i + 1));
x = a[i];
a[i] = a[j];
a[j] = x;
}
return a;
}

/**

storePlaylistState takes in a playlist and stores it into localstorage
@param {string[]} state
@returns {void}
*/
function storePlaylistState(state) {
localStorage.setItem('playlist', JSON.stringify(state));
}

/**

getNewPlaylist creates a newly randomize list of files and stores it in
localstorage
@returns {string[]} a new playlist
*/
function getNewPlaylist() {
const playlist = shuffleArr(initMediaFiles);
storePlaylistState(playlist);
return playlist;
}

/**

getPlaylist will get the playlist state form localstorage or create a new one
@returns {string[]} current playlist state
*/
function getPlaylist() {
let playlist = [];
try {
playlist = JSON.parse(localStorage.getItem('playlist'));
} catch {
console.log('playlist doesn't exist yet!');
}
if (!playlist || playlist.length === 0 || typeof playlist.pop === 'undefined') {
playlist = getNewPlaylist();
}
return playlist;
}

/**

progressPlaylistState removes the last item from the playlist and stores the
updated version in localstorage
@returns {void}
*/
function progressPlaylistState() {
const playlist = getPlaylist();
playlist.pop();
storePlaylistState(playlist);
}

/**

getNextPlaylistItem returns the next item in the playlist unless it matches
the last thing played then it moves that item to the end and returns the
next item after that
@returns {string} the next item in the playlist
*/
function getNextPlaylistItem() {
const playlist = getPlaylist();
let mediaItem = playlist.pop();

// check if we played this mediaItem last run
console.log({ lastPlayed: localStorage.getItem('lastPlayed'), mediaItem, wasLastPlayed: localStorage.getItem('lastPlayed') === mediaItem });
if (localStorage.getItem('lastPlayed') === mediaItem) {
// moves the repeated item to the end so its not skipped entirely
storePlaylistState([mediaItem].concat(playlist));
mediaItem = getNextPlaylistItem();
}
return mediaItem;
}

/**

playNext is the core function of this project and handles the loading and
playing of the alternating video players
@param {HTMLMediaElement} player currently playing video player
@param {HTMLMediaElement} nextPlayer the next video player to be played
@returns {void}
*/
function playNext(player, nextPlayer) {
const currentMp4Source = player.getElementsByClassName('mp4Source')[0];
const nextMp4Source = nextPlayer.getElementsByClassName('mp4Source')[0];
const currentVideo = currentMp4Source.getAttribute('src');
if (currentVideo !== transitionVideoPath) {
localStorage.setItem('lastPlayed', currentVideo);
}

let video = localStorage.getItem('lastPlayed');
if (!loopFirstVideo && (!transitionVideoPath || !isTransition)) {
video = getNextPlaylistItem();
console.log(next video: ${video});
}

// TODO: we can use this opacity to crossfade between mediaFiles
player.style['z-index'] = 1;
player.style['opacity'] = '1';
nextPlayer.style['z-index'] = 0;
nextPlayer.style['opacity'] = '0';

if (transitionVideoPath && transitionVideoPath !== '' && isTransition) {
video = transitionVideoPath;
isTransition = false;
} else {
isTransition = true;
}
nextMp4Source.setAttribute('src', video);
nextPlayer.load();
nextPlayer.pause();

if (playOnlyOne) {
// Remove videos after playing once
player.onended = () => {
currentMp4Source.removeAttribute('src');
nextMp4Source.removeAttribute('src');
player.load();
nextPlayer.load();
};
}

player.play();
}

</script>
<style>
  html,
  body {
    margin: 0;
    padding: 0;
  }
</style>

const player2 = /** @type {HTMLMediaElement} */ (
document.getElementById('videoPlayer2')
);
player.addEventListener(
'ended',
() => {
if (!loopFirstVideo) {
progressPlaylistState();
}
playNext(player2, player);
},
{
passive: true,
},
);
player2.addEventListener(
'ended',
() => {
if (!loopFirstVideo) {
progressPlaylistState();
}
playNext(player, player2);
},
{
passive: true,
},
);

/***** Initial load *****/

const mp4Source = player.getElementsByClassName('mp4Source')[0];
let video = getNextPlaylistItem();
// have to move the state forward after getting the first video
progressPlaylistState();

mp4Source.setAttribute('src', video);
player.load();

playNext(player, player2);

</script>

Answer 12 · 2022-03-17T09:02:39.000Z

@shaikhfaijan you need to zip me you're entire folder cause pasting the code that i wrote doesn't help me

Answer 13 · 2022-03-17T09:13:49.000Z

https://drive.google.com/file/d/1GbA1bf8o8cSdt4uaYp2LzrjSzj0tLIpd/view?usp=sharing

Plz, Check the zip file.

Answer 14 · 2022-03-17T09:29:31.000Z

This is working fine for me. So try hitting the "Refresh cache of current page" at least 10 times and see if that fixes it.

If not I think I know understand the issue or at least noticed another one and will try to get another fix out in v3.3.1

Answer 15 · 2022-03-17T09:34:15.000Z

Bro Its showing Blank Only. I have hit Refresh Cache 20 Times 😁

Can you plz share your obs version ?

Answer 16 · 2022-03-17T09:48:34.000Z

OBS 27.2.3
Are you sure your 6 videos are located at:
C:\Users\shaik\Desktop\New folder (4)\

I made a folder on my desktop named New folder (4) and put the contents of your zip in there, changed shaik to my username in the file paths and it worked.

If it's still not working then your localstorage state might be stuck and you'll have to open remote debugging and Clear site data in chrome dev tools

Or wait till I try to get some more fixes out

Answer 17 · 2022-03-17T10:11:36.000Z

Yes, I am sure my files are in the same folder.
I have cleared application data for http://localhost:9090/

I am ready to share my TeamViewer or if you want a screen record please tell me.

Thanks

Answer 18 · 2022-03-17T10:14:00.000Z

Bro its working fine in my other PC 😒
I follow the same steps and the version is also same.

Answer 19 · 2022-03-17T10:15:53.000Z

OMG! its also working on my PC. I have hit 30+ times refresh button now it's working. Let's fix this issue in the next update.

Answer 20 · 2022-03-17T16:47:05.000Z

Glad to hear that was the issue. Yea 3.3.1 I plan to try to figure something out so people don't have to mash the refresh lol.
For future reference: I'll respond quicker on Guilded (link on the main page readme)