issue with switch camera flashphoner in react

Max

Max

Administrator
Staff member
antu123 said:
Please check
TypeError: options.urlServer must be provided
Click to expand...
You have not provided websocket WCS URL in urlServer calling Flashphoner.createSession() method (see code example)
Code: 
    Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function (session) {
        ...
    });
Please read the example description with code analyzing: Stream Recording
 
antu123

antu123

Member
I have provided websocket WCS URL in urlServer calling Flashphoner.createSession() method but getting same error.
when i use let url = this.state.serverUrl; instead of
var url = document.getElementById("url").value; show like below screen short otherwise showing same error TypeError: options.urlServer must be provided

1703655221653.png


1703653227518.png
 
Last edited:
Max

Max

Administrator
Staff member
We don't see a message "Create new session with url" on you console screenshot. Please check url value to be a valid secure websocket URL.
 
antu123

antu123

Member
Hello @Max

Recording video quality is low how to change same like stream quality
Recording video size is 600x450 but stream quality 1280 x 720 pixels
 
Max

Max

Administrator
Staff member
antu123 said:
Recording video quality is low how to change same like stream quality
Recording video size is 600x450 but stream quality 1280 x 720 pixels
Click to expand...
A stream is recorded with a real publishing resolution. Not with resolution set by constraints, because the real resolution may be lower if channel bandwidth is not enough.
You can check the publishing resolution and other stream metrics by REST API: Receiving common stream information
 
antu123

antu123

Member
showStat function is not working react js

loadStats = () => {

if (publishStream) {
publishStream.getStats(function (stats) {
if (stats && stats.outboundStream) {
if (stats.outboundStream.video) {
showStat(stats.outboundStream.video, "outVideoStat");
let vBitrate = (stats.outboundStream.video.bytesSent - videoBytesSent) * 8;
if (('#outVideoStatBitrate').length == 0) {
let html = "<div>Bitrate: " + "<span id='outVideoStatBitrate' style='font-weight: normal'>" + vBitrate + "</span>" + "</div>";
("#outVideoStat").append(html);
} else {
('#outVideoStatBitrate').text(vBitrate);
}
videoBytesSent = stats.outboundStream.video.bytesSent;
if(new Date().valueOf() - CONNECTION_QUALITY_UPDATE_TIMEOUT_MS > publishConnectionQualityStat.connectionQualityUpdateTimestamp) {
publishConnectionQualityStat.quality = CONNECTION_QUALITY.UNKNOWN;
}
}
if (stats.outboundStream.audio) {
showStat(stats.outboundStream.audio, "outAudioStat");
let aBitrate = (stats.outboundStream.audio.bytesSent - audioBytesSent) * 8;
if (('#outAudioStatBitrate').length == 0) {
let html = "<div>Bitrate: " + "<span id='outAudioStatBitrate' style='font-weight: normal'>" + aBitrate + "</span>" + "</div>";
("#outAudioStat").append(html);
} else {
('#outAudioStatBitrate').text(aBitrate);
}
audioBytesSent = stats.outboundStream.audio.bytesSent;
}
}
if (publishConnectionQualityStat.quality !== undefined) {
showStat({"quality": publishConnectionQualityStat.quality}, "outConnectionStat");
}
});
}
if (previewStream) {
previewStream.getStats(function (stats) {
if (stats && stats.inboundStream) {
if (stats.inboundStream.video) {
showStat(stats.inboundStream.video, "inVideoStat");
let vBitrate = (stats.inboundStream.video.bytesReceived - videoBytesReceived) * 8;
if (('#inVideoStatBitrate').length == 0) {
let html = "<div>Bitrate: " + "<span id='inVideoStatBitrate' style='font-weight: normal'>" + vBitrate + "</span>" + "</div>";
("#inVideoStat").append(html);
} else {
('#inVideoStatBitrate').text(vBitrate);
}
videoBytesReceived = stats.inboundStream.video.bytesReceived;
if(new Date().valueOf() - CONNECTION_QUALITY_UPDATE_TIMEOUT_MS > playConnectionQualityStat.connectionQualityUpdateTimestamp) {
playConnectionQualityStat.quality = CONNECTION_QUALITY.UNKNOWN;
}
}
if (stats.inboundStream.audio) {
showStat(stats.inboundStream.audio, "inAudioStat");
let aBitrate = (stats.inboundStream.audio.bytesReceived - audioBytesReceived) * 8;
if (('#inAudioStatBitrate').length == 0) {
let html = "<div style='font-weight: bold'>Bitrate: " + "<span id='inAudioStatBitrate' style='font-weight: normal'>" + aBitrate + "</span>" + "</div>";
("#inAudioStat").append(html);
} else {
('#inAudioStatBitrate').text(aBitrate);
}
audioBytesReceived = stats.inboundStream.audio.bytesReceived;
}
if (playConnectionQualityStat.quality !== undefined) {
showStat({"quality": playConnectionQualityStat.quality}, "inConnectionStat");
}
}
});
}
function showStat(stat, type) {
Object.keys(stat).forEach((key) => {
if (typeof stat[key] !== "object") {
let k = key.split(/(?=[A-Z])/);
let metric = "";
for (let i = 0; i < k.length; i++) {
metric += k[0].toUpperCase() + k.substring(1) + " ";
}
if (("#" + key + "-" + type).length == 0) {
let html =
"<div style='font-weight: bold'>" +
metric.trim() +
": <span id='" +
key +
"-" +
type +
"' style='font-weight: normal'></span>" +
"</div>";
// $(html).insertAfter("#" + type);
("#" + type).append(html);
} else {
("#" + key + "-" + type).text(stat[key]);
}
}
});

console.log("showStat function called");
}
console.log("loadStats function called");
}


1703843181353.png
 
Max

Max

Administrator
Staff member
Hello

First of all, test Media Devices sample with your server.


Make sure publishing and playback resolutions are equal.

If resolutions are not equal, try to change Content Hint to detail.

1703919836679.png


1703919687447.png
 
antu123

antu123

Member
hello
I am not getting data in my project
how to get

Video stats
Codec: H264
Codec Rate: 90000
Bytes Sent: 235854358
Packets Sent: 209517
Fir Count: 0
Frames Per Second: 17
Nack Count: 4
Pli Count: 0
Width: 640
Height: 480
Bitrate: 1363240

also when downloading recoding streaming video quality is very low
 

Attachments

antu123

antu123

Member
this function not working


showStat = (stat, type) => {

Object.keys(stat).forEach(function(key) {
if (typeof stat[key] !== 'object') {
let k = key.split(/(?=[A-Z])/);
let metric = "";
for (let i = 0; i < k.length; i++) {
metric += k[0].toUpperCase() + k.substring(1) + " ";
}
if (("#" + key + "-" + type).length === 0) {
let html = "<div style='font-weight: bold'>" + metric.trim() + ": <span id='" + key + "-" + type + "' style='font-weight: normal'></span>" + "</div>";
// $(html).insertAfter("#" + type);
("#" + type).append(html);
} else {
("#" + key + "-" + type).text(stat[key]);
}
}
});

console.log("showStat function called");
}
1704269014755.png
 
Max

Max

Administrator
Staff member
The showStat is just a helper function to display a statistics data.
Please use Stream.getStats() method to get a statistics object (see sample on GitHub)
Code: 
        publishStream.getStats(function (stats) {
            if (stats && stats.outboundStream) {
                if (stats.outboundStream.video) {
                    showStat(stats.outboundStream.video, "outVideoStat");
                    let vBitrate = (stats.outboundStream.video.bytesSent - videoBytesSent) * 8;
                    if ($('#outVideoStatBitrate').length == 0) {
                        let html = "<div>Bitrate: " + "<span id='outVideoStatBitrate' style='font-weight: normal'>" + vBitrate + "</span>" + "</div>";
                        $("#outVideoStat").append(html);
                    } else {
                        $('#outVideoStatBitrate').text(vBitrate);
                    }
                    videoBytesSent = stats.outboundStream.video.bytesSent;
                }
                ...
                if (stats.outboundStream.audio) {
                    showStat(stats.outboundStream.audio, "outAudioStat");
                    let aBitrate = (stats.outboundStream.audio.bytesSent - audioBytesSent) * 8;
                    if ($('#outAudioStatBitrate').length == 0) {
                        let html = "<div>Bitrate: " + "<span id='outAudioStatBitrate' style='font-weight: normal'>" + aBitrate + "</span>" + "</div>";
                        $("#outAudioStat").append(html);
                    } else {
                        $('#outAudioStatBitrate').text(aBitrate);
                    }
                    audioBytesSent = stats.outboundStream.audio.bytesSent;
                }
            }
        });
 
antu123

antu123

Member
Max said:
The showStat is just a helper function to display a statistics data.
Please use Stream.getStats() method to get a statistics object (see sample on GitHub)
Code: 
        publishStream.getStats(function (stats) {
            if (stats && stats.outboundStream) {
                if (stats.outboundStream.video) {
                    showStat(stats.outboundStream.video, "outVideoStat");
                    let vBitrate = (stats.outboundStream.video.bytesSent - videoBytesSent) * 8;
                    if ($('#outVideoStatBitrate').length == 0) {
                        let html = "<div>Bitrate: " + "<span id='outVideoStatBitrate' style='font-weight: normal'>" + vBitrate + "</span>" + "</div>";
                        $("#outVideoStat").append(html);
                    } else {
                        $('#outVideoStatBitrate').text(vBitrate);
                    }
                    videoBytesSent = stats.outboundStream.video.bytesSent;
                }
                ...
                if (stats.outboundStream.audio) {
                    showStat(stats.outboundStream.audio, "outAudioStat");
                    let aBitrate = (stats.outboundStream.audio.bytesSent - audioBytesSent) * 8;
                    if ($('#outAudioStatBitrate').length == 0) {
                        let html = "<div>Bitrate: " + "<span id='outAudioStatBitrate' style='font-weight: normal'>" + aBitrate + "</span>" + "</div>";
                        $("#outAudioStat").append(html);
                    } else {
                        $('#outAudioStatBitrate').text(aBitrate);
                    }
                    audioBytesSent = stats.outboundStream.audio.bytesSent;
                }
            }
        });
Click to expand...
already use but not working
 
Max

Max

Administrator
Staff member
antu123 said:
already use but not working
Click to expand...
Does it work in Media Devices example? If yes, please modify the source code minimally to reproduce the problem and send using this form.
Please also note that this code will not work in React Native environment, it may be used in browser only.
 
You must log in or register to reply here.
Top