Custom Codec/Bitrate Demo

Audio Codec, audio/video bitrate and resolution customization

by bistri

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://api.bistri.com/bistri.conference.min.js"></script>
    <div class="pane" id="pane_0">
        <input type="text" placeholder="Nickname" id="nickname" class="form-control"><br>
        <input type="button" value="Set Nickname" id="setConf" class="btn btn-info btn-default btn-block">
    </div>
    
    <div class="pane" id="pane_1" style="display: none">
        Room Name: <input type="text" placeholder="Room Name" id="room_field" class="form-control w-120 inline"><br>
        Video Resolution: <input type="text" placeholder="width" id="screen_width" class="form-control w-120 inline" value="640"> x <input type="text" placeholder="height" id="screen_height" class="form-control w-120 inline" value="480"> : <input type="text" placeholder="frame rate" id="frame_rate" class="form-control w-120 inline"><br>
        
        Audio Bitrate (kb/s): <input type="text" placeholder="Eg: 40" id="audio_bitrate" class="form-control w-120 inline"><br>
        
        Video Bitrate (kb/s): <input type="text" placeholder="Eg: 400" id="video_bitrate" class="form-control w-120 inline"><br>
        
        Audio Codec:
        <ul>
            <li><input type="radio" name="audio_codec" value="opus/48000" id="codec_1" checked> Opus/48000 - software decoding, HD quality</li>
            <li><input type="radio" name="audio_codec" value="ISAC/32000" id="codec_2"> ISAC/32000 - hardware decoding, high quality</li>
            <li><input type="radio" name="audio_codec" value="ISAC/16000" id="codec_3"> ISAC/16000 - hardware decoding, wideband quality</li>
        </ul>
       
        <br>
        <input type="button" value="Set Conf & Join Room" id="join" class="btn btn-info btn-default btn-block">
    </div>
    
    <div class="pane" id="pane_2" style="display: none">
        <div id="local_stream"></div>
        <div id="remote_streams"></div>
        <input...

CSS

video {
    width: 100%;
}

.inline {
    margin: 3px 0;
    display: inline;
}

.w-120 {
    width: 120px;
}

.pane {
    margin: 20px;
    /*text-align: center;*/
}

.message {
    text-align: left;
}

#messages_container {
    height: 200px;
    overflow-y: auto;
    border: 1px solid #dedede;
    padding: 10px;
    margin-bottom: 2px;
}

JavaScript

/*
    JS library reference:
    http://developers.bistri.com/webrtc-sdk/js-library-reference
*/

var room;
var nickname;
var constraints;
var audio_bitrate;
var video_bitrate;
var audio_codec;
var localStream;

onBistriConferenceReady = function () {
    if ( !bc.isCompatible() ) {
        alert( "your browser is not WebRTC compatible !" );
        return;
    }

    bc.signaling.bind( "onConnected", function () {
        showPanel( "pane_1" );
    } );

    bc.signaling.bind( "onError", function () {
        alert( error.text + " (" + error.code + ")" );
    } );

    bc.signaling.bind( "onJoinedRoom", function ( data ) {
        var options = {
            "audio-bitrate": audio_bitrate,
            "video-bitrate": video_bitrate,
            "audio-codec": audio_codec,
            "stream": localStream
        };
        room = data.room;
        showPanel( "pane_2" );
        for ( var i=0, max=data.members.length; i<max; i++ ) {
            bc.call( data.members[ i ].id, data.room, options );
        }
    } );
 
    bc.signaling.bind( "onJoinRoomError", function ( error ) {
        alert( error.text + " (" + error.code + ")" );
    } );

    bc.signaling.bind( "onQuittedRoom", function( room ) {
        showPanel( "pane_1" ); 
        bc.stopStream();
    } );
    
    bc.streams.bind( "onStreamAdded", function ( stream ) {
        bc.attachStream( stream, q( "#remote_streams" ) );
    } );
    
    bc.streams.bind( "onStreamClosed", function ( stream ) {
        bc.detachStream( stream );
    } );

    q( "#setConf" ).addEventListener( "click", setNickname );
    q( "#join" ).addEventListener( "click", setConf_joinConference );
    q( "#quit" ).addEventListener( "click", quitConference );   
}

function setNickname(){
    nickname = getNickname();
    if( nickname ){
        bc.init( {
            appId: "38077edb",
            appKey: "4f304359baa6d0fd1f9106aaeb116f33",
            userName: nickname,
            debug: true
        } ); 
       ...