如何将 jquery 转换为 javascript

Question

我在 jquery 中完全是虚拟的，似乎有很多关于 jquery 和 JS 的问题与我的相关。 但无论如何我会尝试。

我正在尝试创建一个使用 peerjs 框架的 WebRTC 视频聊天应用程序（peerjs 用于获取用于拨打电话的唯一 ID）。 我找到了一个例子，只想使用 JS。 这是代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  <script type="text/javascript" src="http://cdn.peerjs.com/0.3/peer.min.js"></script>

  <script>
  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

  var myStream;
  var peer = new Peer({key: 'peerJS key'});

  var setOthersStream = function(stream){
    $('#others-video').prop('src', URL.createObjectURL(stream));
  };

  var setMyStream = function(stream){
    myStream = stream;
    $('#video').prop('src', URL.createObjectURL(stream));
  };

  peer.on('open', function(id){
    $('#peer-id').text(id);
  });

  peer.on('call', function(call){
    call.answer(myStream);
    call.on('stream', setOthersStream);
  });

  $(function(){
    navigator.getUserMedia({audio: true, video: true}, setMyStream, function(){});

    $('#call').on('click', function(){
      var call = peer.call($('#others-peer-id').val(), myStream);
      call.on('stream', setOthersStream);
    });
  });

  peer.on('error', function(e){
    console.log(e.message);
  });
  </script>
</head>

<body>
  <p>Your ID : <span id="peer-id"></span></p>
  <div id="dial">
    <input type="text" id="others-peer-id" placeholder="Enter ID whom you want to call" /><button id="call">Call</button>
  </div>

我猜带'$'标记的字符串是jquery。

而不是 jquery 库：

我想使用 node.js 库中的 socket.io。 而且我怀疑我必须将其与此绑定：

 <script type="text/javascript" src="/socket.io/socket.io.js"></script>

请指导我。 任何帮助将不胜感激。

Answer 1

以下是 Javascript 代码，我还没有测试过，但它应该可以正常工作。

<html>
    <head>
        <!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> -->
        <script type="text/javascript" src="http://cdn.peerjs.com/0.3/peer.min.js"></script>

        <script>
            navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

            var myStream;
            var peer = new Peer({
                key : 'peerJS key'
            });

            var setOthersStream = function(stream) {
                document.querySelector('#others-video').setAttribute('src', URL.createObjectURL(stream));
            };

            var setMyStream = function(stream) {
                myStream = stream;
                document.querySelector('#video').setAttribute('src', URL.createObjectURL(stream));
            };

            peer.on('open', function(id) {
                document.querySelector('#peer-id').textContent = id;
            });

            peer.on('call', function(call) {
                call.answer(myStream);
                call.on('stream', setOthersStream);
            });

            window.onload = (function() {
                navigator.getUserMedia({
                    audio : true,
                    video : true
                }, setMyStream, function() {
                });

                document.querySelector('#call').addEventListener('click', function() {
                    var call = peer.call(document.querySelector('#others-peer-id').value, myStream);
                    call.addEventListener('stream', setOthersStream);
                });
            });

            peer.on('error', function(e) {
                console.log(e.message);
            });
        </script>
    </head>

    <body>
        <p>
            Your ID : <span id="peer-id"></span>
        </p>
        <div id="dial">
            <input type="text" id="others-peer-id" placeholder="Enter ID whom you want to call" />
            <button id="call">
                Call
            </button>
        </div>
    </body>
</html>

下面是变化映射

.val() -> .value
.on() -> .addEventListener()
.prop() -> .setAttribute()
$("selector") -> document.querySelector("selector")
jQuery.ready -> window.onload

如何将 jquery 转换为 javascript

问题描述

1 个解决方案

解决方案1
0 2015-12-25 08:30:45

如何将 jquery 转换为 javascript

问题描述

1 个解决方案

解决方案1 0 2015-12-25 08:30:45

解决方案1
0 2015-12-25 08:30:45