Flutter WebRTC with D-ID: Audio Works but Video Stream Not Displaying in App #1923
Description
Hello Support Team,
I am a Flutter developer using the flutter_webrtc package to implement D-ID in my Flutter project. I was able to successfully connect D-ID with WebRTC, and when I send a prompt, the audio plays correctly.
However, I am facing an issue with the video stream functionality, the video is not showing in the app.
My questions are:
1)Using flutter_webrtc, is it possible to successfully display the video in the app?
2)Could you please provide an example of how to properly show the video stream?
Thank you for your support.
Future _handleWebRTC(String sdpOffer, List<Map<String, dynamic>> iceServers) async {
final configuration = {'iceServers': iceServers};
final Map<String, dynamic> constraints = {
'mandatory': {
'OfferToReceiveAudio': true,
'OfferToReceiveVideo': true,
},
'optional': [
{'DtlsSrtpKeyAgreement': true},
],
};
_peerConnection = await createPeerConnection(configuration, constraints);
_peerConnection!.onIceConnectionState = (RTCIceConnectionState state) {
print('ICE Connection State: $state');
};
_peerConnection!.onConnectionState = (RTCPeerConnectionState state) {
print('Peer Connection State: $state');
};
_peerConnection!.onTrack = (RTCTrackEvent event) {
print("✅ Track received: ${event.track.kind}, ID: ${event.track.id}");
if (event.track.kind == 'video') {
print("🎉 VIDEO TRACK RECEIVED! ID=${event.track.id}, Enabled=${event.track.enabled}, Muted=${event.track.muted}");
setState(() {
isStreaming = true;
});
}
_remoteStream?.addTrack(event.track);
};
_peerConnection!.onIceCandidate = (RTCIceCandidate candidate) {
_handleIceCandidate(candidate);
};
try {
await _peerConnection!.setRemoteDescription(
RTCSessionDescription(sdpOffer, 'offer'),
);
print('✅ Remote description (offer) set successfully.');
final answer = await _peerConnection!.createAnswer(constraints);
print('✅ SDP Answer created successfully.');
// This block modifies the SDP to add the missing parameter
if (answer.sdp != null) {
String originalSdp = answer.sdp!;
String modifiedSdp = originalSdp.replaceAll(
'a=fmtp:96 profile-level-id=42e01f;level-asymmetry-allowed=1',
'a=fmtp:96 profile-level-id=42e01f;level-asymmetry-allowed=1;packetization-mode=1'
);
print('🔧 SDP has been modified to include packetization-mode=1.');
final modifiedAnswer = RTCSessionDescription(modifiedSdp, answer.type);
await _peerConnection!.setLocalDescription(modifiedAnswer);
} else {
// Fallback if SDP is null for some reason
await _peerConnection!.setLocalDescription(answer);
}
print('✅ Local description (answer) set successfully.');
await _webrtcConnectionApiCall(ref: ref);
} catch (e) {
print("❌ Error in _handleWebRTC: $e");
}
}