RTCMulticonnection initiator no camera

问题:

I need some help please if the initiator of the room has no camera,I want the joiner that has both audio and camera to be used. but the problem is that I set to false to video mediacontstraints. now the joiner will only have the audio the camera is gone what I want is audio and video for the joiner. @Muaz Khan - RTCMultiConnection.js

var initiator = new RTCMultiConnection();
        initiator.socketURL = 'url here';


        initiator.session = {
            audio: true,
            video:false,

        };

       initiator.mediaConstraints = {
            audio: true,
            video: false
        };

        initiator.sdpConstraints = {
            OfferToReceiveAudio: true,
            OfferToReceiveVideo: true
        };
        initiator.iceServers = [];
        initiator.iceServers.push({
        urls: "urls"
    });
    initiator.iceServers.push({
        urls: "urls",
        username: "username",
        credential: "credential"
    });


    initiator.audiosContainer = document.getElementById('audios-container');

    initiator.onstream = function(event) {

        var width = parseInt(initiator.audiosContainer.clientWidth / 4) - 20;
        console.log("the dispatcher width is",width);
        var mediaElement = getHTMLMediaElement(event.mediaElement, {
            title: event.userid,
            buttons: ['full-screen'],
            width: width,
            showOnMouseEnter: false
        });

        initiator.audiosContainer.appendChild(mediaElement);

        setTimeout(function() {
            mediaElement.media.play();
        }, 5000);

        mediaElement.id = event.streamid;
    };

    initiator.onstreamended = function(event) {
        var mediaElement = document.getElementById(event.streamid);
        if (mediaElement) {
            mediaElement.parentNode.removeChild(mediaElement);
        }
    };


    initiator.openOrJoin('channel-id', function(isRoomExist, roomid) {
        if (!isRoomExist) {

        }
    });




    // for participant

     var connection = new RTCMultiConnection();
        connection.socketURL = 'url here';

        connection.session = {
            audio: true,
            video: true
        };

        connection.mediaConstraints = {
            audio: true,
            video: true
        };

    connection.sdpConstraints.mandatory = {
        OfferToReceiveAudio: true,
        OfferToReceiveVideo: true
    };
    connection.iceServers = [];
    connection.iceServers.push({
        urls: "urls"
    });
    connection.iceServers.push({
        urls: "urls",
        username: "username",
        credential: "password"
    });

    connection.audiosContainer = document.getElementById('audios-container');
    connection.onstream = function(event) {
        var width = parseInt(connection.audiosContainer.clientWidth / 2) - 20;
        console.log("the responder width is",width);
        var mediaElement = getHTMLMediaElement(event.mediaElement, {
            title: event.userid,
            buttons: ['full-screen'],
            width: width,
            showOnMouseEnter: false
        });

        connection.audiosContainer.appendChild(mediaElement);

        setTimeout(function() {
            mediaElement.media.play();
        }, 5000);

        mediaElement.id = event.streamid;
    };

    connection.onstreamended = function(event) {
        var mediaElement = document.getElementById(event.streamid);
        if (mediaElement) {
            mediaElement.parentNode.removeChild(mediaElement);
        }
    };

        connection.openOrJoin('channel-id', function(isRoomExist, roomid) {
            if (!isRoomExist) {

            }
        });

Thank you in advance.

回答1:

Untested, but you should be able to init your RTC connection with a dummy video+audio MediaStream, even if your user doesn't have any device, and without asking them for any approval:

function SilentStream(videoColor) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d', {alpha: false});
  ctx.fillStyle = videoColor || 'black';
  ctx.fillRect(0,0,canvas.width, canvas.height);
  const videoStream = canvas.captureStream();
  const videoTrack = videoStream.getVideoTracks()[0];
  const a_ctx = new (window.AudioContext || window.webkitAudioContext)();
  const audioStream = a_ctx.createMediaStreamDestination().stream;
  const audioTrack = audioStream.getAudioTracks()[0];
  
  return new MediaStream([videoTrack, audioTrack]);
}
// just to show it's streaming
black.srcObject = SilentStream();
green.srcObject = SilentStream('green');

<video id="black" controls autoplay></video>
<video id="green" controls autoplay></video>