How can I clear the video recording icon (red icon) in Chrome browser?

[hyuk]

Hi..
The recording icon appears when the video is transmitted from the Chrome browser.
I want to remove the recording icon at the end of the transmission, what can I do?

 

[Max]

Hello

Flashphoner.releaseLocalMedia(document.getElementById("display"), "WebRTC");

JSDoc: Namespace: Flashphoner

 

[hyuk]

Hello

Flashphoner.releaseLocalMedia(document.getElementById("display"), "WebRTC");

JSDoc: Namespace: Flashphoner

Thank you for quick response.

In the sample code, if you use the code provided, the red button disappears normally.
However, the red button does not disappear in my development code.
In my development code, I used a custom display. How do I close it in this case?

$("#media_control").off('click').click(function(){
$(this).prop('disabled', true);
if(publishStream!=null){
publishStream.stop();
}
Flashphoner.releaseLocalMedia(localVideo, "WebRTC");
Flashphoner.releaseLocalMedia(mockLocalDisplay.get(0), "WebRTC");
....
});

custom video referecence ...

Publishing a stream using custom HTML5 video element - Web SDK 2.0 - EN - Flashphoner Documentation

docs.flashphoner.com

 

[Max]

Flashphoner.releaseLocalMedia(mockLocalDisplay.get(0), "WebRTC");

releaseLocalMedia function does not work for mock video element because it is used only for passing source video to custom element and is destroed on STREAM_STATUS.PUBLISHING event.
If you wish to customize local video element (define controls and style), you can use the following trick:
1. In HTML page code, add custom video element to localVideo div. You should set custom video element id with suffix --LOCAL_CACHED_VIDEO, for example (based on TwoWayStreaming code)

...
            <div class="col-sm-6">
                <div class="text-center text-muted">Local</div>
                <div class="fp-Video">
                    <div id="localVideo" class="display"><video id="customVideo-LOCAL_CACHED_VIDEO" controls="controls" style="background-color: lightgrey;"></div>
                </div>
...

2. Use localVideo element in display option while creating a stream to publish as done in all examples:

    session.createStream({
        name: streamName,
        display: localVideo
        ...
    }).on(STREAM_STATUS.PUBLISHING, function (stream) {
        ...
    }).publish();

3. After stopping a stream, call Flashphoner.releaseLocalMedia

function onPublishing(stream) {
    $("#publishBtn").text("Stop").off('click').click(function () {
        $(this).prop('disabled', true);
        stream.stop();
        Flashphoner.releaseLocalMedia(localVideo, "WebRTC");
    }).prop('disabled', false);
    $("#publishInfo").text("");
}

In this case custom video element id will be changed, but style and contols will remain.

 

[hyuk]

releaseLocalMedia function does not work for mock video element because it is used only for passing source video to custom element and is destroed on STREAM_STATUS.PUBLISHING event.
If you wish to customize local video element (define controls and style), you can use the following trick:
1. In HTML page code, add custom video element to localVideo div. You should set custom video element id with suffix --LOCAL_CACHED_VIDEO, for example (based on TwoWayStreaming code)

...
            <div class="col-sm-6">
                <div class="text-center text-muted">Local</div>
                <div class="fp-Video">
                    <div id="localVideo" class="display"><video id="customVideo-LOCAL_CACHED_VIDEO" controls="controls" style="background-color: lightgrey;"></div>
                </div>
...

2. Use localVideo element in display option while creating a stream to publish as done in all examples:

    session.createStream({
        name: streamName,
        display: localVideo
        ...
    }).on(STREAM_STATUS.PUBLISHING, function (stream) {
        ...
    }).publish();

3. After stopping a stream, call Flashphoner.releaseLocalMedia

function onPublishing(stream) {
    $("#publishBtn").text("Stop").off('click').click(function () {
        $(this).prop('disabled', true);
        stream.stop();
        Flashphoner.releaseLocalMedia(localVideo, "WebRTC");
    }).prop('disabled', false);
    $("#publishInfo").text("");
}

In this case custom video element id will be changed, but style and contols will remain.

good!!
thank you!!

 

[JimJames]

I'm having an issue with releaseLocalMedia, if any of you could help. I'm have a div, id="local-display", which has a video element in it. When I try and release it, I always receive a return of false. I have attached a screenshot of my in browser console, and the element tree.
Am I doing something incorrect?

 

[Max]

I'm having an issue with releaseLocalMedia, if any of you could help. I'm have a div, id="local-display", which has a video element in it. When I try and release it, I always receive a return of false. I have attached a screenshot of my in browser console, and the element tree.

You cannot apply Flashphoner.releaseLocalMedia to custom video element, it should be created automatically by WebSDK in div.
You can use workaround recommended in the post above.

 

[JimJames]

You cannot apply Flashphoner.releaseLocalMedia to custom video element, it should be created automatically by WebSDK in div.
You can use workaround recommended in the post above.

Sorry for being unclear, as I was showing the end result and not the code that generates it. The WebSDK does generate my video element, it is not hardcoded by myself.

 

[Max]

Please check if Flashphoner.releaseLocalMedia works in Media Devices example (press "Test" button, then press "Release").
If it works, please provide your code example (HTML and JS) which is not work for you, we will check.