- 1단계: 공식 데모를 다운로드하고 주소: https://github.com/undefineers/WXMiniByUniapp-TRTC 그런 다음 이를 로컬 HbuilderX로 가져와서 미니 프로그램에서 실행합니다. 작업이 성공하면 다음 단계로 진행합니다. 다음 단계.
- 2단계: 데모 실행에 필요한 두 가지 핵심 정보인 SDKAppID와 SecretKey를 공식 홈페이지 https://console.cloud.tencent.com/trtc/quickstart 에서 신청한 후 ./ 소스 코드와 함께 제공되는 debug/GenerateTestUserSig.js 파일입니다.
- 3단계: 미니 프로그램 카테고리 및 푸시풀 스트림 라벨 권한을 활성화합니다. 이는 매우 중요하며 위챗 공개 플랫폼에서 구성해야 합니다. 나중에 동영상을 실행하지 않으면 연결 끊김 등의 문제가 발생할 수 있으므로 피하세요. 잊지 마세요.
정책 및 규정 준수상의 이유로 WeChat은 아직 모든 미니 프로그램에서 실시간 오디오 및 비디오 기능(예: <live-pusher> 및 <live-player> 태그)에 대한 지원을 출시하지 않았습니다.
미니 프로그램 푸시풀 흐름 태그는 개인용 미니 프로그램을 지원하지 않고 기업용 미니 프로그램만 지원합니다.
미니 프로그램 푸시풀 흐름 태그 사용 권한은 현재 제한된 카테고리 에만 제공됩니다 .
카테고리 요구 사항을 충족하는 미니 프로그램의 경우 다음 그림과 같이 [ WeChat 공개 플랫폼 ] > [개발] > [인터페이스 설정] 에서 구성 요소 권한을 직접 활성화 해야 합니다 .
- 4단계: 데모, 디버그 폴더, 구성 요소 폴더를 자신의 프로젝트로 추출하고 1대1 또는 다자간 비디오, 라이브 방송 등 통화 유형에 따라 해당 폴더에 넣습니다.
여기에서는 1V1 세션을 구현하려는 경우 룸 파일을 사용합니다.
- 5단계: 매개변수 전송으로 이동 여러 환경 테스트가 포함된 경우 SDKAppID 및 SecretKey 두 가지 핵심 정보와 같은 공개 매개변수를 추출할 수 있습니다. 환경 전환 시 생성테스트사용자시그(GenerateTestUserSig)에서 키와 서명을 전환하는 것을 잊지 마세요.
1.传参：这里是我主观固定不可修改，如果是别的通话模式按需修改即可 ``` roomID: '',//房间号 template: '1v1',//通话模式固定不可修改 userSig: '',//签名，从后台拿到 userID: '',//用户id，在这个小程序中统一使用openId debugMode: false,//是否开始调试模式，无需更改 cloudenv: 'PRO',//无需更改 ``` 2.跳转 ``` const url = `../room/room?roomID=${this.roomID}&template=${this.template}&userSig=${this.userSig}&debugMode=${this.debugMode}&cloudenv=${this.cloudenv}&userID=${this.userID}`; wx.navigateTo({ url: url }); ```
- 6단계: 위의 작업을 완료한 후 기본적으로 로컬 비디오를 조정할 수 있습니다.디버깅을 위해 두 대의 휴대폰을 사용하여 애플릿을 미리 본 다음 방 번호를 입력하고 방에 입장할 수 있습니다. 성공했다면 축하드립니다!
- 더 깊이 들어가고 싶다면 먼저 공식 웹사이트에 접속하는 것이 좋습니다. https://cloud.tencent.com/document/product/647/17018 사용할 수 있는 대부분의 기능이 있습니다.
저는 이 피트를 기록하기 위해 채우기 기능을 사용했습니다.
room.vue에서 방 입장 성공 여부를 모니터링하고 이벤트를 발생시키는 채우기 기능을 추가했는데, 목적은 컴퓨터 사용자가 영상에 접근할 때 미니 프로그램의 카메라가 너무 가까워서 전체 영상을 보여주지 못한다는 점을 깨닫는 것입니다. 그림 채우기를 추가한 후 해당 적응형 변환이 되지만 효과에 영향을 주지 않는 검은색 테두리가 나타납니다.
실제 효과: 기대 효과:
this.trtcComponent.on(TRTC_EVENT.LOCAL_JOIN, event => {
console.log('* room LOCAL_JOIN', event); // 进房成功，触发该事件后可以对本地视频和音频进行设置
if (this.options.localVideo === true || this.options.template === '1v1') {
this.trtcComponent.publishLocalVideo();
}
if (this.options.localAudio === true || this.options.template === '1v1') {
this.trtcComponent.publishLocalAudio();
}
const data = event.data;
this.trtcComponent
.setViewFillMode({
userID: data.userID,
streamType: data.streamType,
fillMode: 'contain',
})
.then(event => {
// 设置成功
console.log('* 填充1111111111111111', event, this.trtcComponent.getRemoteUserList()); // 订阅音频
});
});여기 구덩이가 있어요! ! ! 사용자가 영상을 수신할 때 미니프로그램을 일시정지, 즉 미니프로그램을 닫았다가 다시 열면 화면이 다시 채워지지 않고 원래 상태로 돌아간다. 몇 가지 연구 끝에 다음을 발견했습니다.
Components\trtc-room\trtc-room.vue의 코드에는 다음과 같은 위치가 있습니다.
case 5000:
console.log('小程序被挂起: ', code); // 终端 sdk 建议执行退房操作，唤起时重新进房， 临时解决方案，待小程序SDK完全实现自动重新推流后可以去掉
this.exitRoom();
즉, SDK가 아직 완벽하지 않기 때문에 애플릿이 정지되면 제품과 함께 이 솔루션의 타당성을 논의한 후 최종적으로 체크아웃 작업을 수행하기로 결정합니다.
/**
* 退房，停止推流和拉流，并重置数据
* @returns {Promise}
*/
exitRoom: function () {
return new Promise((resolve, reject) => {
console.log(TAG_NAME, 'exitRoom');
this.pusher.reset();
this.status.isPush = false;
const result = this.userController.reset();
this.setData(
{
pusher: this.pusher,
userList: result.userList,
streamList: result.streamList,
},
() => {
// 在销毁页面时调用，不会走到这里
resolve({
userList: this.userList,
streamList: this.streamList,
});
console.log(TAG_NAME, 'exitRoom success', this.pusher, this.streamList, this.userList);
},
);
});
},부족한 점이 있다면 조언 부탁드립니다!