JavaScript 스크립트를 통해 영상 통화를 쉽게 구현

화상채팅방

학습을 통해 간단한 예제도 직접 만들어봤습니다. 수십 줄의 JavaScript 스크립트로 쉽게 화상통화를 구현할 수 있습니다. IE, Firefox이기 때문에 특정 브라우저를 다운로드할 필요가 없습니다. , Windows 플랫폼의 Chrome 및 기타 주요 브라우저는 모두 완벽하게 통과하고 실행됩니다. 아래에서 결과를 공유하겠습니다. 레이아웃 코드는 게시하지 않고 JavaScript 스크립트만 게시합니다.

1. 웹용 AnyChat SDK 라이브러리를 로드합니다.

먼저 웹용 AnyChat SDK 라이브러리를 로드해야 합니다

[html]

2. 변수 정의

전역 변수 정의

[javascript]

var mDefaultServerAddr = "demo.anychat.cn" // 기본 서버 주소

var mDefaultServerPort = 8906 ;                                                       오디오 및 비디오)

3. 웹페이지가 로드된 후 결정 플러그인이 설치되어 있는지, 플러그가 -in 최신

[javascript]

// 페이지 로딩 완료 초기화

function LogicInit() { // 초기화

var NEED_ANYCHAT_APILEVEL = " 0";

var errorcode = BRAC_InitSDK(NEED_ANYCHAT_APILEVEL);

if (errorcode == GV_ERR_SUCCESS) // 플러그인 초기화 성공

document.getElementById("login_div" ).style.display = "block"; // 로그인 인터페이스 표시

else // 플러그인이 설치되지 않았거나 플러그인 버전이 너무 오래된 경우 플러그인 다운로드 인터페이스가 표시됩니다.

document.getElementById("prompt_div").style.display = "block"; // 프롬프트 레이어 표시

[javascript]

// 시스템에 로그인

function LoginToHall() {

BRAC_Connect(mDefaultServerAddr, mDefaultServerPort) // 서버에 연결

BRAC_Login(document.getElementById ("username").value, "", 0); // 시스템에 로그인합니다. 비밀번호가 비어 있으면 로그인할 수도 있습니다.

}

로그인 함수를 호출한 후 연결 서버 기능이 먼저 실행됩니다.

[javascript]

// 클라이언트가 서버에 연결되고, bSuccess는 연결 성공 여부를 나타내고, errorcode는 error code

function OnAnyChatConnect(bSuccess, errorcode) {

if (errorcode == 0) { } // 서버에 성공적으로 연결

else Alert("연결에 실패했습니다. to server"); //연결 실패하면 시스템은 로그인 시스템 기능을 실행하지 않습니다.

}

서버에 성공적으로 연결한 후 로그인 시스템 콜백 function

[javascript

// 클라이언트가 시스템에 로그인합니다. dwUserId는 자체 사용자 ID 번호를 나타내며, errorcode는 로그인 결과를 나타냅니다. 0 성공, 그렇지 않으면 오류 코드입니다. 참조 오류 코드 정의

function OnAnyChatLoginSystem(dwUserId, errorcode ) {

if (errorcode == 0) { // 로그인에 성공하면 로비 인터페이스를 표시하고 로그인 인터페이스를 숨깁니다. 실패하면 아무것도 하지 않고 상태를 유지합니다.

mSelfUserId = dwUserId;

document.getElementById("login_div").style.display = "none"; 인터페이스

document.getElementById("hall_div").style.display = "block"; //로비 인터페이스 표시

}

}

5. 방 입장 기능 호출

로그인에 성공하면 로비에 입력란과 방 입장 버튼이 표시됩니다

함수를 호출하는 방 입장 버튼

[javascript ]

// 방 입장

function EnterRoom(){ // 사용자 정의 방 입장

BRAC_EnterRoom(parseInt(document.getElementById("customroomid").value), "", 0) //방에 입장

}

들어가기 방 트리거 콜백 함수

[javascript]

// 클라이언트가 방에 입장하고, dwRoomId는 들어간 방의 ID 번호를 나타내며, errorcode는 방 입장 여부를 나타냅니다. 0은 성공적인 입장을 의미합니다. , 그렇지 않으면 오류 코드입니다.

function OnAnyChatEnterRoom(dwRoomId, errorcode) {

if (errorcode == 0) { // 방에 성공적으로 입장하면 방 인터페이스가 표시되고 로비 인터페이스는 숨겨집니다. 룸 입장에 실패하면 아무런 조치도 취하지 않습니다.

document.getElementById("hall_div").style.display = "none" //로비 인터페이스 숨기기

document.getElementById("room_div").style.display = "block"; // 회의실 인터페이스 표시                                                                          표시 위치

BRAC_SetVideoPos(mSelfUserId, document.getElementById("AnyChatLocalVideoDiv"), "ANY CHAT_VIDEO_LOCAL') ;

// 원격 비디오 표시 위치 설정(사용자와 관련 없음, 위치만 차지함)                                                                 🎜>

                   BRAC_SetVideoPos(0, document.getElementById("AnyChatRemoteVideoDiv"), "ANYCHAT_VIDEO_REMOTE"); 🎜>

Enter 방에 입장하면 온라인 사용자 콜백 기능이 실행됩니다.

[javascript]

// 현재 방의 온라인 사용자 정보를 받은 후 방에 입장한 후 한 번 트리거됩니다. dwUserCount는 자신을 포함한 온라인 사용자 수를 나타내며, dwRoomId는 방 ID를 나타냅니다.

function OnAnyChatRoomOnlineUser(dwUserCount, dwRoomId) {

// 이전에 요청한 사용자 오디오 및 비디오 데이터를 닫아야 합니다. -1) { // mTargetUserId는 마지막 비디오 세션의 사용자 ID를 맞춤 변수로 나타냅니다. BRAC_UserCameraControl(mTargetUserId, 0) // 원격 비디오 닫기

BRAC_UserSpeakControl( mTargetUserId, 0); // 원격 음성 끄기

mTargetUserId = -1;

}

if (dwUserCount > 1) // 온라인 사용자가 있는지 확인 이 기능에서는 yes 그런 다음 원격 비디오 중 하나를 엽니다.

SetTheVideo();

}

사용자가 방에서 나갈 때 원격 사용자이며 해당 작업을 수행합니다

[javascript]

// 사용자가 방에 입장(나가기)하고, dwUserId는 사용자 ID 번호를 나타내고, bEnterRoom은 사용자가 입장했는지 여부(1)를 나타냅니다. ) 또는 방에서 나가기(0)

function OnAnyChatUserAtRoom(dwUserId, bEnterRoom) {

if (bEnterRoom == 1)

if (mTargetUserId == -1) SetTheVideo ();

else {

if (mTargetUserId == dwUserId)

mTargetUserId = -1

}

메시지 보내기 호출 기능

[javascript]

// 메시지 보내기

function SendMessage() {

BRAC_SendTextMessage(0, 0, document.getElementById(" SendMsg").innerHTML); //메시지 보내기 함수 호출 Msg: 메시지 내용

document.getElementById("ReceiveMsg").innerHTML += "Me :" + document.getElementById("SendMsg").innerHTML + "
";

document.getElementById("SendMsg").innerHTML = "";

}

수신 온라인 사용자가 메시지를 보내면

[javascript]

// 함수가 문자 메시지를 받습니다

function OnAnyChatTextMessage(dwFromUserId, dwToUserId, bSecret, lpMsgBuf, dwLen) {

document.getElementById("ReceiveMsg").innerHTML += BRAC_GetUserName(dwFromUserId) + "：" + lpMsgBuf + "
"; // 받은 메시지는 수신창에 표시됩니다.

}

사용자 정의 기능

[javascript]

//원격 비디오 사용자를 요청하는 사용자 정의 함수

function SetTheVideo() {

var useridlist = BRAC_GetOnlineUser() // 모든 온라인 사용자 ID 가져오기

BRAC_UserCameraControl (useridlist[0], 1); // 상대방 영상 요청

BRAC_UserSpeakControl(useridlist[0], 1) // 상대방 음성 요청

BRAC_SetVideoPos(useridlist[0 ], document.getElementById("AnyChatRemoteVideoDiv"), "ANYCHAT_VIDEO_REMOTE"); // 원격 영상 표시 위치 설정

mTargetUserId = useridlist[0]

6. 방에서 나가기

방 호출 기능 종료

[javascript]

function OutOfRoom(){                                                    >           🎜>}

7. 시스템 종료

시스템 호출 기능 종료

[javascript]

function OutOfSystem(){  

BRAC_Logout ();

}

이제 간단영상채팅방이 완성되었습니다...

간단스크린샷 :

로그인 인터페이스:

로비 인터페이스:

룸 인터페이스: