WebRTCでスマホのカメラ切り替え(前面-背面)

agora.io WebSDKを利用したスマホのカメラ切り替えの説明です。
サンプルコードはこちらにあります。
基本的に映像Trackを切り替える事で実現可能ですが、一部Android(HUAWEIやSamsung）で正常に動作しない場合があるので2種類記載します。

利用するAPI一覧

• AgoraRTC.createStream()
• Stream.replaceTrack()
  基本的にはこの２つで実現可能です。

初期のカメラ指定

index.html

var facingMode = "user";
//中略
rtc.localStream = AgoraRTC.createStream({
  streamID: rtc.params.uid,
  audio: true,
  video: true,
  screen: false,
  microphoneId: option.microphoneId,
  facingMode: facingMode
})

"facingMode"で前面カメラか背面カメラを選択できます。"user"が前面カメラ、"environment"が背面カメラになります。

手法１

Stream.replaceTrack()で簡単に切り替える方法です。

index.html

var facingMode = "user";
if(facingMode == "user"){
  facingMode = "environment";
}else{
  facingMode = "user";
}
var localStream2 = AgoraRTC.createStream({
  video: true,
  audio: false,
  facingMode: facingMode
});

localStream2.init(function(){
  var newVideoTrack = localStream2.getVideoTrack();
  rtc.localStream.replaceTrack(newVideoTrack);
  rtc.localStream.stop();
  rtc.localStream.play("local_stream");
});

新規で映像ストリームを作成し、そのストリームに差し替える手法になります。
冒頭で記載の通り、この方法では一部正常に動作しません。理由は同時に前面・背面のカメラをオープンさせることができない為です。その代替手法は以下になります。

手法２

一度カメラを閉じて、再度映像を取得してパブリッシュします。(サーバーとの接続は途切れないので、チャネルからの離脱にはなりません）

index.html

var facingMode = "user";
if(facingMode == "user"){
  facingMode = "environment";
}else{
  facingMode = "user";
}
rtc.localStream.stop();
rtc.localStream.close();
unpublish(rtc);
var params = serializeformData();

rtc.localStream = AgoraRTC.createStream({
  streamID: rtc.params.uid,
  audio: true,
  video: true,
  screen: false,
  microphoneId: params.microphoneId,
  facingMode: facingMode
})

rtc.localStream.init(function () {
  rtc.localStream.play("local_stream")
  publish(rtc);
}, function (err)  {
})

こちらの手法ですべてのスマホに対応ができます。

2021/11/11追記

WebSDK4系でのカメラ切り替えはサンプルは以下になります。

var facingMode = "user";
async function cameraSwitch() {
  if(facingMode == "user"){
    facingMode = "environment";
  }else{
    facingMode = "user";
  }

  await client.unpublish(Object.values(localTracks));
  await localTracks.videoTrack.stop();
  await localTracks.videoTrack.close();
  
  [ localTracks.videoTrack ] = await Promise.all([
    AgoraRTC.createCameraVideoTrack({facingMode: facingMode})
  ]);

  // play local video track
  localTracks.videoTrack.play("local-player");
 
  // publish local tracks to channel
  await client.publish(Object.values(localTracks));
  console.log("publish success");
}

最後に

agora.ioに関するお問い合わせはこちらから