Uniapp는 오디오 및 비디오 통신을 실현합니다.
여전히 uniapp의 오디오 및 비디오 통신에 대해 걱정하십니까? 개발자의 요구를 충족하기 위해 anyRTC는 오디오 및 비디오 통신의 uniapp 버전을 특별히 개발했습니다.
anyRTC 실시간 통신에는 두 가지 모듈이 포함됩니다.
- 실시간 오디오 및 비디오 모듈-오디오 및 비디오 통신
- 라이브 방송실에서 실시간 메시징 모듈 시그널링 상호 작용, 공격 및 기타 통신
먼저 실시간 오디오 및 비디오 모듈을 이해하도록하겠습니다.
샘플 프로젝트 실행 프로세스 (이 기사에서는 원격 플러그인 사용)
-
uniapp 플러그인 마켓으로 이동
-
샘플 데모 다운로드
-
manifest.json파일을 열고 앱 기본 플러그인 구성 => 원격 플러그인을 선택하십시오.
-
커스텀베이스 만들기
-
성공적으로 포장 한 후 맞춤형베이스를 선택하십시오.
- 페이지 찾기 => index => index.nvue, appid 추가
오디오 및 비디오를 얻기위한 단계
비디오 렌더링 구성 요소
.nvue파일에 있어야 합니다.- 비디오
AR-CanvasView구성 요소 를 표시해야 할 때 사용 중이며 처음에 표시되지 않습니다. 그렇지 않으면 오류가 발생합니다. - 너비와 높이를 설정해야합니다.
<view>本地视频</view>
<view v-if>
<AR-CanvasView :ref="localvideo" style="height:100px;width:100px"></AR-CanvasView>
</view>
<view>远端视频</view>
<view v-if>
<AR-CanvasView :ref="remotevideo" style="height:100px;width:100px"></AR-CanvasView>
</view>
Node.js 관련 코드
1. 플러그인 소개 및 사용
단일 앱 기본 플러그인 사용 에 대한 지침을 참조하십시오 .
const RtcModule = uni.requireNativePlugin('AR-RtcModule');
2. 플러그인 초기화
페이지가 처음로드 될 때 초기화
- 콜백 초기화 (모니터 콜백), 그렇지 않으면 콜백이 수신되지 않습니다.
- 플러그인 초기화 (appid 입력), 그렇지 않으면 서비스를 사용할 수 없습니다.
// 页面初始加载(uniapp 生命周期)
async onReady() {
// 初始化回调
await RtcModule.setCallBack((res) => {
switch (res.engineEvent) {
case "onWarning":
console.log("警告", res.warningCode);
break;
case "onError":
console.log("错误", res.errorCode);
break;
case "onJoinChannelSuccess": (本地)
console.log("用户"+ res.uid + "加入成功");
break;
case "onLeaveChannel":（本地）
console.log("用户"+ res.uid + "离开频道");
break;
case "onUserJoined":
console.log("远端用户"+ res.uid + "加入频道");
break;
case "onUserOffline":
console.log("远端用户"+ res.uid + "离开频道");
break;
case "onFirstRemoteVideoDecoded":
console.log("完成远端用户"+ res.uid + "视频首帧解码");
break;
...
}
})
// 初始化插件
await RtcModule.create({
"appId": "**********"}, (res) => {
});
}
3. 사용자 역할 설정 (이 기사에서는 앵커가 사용됨)
플러그인은 두 가지 역할 모드를 제공합니다.
- 청중 (2) : 호스트는 볼 수 있지만 호스트는 자신을 볼 수 없습니다.
- 앵커 (1) : 모든 채널에서 자신을 볼 수 있습니다.
RtcModule.setClientRole({
"role": 1}, (ret) => {
});
4. 채널에 가입
1. joinChannel 메소드를 사용하여 채널에 참여하십시오.
- 토큰 : anyRTC에서 제공하는보다 안전한 인증 (개발 중에는 사용하지 말 것을 권장)
- channelId : 가입 할 채널의 이름 (사용자가 서로 시청하려면 동일한 채널에 가입해야 함)
- uid : 사용자 이름 (동일하지 않은 무작위 생성 권장)
RtcModule.joinChannel({
"token": "","channelId": "uniappRTC","uid": "666"}, (res) => {
})
2. 콜백 onJoinChannelSuccess지원 비디오 모니터링
AR-CanvasView 구성 요소를 사용 setupLocalVideo하여 로컬 비디오 렌더링
사용자 역할이 대상에있는 경우이 코드를 사용할 수 없습니다.
에서 onJoinChannelSuccess년의 코드를 가입
// 启用视频模块
RtcModule.enableVideo((res) => {
});
// 初始化本地视图
this.$refs.localvideo.setupLocalVideo({
"renderMode": 1,
"channelId": "uniappRTC",
"uid": "666",
"mirrorMode": 0
}, (res) => {
});
// 本地预览
RtcModule.startPreview((res) => {
});
5. 원격 사용자는 콜백 모니터링을 통해 처리됩니다.
원격 사용자가 채널에 참여
콜백 모니터링을 통한 모니터링 onUserJoined
AR-CanvasView 원격 비디오 컨테이너 활성화
원격 비디오의 첫 번째 프레임 디코딩 완료
onFirstRemoteVideoDecoded원위 영상 렌더링 모니터링 콜백 모니터링
에서 onFirstRemoteVideoDecoded년의 코드를 가입
// 初始化远端视图
this.$refs.remotevideo.setupRemoteVideo({
"renderMode": 1,
"channelId": "uniappRTC",
"uid": res.uid,
"mirrorMode": 0
}, (res) => {
})
// 远端预览
RtcModule.startPreview((res) => {
});
원격 사용자가 채널을 떠납니다.
콜백을 모니터링하여 onUserOffline
AR-CanvasView 원격 비디오 컨테이너 닫기
6. 채널 나가기 (전화 끊기)
- 채널 나가기
RtcModule.leaveChannel((res) => {
})
- 플러그인 인스턴스 삭제
페이지의 작업 표시는 인스턴스를 파괴 할 수 없습니다.
RtcModule.destroyRtc((res) => {
})
결과 보여줘
호스트 터미널에 들어갈 때 같은 방 번호를 입력하기 만하면 1 인 또는 다인 화상 통화를 할 수 있습니다.
그림이 보여 주듯이
방문자는 탐색 만 할 수 있으며 메인 화면에는 표시되지 않습니다.
그림이 보여 주듯이
통합 도움말
위의 프로세스 작업을 수행하기 위해 예제 프로젝트를 수행 할 수 있습니다. 통합 과정에서 도움이 필요 하면 플러그인 마켓 의 연락처 정보를 통해 회사의 고객 서비스에 문의 할 수 있습니다.