声网关闭(打开)摄像头,翻转摄像头,静音功能(vue)

视频通话 - 文档中心 - 声网Agora

 若想实现以下功能,请确保已经完成可加入房间,可正常通讯等流程!

  创建本地端&&远程端代码:

let rtc = {
  // For the local audio and video tracks.
  localAudioTrack: null,
  localVideoTrack: null,
  client: null,
};

/***
*举例为接听端代码
**/
async function agoraAnswer(options) {
  rtc.client = AgoraRTC.createClient({ mode: 'rtc', codec: 'vp8' });
  const uid = await rtc.client.join(
    options.appId,
    options.channelName,
    options.token,
    Number(options.uid)
  );

  rtc.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
  rtc.localVideoTrack = await AgoraRTC.createCameraVideoTrack();

  const localPlayerContainer = document.querySelector('.worktable-video-local');
  rtc.localVideoTrack.play(localPlayerContainer, {
    fit: 'contain',
  });
  online.value = true;
  loading.value = true;
  // 播放音频轨道
  // localAudioTrack.play()
  await rtc.client.publish([rtc.localAudioTrack, rtc.localVideoTrack]);

  rtc.client.on('user-published', async (user, mediaType) => {

    await rtc.client.subscribe(user, mediaType);
    loading.value = false;
     console.log('123+++++++接听H5published', user, mediaType);


    // 表示本次订阅的是视频。
    if (mediaType === 'video') {
      if(user._audio_added_){
            user.videoTrack.play(document.querySelector('.worktable-video-remote'), {
        fit: 'contain',
      });

      loading.value = false;

      //表示客户端接听了,需要开始创建websocket, 并发送开始录制消息
      emit('startRecord', options.uid);
      }
  else{
  }
    }

    // 表示本次订阅的是音频。
    if (mediaType === 'audio') {
      user.audioTrack.play();
    }
  });

  rtc.client.on('user-unpublished', (user, mediaType) => {
  console.log('+++++++++++接听H5--unpublished', user, mediaType);

    if (mediaType === 'video') {
      // onLeave('userLeave');
      // ElMessage({
      //   message: '客户挂断或离线',
      //   type: 'warning',
      // });
    }
  });
  rtc.client.on('network-quality', (stats) => {
    emit('netWorkQuality', stats.downlinkNetworkQuality);
  });
}


/***
 * 关闭摄像头
 * **/
const closeLook = function () {
  ifCloseLook.value = false;
  console.log('关闭摄像头---', ifCloseLook.value);
  rtc.localVideoTrack.setMuted(true);
  ifShowBackImg.value=true
};
/***
 * 打开摄像头
 * **/
const openLook = function () {
  ifCloseLook.value = true;
  console.log('dakai摄像头---', ifCloseLook.value);
  rtc.localVideoTrack.setMuted(false);
  ifShowBackImg.value=false

};

 核心代码:

1、关闭(打开)摄像头

rtc.localVideoTrack.setMuted(true);    //关闭摄像头
rtc.localVideoTrack.setMuted(false);    //打开摄像头

2、静音

rtc.localAudioTrack.setMuted(true);   //静音
rtc.localAudioTrack.setMuted(false);  //取消静音

3、翻转摄像头

此功能需要将之前发布的本地视频流停止发布,重新获取摄像头方向后发布流~

// 切换摄像头
const cameraBack = async function () {
 ifShowBackImg.value= false
  camera.value=true
  // 如果是前置--切换为后置
  if (rtc.localVideoTrack._config.facingMode == "user") {
    rtc.localVideoTrack.close();
    await rtc.client.unpublish(rtc.localVideoTrack);
    rtc.localVideoTrack = await AgoraRTC.createCameraVideoTrack({
      facingMode: "environment",
    });
  } else {
    rtc.localVideoTrack.close();
    await rtc.client.unpublish(rtc.localVideoTrack);
    //后置--切换为前置
    rtc.localVideoTrack = await AgoraRTC.createCameraVideoTrack({
      facingMode: "user",
    });
  }

  const localPlayerContainer = document.querySelector(".worktable-video-local");
  rtc.localVideoTrack.play(localPlayerContainer);

  await rtc.client.publish(rtc.localVideoTrack);
};

核心代码:

1⃣️将前置摄像头转为后置摄像头 

 2⃣️将后置转为前置

  ⚠️在创建本地视频流时,需设置摄像头前置or后置,则后续翻转时根据初始状态做判断~

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值