CodePen Embed - webRTC rtcLocalStreamAppend

<form class="login">
  <input type="text" id="userNick" placeholder="닉네임을 입력하세요!" required />
  <button type="submit">등록</button>
</form>
<div class="cam">

  <div class="my_cam"></div>
  <div class="remote_cam"></div>

  <div class="cam-footer">
    <p class="roomtitle"></p>
    <ul class="cam-btn">
      <li class="mic btn_on" onclick="mic_on_off(this)">
        <img src="https://www.vchatcloud.com/chat-demo/iframe/iframe_rtc_2/img/webRTC/on_mic.png" alt="마이크 재생">
      </li>
      <li class="exit btn_on">
        <img src="https://www.vchatcloud.com/chat-demo/iframe/iframe_rtc_2/img/webRTC/exit.png" alt="화상채팅 종료">
      </li>
      <li class="cam btn_on" onclick="cam_on_off(this)">
        <img src="https://www.vchatcloud.com/chat-demo/iframe/iframe_rtc_2/img/webRTC/on_cam.png" alt="카메라 재생">
      </li>
    </ul>
  </div>
</div>

.login {
  margin-top: 100px;
  text-align: center;
}
.login input,
.login button {
  padding: 10px;
}

.cam {
  position: relative;
  text-align: center;
  margin: 0 auto;
}

.cam_wrap {
  min-width: 880px;
}

.remote_cam_wrap {
  display: flex;
  flex-direction: column;
  overflow: scroll;
  height: 360px;
}

.my_cam {
  position: relative;
  background: #999;
  width: 640px;
  height: 360px;
  margin: 0 auto;
  align-content: center;
}
.my_cam video,
.remote_cam video {
  width: 100%;
  height: 100%;
}
.my_cam p,
.remote_cam p {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
}
.my_cam .camera_off {
  margin: 0 auto;
  margin-top: 130px;
}
.remote_cam .camera_off {
  width: 45px;
  height: 45px;
  margin: 0 auto;
  margin-top: 45px;
}
.cam-footer {
  position: absolute;
  width: 100%;
  bottom: 5px;
}

ul.cam-btn {
  display: flex;
  justify-content: center;
}
.btn_on {
  margin: 5px;
  border: 2px solid #dedede;
  border-radius: 25px;
  background: white;
}
.btn_off {
  margin: 5px;
  border: 2px solid #dedede;
  border-radius: 25px;
  background: red;
}

// 채널에 접속하기 위해서 사용자의 userNick, userKey와 CMS에서 발급받은 channelKey가 필요합니다.
var channelKey = "YUcxwPRjTX-oVdUQqfLEE-20231212121518"; // CMS에서 발급받은 키 값, 발급 받은 키 값을 입력해보세요!

function videoInit() {
  // 로컬 접속 시
  channel.on("rtcLocalStreamAppend", function (event) {
    myVideo = document.createElement("video");
    let stream = event.target;
    myVideo.srcObject = stream;
    myVideo.setAttribute("autoplay", true);
    myCam.append(myVideo);
    channel.setRTCLocalMedia(myVideo);
  });
}

// 공통 코드 =====================================
const vChatCloud = new VChatCloud();

let channel, // joinRoom() 내부에서 채널 객체를 저장할 곳
  userNick = "hello", // 접속자의 닉네임, 사용자에게 입력받은 값을 사용해도 된다.
  userKey; // 접속자 고유 키



// rtc
let myCam, remoteCamList;

window.addEventListener("load", function () {
  // 접속자의 미디어 소스를 보여줄 위치
  $('.cam').hide(); // 캠 화면 숨김
  myCam = $(".my_cam");
  myCam.attr("name", "my_cam");
  remoteCamList = $(".remote_cam_wrap");
  $('.login').submit(function (e) {
    e.preventDefault();
    userNick = $('.login input').val(); // 사용자가 입력한 닉네임 설정
    $('.login').hide(); // 로그인 폼 숨김
    $('.cam').show(); // 캠 화면 출력
    joinRoom(
      channelKey, // CMS에서 발급받은 키 값
      // 사용자의 고유 키 값 생성
      "xxxxxxxx".replace(/[xy]/g, function (a, b) {
        return (
          (b = Math.random() * 16), (a == "y" ? (b & 3) | 8 : b | 0).toString(16)
        );
      }),
      userNick, // 유저 닉네임
      // 채널 생성 후 실행할 콜백 함수
      function (err, history) {
        if (err) {
          openError(err.code, function () {
            vChatCloud.disconnect();
          });
        } else {
          videoInit();
        }
      }
    );
  });
  $(".exit").click(function () {
    exit();
    $('.login').show(); // 로그인 폼 숨김
    $('.cam').hide(); // 캠 화면 출력

  });
});

