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

公開日:2022年05月13日

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

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

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)  {
    })