API tools faq
paste
Advertisement
Guest User

Untitled

a guest
May 24th, 2019
533
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 36.52 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>UV4L WebRTC</title>
  7.         <!--script src="https://raw.githubusercontent.com/dorukeker/gyronorm.js/master/dist/gyronorm.complete.min.js" async></script-->
  8.         <!--script src="https://rawgit.com/dorukeker/gyronorm.js/master/dist/gyronorm.complete.min.js" async></script-->
  9.         <script type="text/javascript">
  10.                 try {
  11.                     var xmlHttp = new XMLHttpRequest();
  12.                     xmlHttp.onreadystatechange = function () {
  13.                         if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
  14.                            callback(xmlHttp.responseText);
  15.                         }
  16.                     };
  17.                     xmlHttp.open("GET", theUrl, true); // true for asynchronous
  18.                     xmlHttp.send(null);
  19.                 } catch (e) {
  20.                     console.error(e);
  21.                 }
  22.             }
  23.                 var srcUrl = "https://rawgit.com/dorukeker/gyronorm.js/master/dist/gyronorm.complete.min.js"
  24.                 httpGetAsync(srcUrl, function (text) {
  25.                     var script = document.createElement("script");
  26.                     script.setAttribute("src", srcUrl);
  27.                     document.getElementsByTagName("head")[0].appendChild(script);
  28.                 });
  29.             }
  30.                 document.getElementById('signalling_server').value = signalling_server_address;
  31.                 var cast_not_allowed = !('MediaSource' in window) || location.protocol !== "https:";
  32.                 if (cast_not_allowed || !isFirefox) {
  33.                     if (document.getElementById('cast_tab'))
  34.                         document.getElementById('cast_tab').disabled = true;
  35.                     if (cast_not_allowed) { // chrome supports if run with --enable-usermedia-screen-capturing
  36.                         document.getElementById('cast_screen').disabled = true;
  37.                     }
  38.                     document.getElementById('cast_window').disabled = true;
  39.                     document.getElementById('cast_application').disabled = true;
  40.                     document.getElementById('note2').style.display = "none";
  41.                     document.getElementById('note4').style.display = "none";
  42.                 } else {
  43.                     document.getElementById('note1').style.display = "none";
  44.                     document.getElementById('note3').style.display = "none";
  45.                 }
  46.                 addGyronormScript();
  47.             });
  48.             var ws = null;
  49.             var pc;
  50.             var gn;
  51.             var datachannel, localdatachannel;
  52.             var audio_video_stream;
  53.             var recorder = null;
  54.             var recordedBlobs;
  55.             var pcConfig = {"iceServers": [
  56.                     {"urls": ["stun:stun.l.google.com:19302", "stun:" + signalling_server_hostname + ":3478"]}
  57.                 ]};
  58.             var pcOptions = {
  59.                 optional: [
  60.                     // Deprecated:
  61.                     //{RtpDataChannels: false},
  62.                     //{DtlsSrtpKeyAgreement: true}
  63.                 ]
  64.             };
  65.             var mediaConstraints = {
  66.                 optional: [],
  67.                 mandatory: {
  68.                     OfferToReceiveAudio: true,
  69.                     OfferToReceiveVideo: true
  70.                 }
  71.             };
  72.             var keys = [];
  73.             var trickle_ice = true;
  74.             var remoteDesc = false;
  75.             var iceCandidates = [];
  76.             function createPeerConnection() {
  77.                 try {
  78.                     var pcConfig_ = pcConfig;
  79.                     try {
  80.                         ice_servers = document.getElementById('ice_servers').value;
  81.                         if (ice_servers) {
  82.                             pcConfig_.iceServers = JSON.parse(ice_servers);
  83.                         }
  84.                     } catch (e) {
  85.                         alert(e + "\nExample: "
  86.                                 + '\n[ {"urls": "stun:stun1.example.net"}, {"urls": "turn:turn.example.org", "username": "user", "credential": "myPassword"} ]'
  87.                                 + "\nContinuing with built-in RTCIceServer array");
  88.                     }
  89.                     console.log(JSON.stringify(pcConfig_));
  90.                     pc = new RTCPeerConnection(pcConfig_, pcOptions);
  91.                     pc.onicecandidate = onIceCandidate;
  92.                     if ('ontrack' in pc) {
  93.                         pc.ontrack = onTrack;
  94.                     } else {
  95.                         pc.onaddstream = onRemoteStreamAdded; // deprecated
  96.                     }
  97.                     pc.onremovestream = onRemoteStreamRemoved;
  98.                     pc.ondatachannel = onDataChannel;
  99.                     console.log("peer connection successfully created!");
  100.                 } catch (e) {
  101.                     console.error("createPeerConnection() failed");
  102.                 }
  103.             }
  104.  
  105.             function onDataChannel(event) {
  106.                 console.log("onDataChannel()");
  107.                 datachannel = event.channel;
  108.  
  109.                 event.channel.onopen = function () {
  110.                     console.log("Data Channel is open!");
  111.                     document.getElementById('datachannels').disabled = false;
  112.                 };
  113.  
  114.                 event.channel.onerror = function (error) {
  115.                     console.error("Data Channel Error:", error);
  116.                 };
  117.  
  118.                 event.channel.onmessage = function (event) {
  119.                     console.log("Got Data Channel Message:", event.data);
  120.                     document.getElementById('datareceived').value = event.data;
  121.                 };
  122.  
  123.                 event.channel.onclose = function () {
  124.                     datachannel = null;
  125.                     document.getElementById('datachannels').disabled = true;
  126.                     console.log("The Data Channel is Closed");
  127.                 };
  128.             }
  129.                 iceCandidates.forEach(function (candidate) {
  130.                     pc.addIceCandidate(candidate,
  131.                         function () {
  132.                             console.log("IceCandidate added: " + JSON.stringify(candidate));
  133.                         },
  134.                         function (error) {
  135.                             console.error("addIceCandidate error: " + error);
  136.                         }
  137.                     );
  138.                 });
  139.                 iceCandidates = [];
  140.             }
  141.            
  142.                 console.log("Remote track!");
  143.                 var remoteVideoElement = document.getElementById('remote-video');
  144.                 remoteVideoElement.srcObject = event.streams[0];
  145.                 //remoteVideoElement.play();
  146.             }
  147.                 var remoteVideoElement = document.getElementById('remote-video');
  148.                 remoteVideoElement.srcObject = null;
  149.                 remoteVideoElement.src = ''; // TODO: remove
  150.             }
  151.             function start() {
  152.                 if ("WebSocket" in window) {
  153.                     document.getElementById("stop").disabled = false;
  154.                     document.getElementById("start").disabled = true;
  155.                     document.documentElement.style.cursor = 'wait';
  156.                     var server = document.getElementById("signalling_server").value.toLowerCase();
  157.  
  158.                     var protocol = location.protocol === "https:" ? "wss:" : "ws:";
  159.                     ws = new WebSocket(protocol + '//' + server + '/stream/webrtc');
  160.  
  161.                     function call(stream) {
  162.                         iceCandidates = [];
  163.                         remoteDesc = false;
  164.                         createPeerConnection();
  165.                         if (stream) {
  166.                             pc.addStream(stream);
  167.                         }
  168.                         var request = {
  169.                             what: "call",
  170.                             options: {
  171.                                 force_hw_vcodec: document.getElementById("remote_hw_vcodec").checked,
  172.                                 vformat: document.getElementById("remote_vformat").value,
  173.                                 trickle_ice: trickleice_selection()
  174.                             }
  175.                         };
  176.                         ws.send(JSON.stringify(request));
  177.                         console.log("call(), request=" + JSON.stringify(request));
  178.                     }
  179.  
  180.                     ws.onopen = function () {
  181.                         console.log("onopen()");
  182.  
  183.                         audio_video_stream = null;
  184.                         var cast_mic = document.getElementById("cast_mic").checked;
  185.                         var cast_tab = document.getElementById("cast_tab") ? document.getElementById("cast_tab").checked : false;
  186.                         var cast_camera = document.getElementById("cast_camera").checked;
  187.                         var cast_screen = document.getElementById("cast_screen").checked;
  188.                         var cast_window = document.getElementById("cast_window").checked;
  189.                         var cast_application = document.getElementById("cast_application").checked;
  190.                         var echo_cancellation = document.getElementById("echo_cancellation").checked;
  191.                         var localConstraints = {};
  192.                         if (cast_mic) {
  193.                             if (echo_cancellation)
  194.                                 localConstraints['audio'] = isFirefox ? {echoCancellation: true} : {optional: [{echoCancellation: true}]};
  195.                             else
  196.                                 localConstraints['audio'] = isFirefox ? {echoCancellation: false} : {optional: [{echoCancellation: false}]};
  197.                         } else if (cast_tab) {
  198.                             localConstraints['audio'] = {mediaSource: "audioCapture"};
  199.                         } else {
  200.                             localConstraints['audio'] = false;
  201.                         }
  202.                         if (cast_camera) {
  203.                             localConstraints['video'] = true;
  204.                         } else if (cast_screen) {
  205.                             if (isFirefox) {
  206.                                 localConstraints['video'] = {frameRate: {ideal: 30, max: 30},
  207.                                     //width: {min: 640, max: 960},
  208.                                     //height: {min: 480, max: 720},
  209.                                     mozMediaSource: "screen",
  210.                                     mediaSource: "screen"};
  211.                             } else {
  212.                                 // chrome://flags#enable-usermedia-screen-capturing
  213.                                 document.getElementById("cast_mic").checked = false;
  214.                                 localConstraints['audio'] = false; // mandatory for chrome
  215.                                 localConstraints['video'] = {'mandatory': {'chromeMediaSource':'screen'}};
  216.                             }
  217.                         } else if (cast_window)
  218.                             localConstraints['video'] = {frameRate: {ideal: 30, max: 30},
  219.                                 //width: {min: 640, max: 960},
  220.                                 //height: {min: 480, max: 720},
  221.                                 mozMediaSource: "window",
  222.                                 mediaSource: "window"};
  223.                         else if (cast_application)
  224.                             localConstraints['video'] = {frameRate: {ideal: 30, max: 30},
  225.                                 //width: {min: 640, max: 960},
  226.                                 //height:  {min: 480, max: 720},
  227.                                 mozMediaSource: "application",
  228.                                 mediaSource: "application"};
  229.                         else
  230.                             localConstraints['video'] = false;
  231.                     };
  232.  
  233.                 } else {
  234.                     alert("Sorry, this browser does not support WebSockets.");
  235.                 }
  236.             }
  237.  
  238.             function stop() {
  239.                 if (datachannel) {
  240.                     console.log("closing data channels");
  241.                     datachannel.close();
  242.                     datachannel = null;
  243.                     document.getElementById('datachannels').disabled = true;
  244.                 }
  245.                 if (localdatachannel) {
  246.                     console.log("closing local data channels");
  247.                     localdatachannel.close();
  248.                     localdatachannel = null;
  249.                 }
  250.                 if (audio_video_stream) {
  251.                     try {
  252.                         if (audio_video_stream.getVideoTracks().length)
  253.                             audio_video_stream.getVideoTracks()[0].stop();
  254.                         if (audio_video_stream.getAudioTracks().length)
  255.                             audio_video_stream.getAudioTracks()[0].stop();
  256.                         audio_video_stream.stop(); // deprecated
  257.                     } catch (e) {
  258.                         for (var i = 0; i < audio_video_stream.getTracks().length; i++)
  259.                            audio_video_stream.getTracks()[i].stop();
  260.                    }
  261.                    audio_video_stream = null;
  262.                }
  263.                stop_record();
  264.                document.getElementById('remote-video').srcObject = null;
  265.                document.getElementById('local-video').srcObject = null;
  266.                document.getElementById('remote-video').src = ''; // TODO; remove
  267.                document.getElementById('local-video').src = ''; // TODO: remove
  268.                if (pc) {
  269.                    pc.close();
  270.                    pc = null;
  271.                }
  272.                if (ws) {
  273.                    ws.close();
  274.                    ws = null;
  275.                }
  276.                document.getElementById("stop").disabled = true;
  277.                document.getElementById("start").disabled = false;
  278.                document.documentElement.style.cursor = 'default';
  279.            }
  280.                var old = document.getElementById(id).checked;
  281.                var elements = document.getElementsByName(name);
  282.                for (var i = 0; i < elements.length; i++) {
  283.                    elements[i].checked = false;
  284.                }
  285.                document.getElementById(id).checked = old ? true : false;
  286.                /*
  287.                 // Disable video hw codec. Not supported at the moment when casting.
  288.                 if (name === 'video_cast') {
  289.                 unselect_remote_hw_vcodec();
  290.                 }
  291.                 */
  292.            }
  293.  
  294.            function send_message() {
  295.                var msg = document.getElementById('datamessage').value;
  296.                datachannel.send(ms);
  297.                console.log("message sent: ", msg);
  298.            }
  299.  
  300.            function create_localdatachannel() {
  301.                if (pc && localdatachannel)
  302.                    return;
  303.                localdatachannel = pc.createDataChannel('datachannel');
  304.                localdatachannel.onopen = function(event) {
  305.                    if (localdatachannel.readyState === "open") {
  306.                        localdatachannel.send("datachannel created!");
  307.                    }
  308.                };
  309.                console.log("data channel created");
  310.            }
  311.  
  312.            function close_localdatachannel() {
  313.                if (localdatachannel) {
  314.                    localdatachannel.close();
  315.                    localdatachannel = null;
  316.                }
  317.                console.log("local data channel closed");
  318.            }
  319.  
  320.            function getKeycodesArray(arr) {
  321.                var newArr = new Array();
  322.                for (var i = 0; i < arr.length; i++) {
  323.                    if (typeof arr[i] == "number") {
  324.                        newArr[newArr.length] = arr[i];
  325.                    }
  326.                }
  327.                return newArr;
  328.            }
  329.  
  330.            function convertKeycodes(arr) {
  331.                var map = {
  332.                    /*Space*/ 32: 57,
  333.                    /*Enter*/13: 28,
  334.                    /*Tab*/ 9: 15,
  335.                    /*Esc*/27: 1,
  336.                    /*Backspace*/8: 14,
  337.                    /*Shift*/16: 42,
  338.                    /*Control*/ 17: 29,
  339.                    /*Alt Left*/ 18: 56,
  340.                    /*Alt Right*/ 225: 100,
  341.                    /*Caps Lock*/ 20: 58,
  342.                    /*Num Lock*/ 144: 69,
  343.                    /*a*/ 65: 30,
  344.                    /*b*/ 66: 48,
  345.                    /*c*/ 67: 46,
  346.                    /*d*/ 68: 32,
  347.                    /*e*/ 69: 18,
  348.                    /*f*/ 70: 33,
  349.                    /*g*/ 71: 34,
  350.                    /*h*/ 72: 35,
  351.                    /*i*/ 73: 23,
  352.                    /*j*/ 74: 36,
  353.                    /*k*/ 75: 37,
  354.                    /*l*/ 76: 38,
  355.                    /*m*/ 77: 50,
  356.                    /*n*/ 78: 49,
  357.                    /*o*/ 79: 24,
  358.                    /*p*/ 80: 25,
  359.                    /*q*/ 81: 16,
  360.                    /*r*/ 82: 19,
  361.                    /*s*/ 83: 31,
  362.                    /*t*/ 84: 20,
  363.                    /*u*/ 85: 22,
  364.                    /*v*/ 86: 47,
  365.                    /*w*/ 87: 17,
  366.                    /*x*/ 88: 45,
  367.                    /*y*/ 89: 21,
  368.                    /*z*/ 90: 44,
  369.                    /*1*/ 49: 2,
  370.                    /*2*/ 50: 3,
  371.                    /*3*/ 51: 4,
  372.                    /*4*/ 52: 5,
  373.                    /*5*/ 53: 6,
  374.                    /*6*/ 54: 7,
  375.                    /*7*/ 55: 8,
  376.                    /*8*/ 56: 9,
  377.                    /*9*/ 57: 10,
  378.                    /*0*/ 48: 11,
  379.                    /*; (firefox)*/ 59: 39,
  380.                    /*; (chrome)*/ 186: 39,
  381.                    /*=(firefox)*/ 61: 13,
  382.                    /*=(chrome)*/ 187: 13,
  383.                    /*,*/ 188: 51,
  384.                    /*-(minus in firefox)*/ 173: 12,
  385.                    /*-(dash in chrome)*/ 189: 12,
  386.                    /*.*/ 190: 52,
  387.                    /*/*/ 191: 53,
  388.                    /*`*/ 192: 41,
  389.                    /*{*/ 219: 26,
  390.                    /*\*/ 220: 43,
  391.                    /*}*/ 221: 27,
  392.                    /*'*/ 222: 40,
  393.                    /*left-arrow*/ 37: 105,
  394.                    /*up-arrow*/ 38: 103,
  395.                    /*right-arrow*/ 39: 106,
  396.                    /*down-arrow*/ 40: 108,
  397.                    /*Insert*/ 45: 110,
  398.                    /*Delete*/ 46: 111,
  399.                    /*Home*/ 36: 102,
  400.                    /*End*/ 35: 107,
  401.                    /*Page Up*/ 33: 104,
  402.                    /*Page Down*/ 34: 109,
  403.                    /*F1 */ 112: 59,
  404.                    /*F2 */ 113: 60,
  405.                    /*F3 */ 114: 61,
  406.                    /*F4 */ 115: 62,
  407.                    /*F5 */ 116: 63,
  408.                    /*F6 */ 117: 64,
  409.                    /*F7 */ 118: 65,
  410.                    /*F8 */ 119: 66,
  411.                    /*F9 */ 120: 67,
  412.                    /*F10 */ 121: 68,
  413.                    /*F11 */ 122: 87,
  414.                    /*F12 */ 123: 88,
  415.                    /*. Del*/ 110: 83,
  416.                    /*0 Ins*/ 96: 82,
  417.                    /*1 End*/ 97: 79,
  418.                    /*2 down-arrow*/ 98: 80,
  419.                    /*3 Pg Dn*/ 99: 81,
  420.                    /*4 left-arrow*/ 100: 75,
  421.                    /*5*/ 101: 76,
  422.                    /*6 right-arrow*/ 102: 77,
  423.                     /*7 Home*/  103: 71,
  424.                    /*8 up-arrow*/ 104: 72,
  425.                    /*9 Pg Up*/ 105: 73,
  426.                    /*+*/ 107: 78,
  427.                    /*-*/ 109: 74,
  428.                    /***/ 106: 55,
  429.                    /*/*/ 111: 98,
  430.                    /*Keypad Enter*/ 13: 28
  431.                };
  432.                var convertedKeys = [];
  433.                arr.forEach(function (a) {
  434.                    if (map[a] !== undefined)
  435.                        convertedKeys.push(map[a]);
  436.                    //else
  437.                    //    convertedKeys.push(a);
  438.                });
  439.                return convertedKeys;
  440.            }
  442.            function convertCharCode(ch) {
  443.                var arr = [];
  444.                if (ch >= 48 && ch <= 57) { /* 0..9 */
  445.                    arr[0] = ch;
  446.                     arr = convertKeycodes(arr);
  447.                 } else if (ch >= 97 && ch <= 122) { /* a..z */
  448.                    arr[0] = ch - 32;
  449.                     arr = convertKeycodes(arr);
  450.                 } else if (ch >= 65 && ch <= 90) { /* A..Z */
  451.                    arr[0] = 16;
  452.                     arr[1] = ch;
  453.                     arr = convertKeycodes(arr);
  454.                 } else if (ch == 46) { // .
  455.                     arr[0] = 52;
  456.                 } else if (ch == 33) { // !
  457.                     arr[0] = 42;
  458.                     arr[1] = 2;
  459.                 } else if (ch == 63) { // ?
  460.                     arr[0] = 42;
  461.                     arr[1] = 53;
  462.                 } else if (ch == 44) { // ,
  463.                     arr[0] = 51;
  464.                 } else if (ch == 34) { // "
  465.                     arr[0] = 42;
  466.                     arr[1] = 40;
  467.                 } else if (ch == 39) { // '
  468.                     arr[0] = 40;
  469.                 } else if (ch == 58) { // :
  470.                     arr[0] = 42;
  471.                     arr[1] = 39;
  472.                 } else if (ch == 40) { // (
  473.                     arr[0] = 42;
  474.                     arr[1] = 10;
  475.                 } else if (ch == 41) { // )
  476.                     arr[0] = 42;
  477.                     arr[1] = 11;
  478.                 } else if (ch == 126) { // ~
  479.                     arr[0] = 42;
  480.                     arr[1] = 41;
  481.                 } else if (ch == 42) { // *
  482.                     arr[0] = 42;
  483.                     arr[1] = 9;
  484.                 } else if (ch == 45) { // -
  485.                     arr[0] = 12;
  486.                 } else if (ch == 47) { // /
  487.                     arr[0] = 53;
  488.                 } else if (ch == 64) { // @
  489.                     arr[0] = 42;
  490.                     arr[1] = 3;
  491.                 } else if (ch == 95) { // _
  492.                     arr[0] = 42;
  493.                     arr[1] = 12;
  494.                 }
  495.                 return arr;
  496.             }
  497.  
  498.             function toKeyCode() {
  499.                 var getCharCode = function (str) {
  500.                     return str.charCodeAt(str.length - 1);
  501.                 };
  502.                 var cc = getCharCode(this.value);
  503.                 document.getElementById("datamessage").removeEventListener("keyup", toKeyCode);
  504.                 this.value = "";
  505.                 var keysArray = convertCharCode(cc);
  506.                 if (datachannel && document.getElementById('keypresssend').checked && keysArray.length) {
  507.                    var keycodes = {
  508.                        keycodes: keysArray
  509.                    };
  510.                     datachannel.send(JSON.stringify(keycodes));
  511.                 }
  512.             }
  513.             ;
  514.  
  515.             function keydown(e) {
  516.                 if (e.keyCode == 0 || e.keyCode == 229) { // on mobile
  517.                     return;
  518.                 }
  519.                 e.preventDefault();
  520.                 e.stopPropagation();
  521.                 e.stopImmediatePropagation();
  522.                 keys[e.keyCode] = e.keyCode;
  523.                 for (var i = keys.length; i >= 0; i--) {
  524.                     if (keys[i] !== 16 && keys[i] !== 17 && keys[i] !== 18 && keys[i] !== 225 && keys[i] !== e.keyCode)
  525.                        keys[i] = false;
  526.                 }
  527.                 var keysArray = convertKeycodes(getKeycodesArray(keys));
  528.                 if (datachannel && document.getElementById('keypresssend').checked && keysArray.length) {
  529.                    var keycodes = {
  530.                        keycodes: keysArray
  531.                    };
  532.                     datachannel.send(JSON.stringify(keycodes));
  533.                 }
  534.             }
  535.             ;
  536.  
  537.             function keyup(e) {
  538.                 if (e.keyCode == 0 || e.keyCode == 229) { // on mobile
  539.                     document.getElementById("datamessage").addEventListener("keyup", toKeyCode);
  540.                     return;
  541.                 }
  542.                 e.preventDefault();
  543.                 e.stopPropagation();
  544.                 e.stopImmediatePropagation();
  545.                 keys[e.keyCode] = false;
  546.             }
  547.             ;
  548.  
  549.             function keypresssend_selection() {
  550.                 if (document.getElementById('keypresssend').checked) {
  551.                     window.addEventListener('keydown', keydown, true);
  552.                     window.addEventListener('keyup', keyup, true);
  553.                 } else {
  554.                     keys = [];
  555.                     window.removeEventListener('keydown', keydown, true);
  556.                     window.removeEventListener('keyup', keyup, true);
  557.                 }
  558.             }
  559.  
  560.             function trickleice_selection() {
  561.                 if (document.getElementById('trickleice').value === "false") {
  562.                     trickle_ice = false;
  563.                 } else if (document.getElementById('trickleice').value === "true") {
  564.                     trickle_ice = true;
  565.                 } else {
  566.                     trickle_ice = null;
  567.                 }
  568.                 return trickle_ice;
  569.             }
  570.  
  571.             window.onload = function () {
  572.                 if (window.MediaRecorder === undefined) {
  573.                     document.getElementById('record').disabled = true;
  574.                 }
  575.                 if (false) {
  576.                     start();
  577.                 }
  578.             };
  579.  
  580.             window.onbeforeunload = function () {
  581.                 if (ws) {
  582.                     ws.onclose = function () {}; // disable onclose handler first
  583.                     stop();
  584.                 }
  585.             };
  586.  
  587.         </script>
  588.         <style>
  589.             #container {
  590.                 display: flex;
  591.                 flex-flow: row nowrap;
  592.                 align-items: flex-end;
  593.             }
  594.             video {
  595.                 background: #eee none repeat scroll 0 0;
  596.                 border: 1px solid #aaa;
  597.             }
  598.             .overlayWrapper {
  599.                 position: relative;
  600.             }
  601.             .overlayWrapper .overlay {
  602.                 position: absolute;
  603.                 top: 0;
  604.                 left: 5px;
  605.             }
  606.             p {
  607.                 margin: 0.125em;
  608.             }
  609.             small {
  610.                 font-size: smaller;
  611.             }
  612.         </style>
  613.     </head>
  614.     <body>
  615.         <h1>
  616.             <span>WebRTC two-way Audio/Video/Data Intercom & Recorder</span>
  617.        </h1>
  618.        <h3 style="color:red" >
  619.            <span>WARNING! Some browsers do not allow to access local media on insecure origins.</span>
  620.            <span>Consider switching the UV4L Streaming Server to secure HTTPS instead.</span>
  621.        </h3>
  622.        <div id="container">
  623.            <div class="overlayWrapper">
  624.                <video id="remote-video" autoplay="" width="640" height="480">
  625.                    Your browser does not support the video tag.
  626.                </video>
  627.                <p class="overlay">remote</p>
  628.            </div>
  629.            <div class="overlayWrapper">
  630.                <video id="local-video" autoplay="" width="320" height="240">
  631.                    Your browser does not support the video tag.
  632.                </video>
  633.                <p class="overlay">local</p>
  634.            </div>
  635.        </div>
  636.        <div id="controls">
  637.            <button type=button id="pause" onclick="pause();" title="pause or resume local player">Pause/Resume</button>
  638.             <button type=button id="mute" onclick="mute();" title="mute or unmute remote audio source">Mute/Unmute</button>
  639.             <button type=button id="fullscreen" onclick="fullscreen();">Fullscreen</button>
  640.             <button type=button id="record" onclick="start_stop_record();" title="start or stop recording audio/video">Start Recording</button>
  641.         </div>
  642.         <fieldset>
  643.             <legend><b>Remote peer options</b></legend>
  644.             <div>
  645.                 <span>Video:</span>
  646.                 <label><input type="checkbox" onclick="remote_hw_vcodec_selection();"  id="remote_hw_vcodec" name="remote_hw_vcodec" value="remote_hw_vcodec" title="try to force the use of the hardware codec for both encoding and decoding if enabled and supported">force use of hardware codec for</label>
  647.                 <select id="remote_vformat" name="remote_vformat" onclick="remote_hw_vcodec_format_selection();" title="available resolutions and frame rates at the min., max. and start configured bitrates for adaptive streaming which will be scaled from the base 720p 30fps">
  648.                     <option value="5">320x240 15 fps</option>
  649.                     <option value="10">320x240 30 fps</option>
  650.                     <option value="20">352x288 30 fps</option>
  651.                     <option value="25">640x480 15 fps</option>
  652.                     <option value="30">640x480 30 fps</option>
  653.                     <option value="35">800x480 30 fps</option>
  654.                     <option value="40">960x720 30 fps</option>
  655.                     <option value="50">1024x768 30 fps</option>
  656.                     <option value="55">1280x720 15 fps</option>
  657.                     <option value="60" selected="selected">1280x720 30 fps, kbps min.800 max.4000 start1200</option>
  658.                     <option value="63">1280x720 60 fps</option>
  659.                     <option value="65">1280x768 15 fps</option>
  660.                     <option value="70">1280x768 30 fps</option>
  661.                     <option value="75">1536x768 30 fps</option>
  662.                     <option value="80">1280x960 30 fps</option>
  663.                     <option value="90">1600x768 30 fps</option>
  664.                     <option value="95">1640x1232 15 fps</option>
  665.                     <option value="97">1640x1232 30 fps</option>
  666.                     <option value="98">1792x896 15 fps</option>
  667.                     <option value="99">1792x896 30 fps</option>
  668.                     <option value="100">1920x1080 15 fps</option>
  669.                     <option value="105">1920x1080 30 fps</option>
  670.                 </select>
  671.                 <p id="note1_"><small>NOTE: if your browser does not support the hardware codec yet, try Firefox with the codec plugin enabled or a recent version of Chrome.</small></p>
  672.             </div>
  673.         </fieldset>
  674.         <div>
  675.             <details id="record-detail">
  676.                 <summary><b>Recorded Audio/Video stream</b></summary>
  677.                 <div>
  678.                     <div class="overlayWrapper">
  679.                         <video id="recorded-video" controls>
  680.                             Your browser does not support the video tag.
  681.                         </video>
  682.                         <p class="overlay">recorded</p>
  683.                     </div>
  684.                 </div>
  685.                 <div>
  686.                     <p><small>NOTE: some old Chrome version may generate corrupted video if the audio track is not present as well (use Firefox in this case)</small></p>
  687.                     <button type=button id="discard" onclick="discard_recording();" title="discard recorded audio/video">Discard</button>
  688.                     <button type=button id="download" onclick="download();" title="save recorded audio/video">Save as</button>
  689.                 </div>
  690.             </details>
  691.         </div><br>
  692.         <fieldset>
  693.             <legend><b>Cast local Audio/Video sources to remote peer</b></legend>
  694.             <div>
  695.                 <span>Audio:</span>
  696.                 <label><input type="checkbox" onclick="singleselection('audio_cast', 'cast_mic');" id="cast_mic" name="audio_cast" value="microphone">microphone/other input</label>
  697.                 <label><input type="checkbox" id="echo_cancellation" name="audio_processing" title="disable any audio processing when casting music" checked>echo cancellation</label>
  698.                 <!--label><input type="checkbox" onclick="singleselection('audio_cast', 'cast_tab');" id="cast_tab" name="audio_cast" value="system">tab</label-->
  699.             </div>
  700.             <div>
  701.                 <span>Video:</span>
  702.                 <label><input type="checkbox" onclick="singleselection('video_cast', 'cast_camera');" id="cast_camera" name="video_cast" value="camera">camera</label>
  703.                 <label><input type="checkbox" onclick="singleselection('video_cast', 'cast_screen');" id="cast_screen" name="video_cast" value="screen">screen</label>
  704.                 <label><input type="checkbox" onclick="singleselection('video_cast', 'cast_window');" id="cast_window" name="video_cast" value="screen">window</label>
  705.                 <label><input type="checkbox" onclick="singleselection('video_cast', 'cast_application');" id="cast_application" name="video_cast" value="application">application</label>
  706.             </div>
  707.             <div>
  708.                 <p id="note1"><small>NOTE: camera and screen can be casted over HTTPS only in Chrome. For the screen the --enable-usermedia-screen-capturing flag must be set. window or application casting is only supported in Firefox 44 on.</small></p>
  709.                 <p id="note2"><small>NOTE: except for camera, to enable screen, window or application casting open <i>about:config</i> URL
  710.                         and set <i>media.getusermedia.screensharing.enabled</i> to <i>true</i>
  711.                         and permanently add the current domain to the list in <i>media.getusermedia.screensharing.allowed_domains.</i></small>
  712.                 </p>
  713.                 <p id="note3"><small>NOTE: if you want to cast music, for better audio quality disable <i>echo-cancellation.</i></small></p>
  714.                 <p id="note4"><small>NOTE: if you want to cast music, for better audio quality disable <i>echo-cancellation</i>,
  715.                         and <i>aec</i>, <i>noise-suppression</i>, <i>agc</i> in the browser configuration <i>(about:config).</i></small>
  716.                 </p>
  717.             </div>
  718.         </fieldset>
  719.         <div>
  720.             <details>
  721.                 <summary><b>Data Channels</b></summary>
  722.                 <fieldset id="datachannels" disabled>
  723.                     <span>message: </span><input type="text" id="datamessage" value="" title="message to send to the remote peer"/>
  724.                     <button id="datasend" onclick="send_message();">Send</button>
  725.                     <span>received: </span><input type="text" readonly="readonly" id="datareceived" size="40" title="data received from the remote peer"/><br>
  726.                     <label><input type="checkbox" onclick="orientationsend_selection();" id="orientationsend" name="orientationsend" title="send device orientation angles when they change">send device orientation angles alpha, beta, gamma</label>
  727.                     <label><input type="checkbox" onclick="keypresssend_selection();" id="keypresssend" name="keypresssend" title="send keyboard events. Assume US layout. For users with virtual keyboard: put the focus on the 'message' input text item.">send key codes (US layout)</label>
  728.                     <label><input type="checkbox" onclick="alert('not implemented yet');" id="mousesend" name="mousesend" title="send mouse events">send mouse events</label>
  729.                 </fieldset>
  730.                 <!--fieldset id="localdatachannels">
  731.                    <button id="datacreate" onclick="create_localdatachannel();">Create</button>
  732.                    <button id="dataclose" onclick="close_localdatachannel();">Close</button>
  733.                </fieldset-->
  734.             </details>
  735.         </div><br>
  736.         <div id="commands">
  737.             <details open>
  738.                 <summary><b>Advanced options</b></summary>
  739.                 <fieldset>
  740.                     <span>Remote Peer/Signalling Server Address: </span><input required type="text" id="signalling_server" value="192.168.100.6:8080" title="<host>:<port>, default address is autodetected"/><br>
  741.                     <span>Optional ICE Servers (STUN/TURN): </span><input type="text" id="ice_servers" value="" title="array of RTCIceServer objects as valid JSON string"/><br>
  742.                     <span>Trickle ICE: </span>
  743.                     <select onclick="trickleice_selection();" id="trickleice" name="trickleice" title="enable trickle ice">
  744.                         <option value="auto">auto</option>
  745.                         <option value="true" selected="selected">true</option>
  746.                         <option value="false">false</option>
  747.                     </select>
  748.                 </fieldset>
  749.             </details>
  750.             <button id="start" style="background-color: green; color: white" onclick="start();">Call!</button>
  751.             <button disabled id="stop" style="background-color: red; color: white" onclick="stop();">Hang up</button>
  752.         </div><br>
  753.         <a target="_top" href="/">home</a>&nbsp;<a href="/panel" target="_blank" title="change the image settings on-the-fly">control panel</a>
  754.     </body>
  755. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!