function joinRoom(roomId, clientKey, nickName, callback) {
  // vchatcloud 객체
  channel = vChatCloud.joinChannel(
    {
      roomId: roomId,
      clientKey: clientKey,
      nickName: nickName
    },
    function (error, history) {
      $(
        "div.entery, div.chatout, div.notice, div.whisper, div.content"
      ).remove();
      if (error) {
        if (callback) return callback(error, null);
        return error;
      }
      if (callback) callback(null, history);
      // 채팅영역에 글쓰기가 활성화될시 활성화
      if (typeof write == "function")
        write(
          "실시간 채팅에 오신 것을 환영합니다. 개인정보를 보호하고 커뮤니티 가이드를 준수하는 것을 잊지 마세요!",
          "notice"
        );
    }
  );
}


function getRoomInfo() {
  const api_url = "https://vchatcloud.com/api/openapi/getChatRoomInfo";
  let param = {
    room_id: channelKey
  };
  $.post(
    api_url,
    param,
    function (data) {
      if (data.result_cd == 1) {
        console.log(data);
        // $("#roomNm").append(data.param.room_nm);
      } else {
        console.log("조회 실패");
        oastPopup("조회 실패");
      }
    },
    "json"
  );
}

function openError(code, callback) {
  let p = $("div.errorpopup").hide();
  if (errMsg[code] == undefined) {
    $("p:nth-child(2)", p).text(code);
  } else {
    $("p:nth-child(2)", p).text(errMsg[code].kor);
  }
  $("a", p)
    .off()
    .click(function () {
      p.hide();
      if (typeof callback == "function") {
        callback();
      }
    });
  p.show();
}

// 마이크 온/오프
function mic_on_off(item) {
  if (channel) {
    var chk = $(item).attr("class");
    var img = $(item).children("img")[0];
    var cam_mic = $("div[name=my_cam]").children("img")[0];
    if (chk == "mic btn_on") {
      // 마이크 끄기
      channel.toggleRTCAudioControl(false);
      $(item).attr("class", "mic btn_off");
      $(img).attr(
        "src",
        "https://www.vchatcloud.com/chat-demo/iframe/iframe_rtc_1/img/webRTC/off_mic.png"
      );
      $(cam_mic).show();
    } else {
      // 마이크 켜기
      channel.toggleRTCAudioControl(true);
      $(item).attr("class", "mic btn_on");
      $(img).attr(
        "src",
        "https://www.vchatcloud.com/chat-demo/iframe/iframe_rtc_1/img/webRTC/on_mic.png"
      );
      $(cam_mic).hide();
    }
  } else {
    // 로그인이 필요함
  }
}

// 카메라 온/오프
function cam_on_off(item) {
  if (channel) {
    var chk = $(item).attr("class");
    var img = $(item).children("img")[0];
    var video = $("div[name=my_cam]").children("div.camvideo")[0];

    if (chk == "cam btn_on") {
      // 카메라 끄기
      channel.toggleRTCVideoControl(false);
      $(item).attr("class", "cam btn_off");
      $(img).attr(
        "src",
        "https://www.vchatcloud.com/chat-demo/iframe/iframe_rtc_1/img/webRTC/off_cam.png"
      );
    } else {
      // 카메라 끄기
      channel.toggleRTCVideoControl(true);
      $(item).attr("class", "cam btn_on");
      $(img).attr(
        "src",
        "https://www.vchatcloud.com/chat-demo/iframe/iframe_rtc_1/img/webRTC/on_cam.png"
      );
      // 카메라 켜짐
    }
  } else {
    // 미 로그인 상태
  }
}

function exit() {
  if (channel) {
    var exit_chk = confirm("종료 하시겠습니까?");
    if (!exit_chk) return;
    $(".cam-footer .cam-btn .mic").off("click.rtc");
    $(".cam-footer .cam-btn .cam").off("click.rtc");
    vChatCloud.disconnect();
    channel = undefined;
  } else {
    // 로그인 되지 않았음!
  }
}

Run Pen

This Pen is owned by e7works on CodePen.

See more by @e7works on CodePen

External CSS

External JavaScript