WCS allows configuring the camera and the microphone from a browser. Let's see how this can be done and what parameters you can adjust when an audio and video stream is captured. We use the Media Devices web application as an example:
Microphone settings
1. Selecting the microphone from the list
code:
Flashphoner.getMediaDevices(null, true).then(function (list) { list.audio.forEach(function (device) { var audio = document.getElementById("audioInput"); var i; var deviceInList = false; for (i = 0; i < audio.options.length; i++) { if (audio.options[i].value == device.id) { deviceInList = true; break; } } if (!deviceInList) { var option = document.createElement("option"); option.text = device.label || device.id; option.value = device.id; audio.appendChild(option); } }); ... }).catch(function (error) { $("#notifyFlash").text("Failed to get media devices"); });
2. Adjusting microphone gain (works in Chrome only)
code:
$("#micGainControl").slider({ range: "min", min: 0, max: 100, value: currentGainValue, step: 10, animate: true, slide: function (event, ui) { currentGainValue = ui.value; if(previewStream) { publishStream.setMicrophoneGain(currentGainValue); } } });
3. Enabling error correction (for the Opus codec only)
code:
if (constraints.audio) { constraints.audio = { deviceId: $('#audioInput').val() }; if ($("#fec").is(':checked')) constraints.audio.fec = $("#fec").is(':checked'); ... }
4. Setting stereo/mono mode.
code:
if (constraints.audio) { constraints.audio = { deviceId: $('#audioInput').val() }; ... if ($("#sendStereoAudio").is(':checked')) constraints.audio.stereo = $("#sendStereoAudio").is(':checked'); ... }
5. Setting audio bitrate in kbps
code:
if (constraints.audio) { constraints.audio = { deviceId: $('#audioInput').val() }; ... if (parseInt($('#sendAudioBitrate').val()) > 0) constraints.audio.bitrate = parseInt($('#sendAudioBitrate').val()); }
6. Turning off the microphone (mute).
code:
if ($("#muteAudioToggle").is(":checked")) { muteAudio(); }
Camera settings
1. Camera selection
code:
Flashphoner.getMediaDevices(null, true).then(function (list) { ... list.video.forEach(function (device) { ... }); }).catch(function (error) { $("#notifyFlash").text("Failed to get media devices"); });
2. Switching cameras.
code:
$("#switchBtn").text("Switch").off('click').click(function () { publishStream.switchCam(); }).prop('disabled', $('#sendCanvasStream').is(':checked'));
Switching of the camera can be done "on the fly" during stream broadcasting. Here is how switching works:
- On PC cameras switch in the order they are defined in the device manager of the operating system.
- On Android, if Chrome is used, the default is the frontal camera. If Firefox is used, the default is the rear camera.
- On iOS in the Safari browser, by default the frontal camera is selected, but in the drop-down the rear camera is the first.
3. Specifying the resolution of the video
code:
function resizeLocalVideo(event) { var requested = constraints.video; if (requested.width != event.target.videoWidth || requested.height != event.target.videoHeight) { console.warn("Camera does not support requested resolution, actual resolution is " + event.target.videoWidth + "x" + event.target.videoHeight); } $("#publishResolution").text(event.target.videoWidth + "x" + event.target.videoHeight); resizeVideo(event.target); }
4. Setting FPS
code:
if (constraints.video) { if (constraints.customStream) { ... } else { ... if (parseInt($('#fps').val()) > 0) constraints.video.frameRate = parseInt($('#fps').val()); } }
5.Setting video bitrate in kbps
code:
if (constraints.video) { if (constraints.customStream) { ... } else { ... if (parseInt($('#sendVideoMinBitrate').val()) > 0) constraints.video.minBitrate = parseInt($('#sendVideoMinBitrate').val()); if (parseInt($('#sendVideoMaxBitrate').val()) > 0) constraints.video.maxBitrate = parseInt($('#sendVideoMaxBitrate').val()); ... } }
6. Setting CPU Overuse Detection
code:
if (!$("#cpuOveruseDetection").is(':checked')) { mediaConnectionConstraints = { "mandatory": { googCpuOveruseDetection: false } } }
7. Turning off the camera (mute)
code:
if ($("#muteVideoToggle").is(":checked")) { muteVideo(); }
Testing camera and microhpone capturing locally
Local camera and microphone test is intended to check capturing in browser without publishing stream to server.
код:
function startTest() { if (Browser.isSafariWebRTC()) { Flashphoner.playFirstVideo(localVideo, true); Flashphoner.playFirstVideo(remoteVideo, false); } Flashphoner.getMediaAccess(getConstraints(), localVideo).then(function (disp) { $("#testBtn").text("Release").off('click').click(function () { $(this).prop('disabled', true); stopTest(); }).prop('disabled', false); window.AudioContext = window.AudioContext || window.webkitAudioContext; if (Flashphoner.getMediaProviders()[0] == "WebRTC" && window.AudioContext) { for (i = 0; i < localVideo.children.length; i++) { if (localVideo.children[i] && localVideo.children[i].id.indexOf("-LOCAL_CACHED_VIDEO") != -1) { var stream = localVideo.children[i].srcObject; audioContextForTest = new AudioContext(); var microphone = audioContextForTest.createMediaStreamSource(stream); var javascriptNode = audioContextForTest.createScriptProcessor(1024, 1, 1); microphone.connect(javascriptNode); javascriptNode.connect(audioContextForTest.destination); javascriptNode.onaudioprocess = function (event) { ... } } } } else if (Flashphoner.getMediaProviders()[0] == "Flash") { micLevelInterval = setInterval(function () { $("#micLevel").text(disp.children[0].getMicrophoneLevel()); }, 500); } testStarted = true; }).catch(function (error) { $("#testBtn").prop('disabled', false); testStarted = false; }); drawSquare(); }
Setting up codecs
When publishing the stream, there is a possibility to eliminate from WebRTC SDP codecs that should not be used to publish the given stream, for example:
publishStream = session.createStream({ ... stripCodecs: ["h264", "flv", "mpv"] }).on(STREAM_STATUS.PUBLISHING, function (publishStream) { ... }); publishStream.publish();
Such a capability is handy when you need to find some workaround for bugs of a browser or if it conflicts with the given codec. For example, if H.264 does not work in a browser, you can turn it off and switch to VP8 when working via WebRTC.