问题:

I'm implementing WebRTC video chat. I want to implement the following case:

By default video element has background-image via css and if there are no video input then user see his (or interlocutor's) avatar:

No video expected result:

No video actual result:

As you can see from the screenshots I have black rectangles above my fancy backgrounds. I want to make this ugly black rectangle transparent and keep my video's backgrounds visible.

Actually it will be awesome to resolve the problem without introducing any additional markup.

Appreciate your help =)

Update:

"No video" means that user/users don't have web cams and stream has only audio track.

回答1:

Bingo!

Reading documentation in depth gave some results =) It was as easy:

<video poster="image.jpg">

One simple attribute made me happy

回答2:

Try Alpha transparency in Chrome video or waitUntilRemoteStreamStartsFlowing.

function onaddstream(event) {
    remote_video.src = webkitURL.createObjectURL(event.stream);
    // remote_video.mozSrcObject  = event.stream;

    waitUntilRemoteStreamStartsFlowing();
}

function waitUntilRemoteStreamStartsFlowing()
{
    if (!(remote_video.readyState <= HTMLMediaElement.HAVE_CURRENT_DATA 
        || remote_video.paused || remote_video.currentTime <= 0)) 
    {
        // remote stream started flowing!
    } 
    else setTimeout(waitUntilRemoteStreamStartsFlowing, 50);
}