如何在HTML5使用WebRTC(内含可测试地址可用TRUN服务器)-阿里云开发者社区

如何在HTML5使用WebRTC(内含可测试地址可用TRUN服务器)

2024-01-17 99

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 如何在HTML5使用WebRTC(内含可测试地址可用TRUN服务器)

// 从地址栏获取参数
const url=location.href;
let name = getParamFromUrl(url, "name");
let role = getParamFromUrl(url, "role");
let remote = getParamFromUrl(url, "remote"); // answer none remote
var localOpened = false;

// 信令服务器
const signaling = new SignalingChannel("wss://www.zhaosonghan.com:9001", name, role, onmessage);
signaling.remote = remote;

// TURN 参数
const constraints = {
   audio: true, video: true};
const configuration = {
   iceServers: [{
   
                                      urls:'turn:43.138.235.180:9002',
                                      username: name,
                                      credential: 'mypwd'
                                    }]};

// 最重要的对象
const pc = new RTCPeerConnection(configuration);

// 没太大用
pc.getStats = (status) => {
   
  console.log("getStats ");
}

// 没太大用，状态改变会触发
pc.oniceconnectionstatechange = async (ev) => {
   
  console.log("oniceconnectionstatechange " + pc.iceConnectionState);

  // 如果是 answer 并且不是 local，打开自己本地的视频
  if (ROLE_ANSWER == role && !localOpened) {
   
    localOpened = true;
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    stream.getTracks().forEach((track) => pc.addTrack(track, stream));

    // now, trigger onnegotiationneeded / onicecandidate
    document.getElementById('local').srcObject = stream;   
  }
}

// ICE 失败会有调用
pc.onicecandidateerror = (event) => {
   
  console.log("onicecandidateerror");
}

// 触发产生 candidate
// Send any ice candidates to the other peer.
pc.onicecandidate = ({
   candidate}) => {
   
  if (null == candidate)
    return;

  log("onicecandidate=" + JSON.stringify(candidate));

  signaling.sendToPeer(signaling.remote, {
   id:ID_WEBRTC_CANDI, candi:candidate});
}

// getUserMedia 调用后，会触发
// Let the "negotiationneeded" event trigger offer generation.
// offer trigger
pc.onnegotiationneeded = async () => {
   
  try {
   

    log("onnegotiationneeded");
    await pc.setLocalDescription(await pc.createOffer());

    // Send the offer to the other peer.
    signaling.sendToPeer(signaling.remote, {
   id:ID_WEBRTC_DESC, desc: pc.localDescription});
  } catch (err) {
   
    console.error(err);
  }
};

// Once remote track media arrives, show it in remote video element.
pc.ontrack = (event) => {
   
  // Don't set srcObject again if it is already set.
  let remoteView = document.getElementById('remote');
  if (remoteView.srcObject) return;
  remoteView.srcObject = event.streams[0];
};

// 最开始的地方
// Call start() to initiate.
async function start() {
   
  try {
   
    // Get local stream, show it in 'local'
    const stream =
      await navigator.mediaDevices.getUserMedia(constraints);
      stream.getTracks().forEach((track) => pc.addTrack(track, stream));

      // now, trigger onnegotiationneeded / onicecandidate
      document.getElementById('local').srcObject = stream;

  } catch (err) {
   
    log("start error=" + err);
  }
}

// 信令服务器交互
function onmessage(data) {
   
  //console.log("onmsg=" + data);

  let jsonRoot = eval('(' + data + ')');
  let cmd = parseInt(jsonRoot.head.cmd);
  //console.log("onmessage cmd=" + cmd);

  switch (cmd) {
   
    case CMD_REQ_SEND_PEER:
      handleCmdFromPeer(data);
      break;
    case CMD_RSP_SEND_PEER:
      handleSendPeerResp(data);
      break;
    case CMD_RSP_LOGIN:
      handleLogin(data);
      break;
    default:
      break;
  }
}

function handleLogin(data) {
   
  let jsonRoot = eval('(' + data + ')');

  log("login rst=" + jsonRoot.data.ret);
}

function handleSendPeerResp(data) {
   
  let jsonRoot = eval('(' + data + ')');
  log("handleSendPeerResp=" + jsonRoot.data.ret);
}

function handleCmdFromPeer(data) {
   
  let jsonRoot = eval('(' + data + ')');
  signaling.remote = jsonRoot.head.name;
  log("cmd from peer " + signaling.remote);

  let cmdid = parseInt(jsonRoot.data.msg.id);
  switch (cmdid) {
   
    case ID_WEBRTC_DESC:
      setRemoteDesc(jsonRoot.data.msg.desc);
      break;
    case ID_WEBRTC_CANDI:
      setCandidate(jsonRoot.data.msg.candi);
      break;
    default:
      break;
  }
}

// 添加 candidate
async function setCandidate(candi) {
   
  log("setCandidate " + JSON.stringify(candi));
  await pc.addIceCandidate(candi);
}

// 设置远端desc
async function setRemoteDesc(json) {
   
    if ('offer' == json.type) {
   

      await pc.setRemoteDescription(json);
      const stream = await navigator.mediaDevices.getUserMedia(constraints);
      stream.getTracks().forEach((track) => pc.addTrack(track, stream));
      await pc.setLocalDescription(await pc.createAnswer());
      log("offer setremotedesc local desc=" + pc.localDescription);

      signaling.sendToPeer(signaling.remote, {
   id:ID_WEBRTC_DESC, desc: pc.localDescription});  
    } else if ('answer' == json.type) {
   
      await pc.setRemoteDescription(json);
      log("answer setremotedesc local desc=" + pc.localDescription);

    } else {
   
      log('Unsupported SDP type.');
    }

}


function getParamFromUrl(url, param)
{
   
  let vars = url.split("&");
  for (let i = 0; i < vars.length; i++)
  {
   
    let pair = vars[i].split("=");
    if (param == pair[0])
      return pair[1];
  }

  return "";
}