Android 基于WebRTC的视频通话App如何实现前后摄像头切换

你当前的方案基于WebView加载PeerJS实现通话，无需走「移除原有流-重新协商」的重流程，直接替换媒体轨道即可实现无感知切换，改动量很小：

1. 修改JavaScript端代码 #

新增全局变量 #

// 新增：记录当前使用的摄像头方向，默认使用后置
let useFrontCamera = false
// 新增：保存当前活跃的通话实例，用于替换传输轨道
let activeCall = null

改造原有代码存储通话实例 #

• 修改listen函数，收到来电后保存通话实例：

peer.on('call', (call) => {
    activeCall = call // 新增这行
    // 原有逻辑不变
    navigator.getUserMedia({...})
})

• 修改startCall函数，发起通话后保存通话实例：

const call = peer.call(otherUserId, stream)
activeCall = call // 新增这行
// 原有逻辑不变
call.on('stream', (remoteStream) => {...})

新增摄像头切换函数 #

function switchCamera() {
    if (!localStream || !activeCall) return

    // 停止当前视频轨道占用
    localStream.getVideoTracks().forEach(track => track.stop())
    // 翻转摄像头状态
    useFrontCamera = !useFrontCamera

    // 枚举设备找到目标摄像头
    navigator.mediaDevices.enumerateDevices()
    .then(devices => {
        const videoDevices = devices.filter(d => d.kind === 'videoinput')
        const targetDevice = videoDevices.find(d => 
            useFrontCamera ? d.label.toLowerCase().includes('front') : d.label.toLowerCase().includes('back')
        ) || videoDevices[0]

        // 请求目标摄像头的流
        return navigator.mediaDevices.getUserMedia({
            audio: true,
            video: { deviceId: targetDevice.deviceId }
        })
    })
    .then(newStream => {
        // 替换本地流的视频轨道
        const newVideoTrack = newStream.getVideoTracks()[0]
        const oldVideoTrack = localStream.getVideoTracks()[0]
        localStream.removeTrack(oldVideoTrack)
        localStream.addTrack(newVideoTrack)

        // 更新本地预览
        localVideo.srcObject = localStream

        // 替换发送给对端的传输轨道，无需重新协商
        const videoSender = activeCall.peerConnection.getSenders().find(s => s.track?.kind === 'video')
        videoSender?.replaceTrack(newVideoTrack)
    })
    .catch(err => console.error('切换摄像头失败：', err))
}

2. 修改Kotlin端CallActivity代码 #

首先在activity_video_call.xml布局中新增切换摄像头的按钮，设置id为switchCameraBtn，然后在onCreate方法中添加按钮点击逻辑：

switchCameraBtn.setOnClickListener {
    callJavascriptFunction("javascript:switchCamera()")
}

内容的提问来源于stack exchange，提问作者Margs Global