Question

单击记录按钮时出现控制台错误。

我与RTCMulticonnection中的代码一起建立了连接，现在希望能够记录流。我使用此演示记录了流：

RecordRTC和RTCMultiConnection https://github.com/muaz-khan/WebRTC-Experiment/blob/d1040f7dcd47c290f99ad51f9b3d57aa40c847c4/RTCMultiConnection/v2.2.2/demos/RecordRTC-and-RTCMultiConnection.html

控制台消息

Uncaught TypeError: Cannot read property 'YvuytsjuZSjrg1Wp9xa4jAXrEC783kpnW74r' of undefined
    at HTMLButtonElement.button.onclick (index.html:108)

我看到的是，在演示版本中，所有流标识都有一个简短的ID，例如 id="1mnvuzts2dm"。我的版本将流ID设置为更长的随机字符串，例如上述错误id="YvuytsjuZSjrg1Wp9xa4jAXrEC783kpnW74r"

中的字符串。

//RECORD THE CONVERSATION AUDIO + VIDEO
  connection.onstream = function(e) {
            appendVideo(e.mediaElement, e.streamid);
        };

        function appendVideo(video, streamid) {
            video.width = 600;
            video = getVideo(video, streamid);
            videosContainer.appendChild(video);
            rotateVideo(video);
            scaleVideos();
        }

        function getVideo(video, streamid) {
            var div = document.createElement('div');
            div.className = 'video-container';

            var button = document.createElement('button');
            button.id = streamid;
            button.innerHTML = 'Start Recording';
            button.onclick = function() {
                this.disabled = true;
                if (this.innerHTML == 'Start Recording') {
                    this.innerHTML = 'Stop Recording';
                    connection.streams[this.id].startRecording({
                        audio: true,
                        video: true
                    });
                } else {
                    this.innerHTML = 'Start Recording';
                    var stream = connection.streams[this.id];
                    stream.stopRecording(function(blob) {
                        var h2;

                        if (blob.audio && !(connection.UA.Chrome && stream.type == 'remote')) {
                            h2 = document.createElement('h2');
                            h2.innerHTML = '<a href="' + URL.createObjectURL(blob.audio) + '" target="_blank">Open recorded ' + blob.audio.type + '</a>';
                            div.appendChild(h2);
                        }

                        if (blob.video) {
                            h2 = document.createElement('h2');
                            h2.innerHTML = '<a href="' + URL.createObjectURL(blob.video) + '" target="_blank">Open recorded ' + blob.video.type + '</a>';
                            div.appendChild(h2);
                        }
                    });
                }
                setTimeout(function() {
                    button.disabled = false;
                }, 3000);
            };
            div.appendChild(button);
            div.appendChild(video);
            return div;
        }

        function rotateVideo(mediaElement) {
            mediaElement.style[navigator.mozGetUserMedia ? 'transform' : '-webkit-transform'] = 'rotate(0deg)';
            setTimeout(function() {
                mediaElement.style[navigator.mozGetUserMedia ? 'transform' : '-webkit-transform'] = 'rotate(360deg)';
            }, 1000);
        }

        connection.onstreamended = function(e) {
            var div = e.mediaElement.parentNode;
            div.style.opacity = 0;
            rotateVideo(div);
            setTimeout(function() {
                if (div.parentNode) {
                    div.parentNode.removeChild(div);
                }
                scaleVideos();
            }, 1000);
        };


      function scaleVideos() {
            var videos = document.querySelectorAll('video'),
                length = videos.length,
                video;

            var minus = 130;
            var windowHeight = 700;
            var windowWidth = 600;
            var windowAspectRatio = windowWidth / windowHeight;
            var videoAspectRatio = 4 / 3;
            var blockAspectRatio;
            var tempVideoWidth = 0;
            var maxVideoWidth = 0;

            for (var i = length; i > 0; i--) {
                blockAspectRatio = i * videoAspectRatio / Math.ceil(length / i);
                if (blockAspectRatio <= windowAspectRatio) {
                    tempVideoWidth = videoAspectRatio * windowHeight / Math.ceil(length / i);
                } else {
                    tempVideoWidth = windowWidth / i;
                }
                if (tempVideoWidth > maxVideoWidth)
                    maxVideoWidth = tempVideoWidth;
            }
            for (var i = 0; i < length; i++) {
                video = videos[i];
                if (video)
                    video.width = maxVideoWidth - minus;
            }
        }

错误行是

connection.streams[this.id].startRecording({

Answer 1

您可以使用RecordRTC库来记录流。您只需要在首页上使用此代码

并将recordRTC库附加到您的页面。

  recorder = connection.recorder;
        if(!recorder) 
        {
            recorder = RecordRTC([event.stream], {
                type: 'video'
            });             
            connection.recorder = recorder;
        }
        else {
            recorder.getInternalRecorder().addStreams([event.stream]);
        }

        recorder.videoWidth  = 500;
        recorder.videoHeight = 500;

        if(!connection.recorder.streams) {
            connection.recorder.streams = [];
        }

        connection.recorder.streams.push(event.stream);

        var length = connection.recorder.streams.length;

        if(length > 2){
            length = 2; 
        }
        recordingStatus.innerHTML = 'Recording Started ' + length + ' streams';

或者您可以使用此代码

connection.onstream = function(event) {

    var video = document.createElement('video');

    try {
        video.setAttributeNode(document.createAttribute('autoplay'));
        video.setAttributeNode(document.createAttribute('playsinline'));
    } catch (e) {
        video.setAttribute('autoplay', true);
        video.setAttribute('playsinline', true);
    }

    if(event.type === 'local') {
      video.volume = 0;
      try {
          video.setAttributeNode(document.createAttribute('muted'));
      } catch (e) {
          video.setAttribute('muted', true);
      }
    }
    video.srcObject = event.stream;

    var width = parseInt(connection.videosContainer.clientWidth / 3) - 20;
    var mediaElement = getHTMLMediaElement(video, {
        title: event.userid,
        buttons: ['full-screen'],
        width: width,
        showOnMouseEnter: false
    });

    connection.videosContainer.appendChild(mediaElement);

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

    mediaElement.id = event.streamid;
    // to keep room-id in cache
    localStorage.setItem(connection.socketMessageEvent, connection.sessionid);
    if(chkRecordConference.checked === true) {
        chkRecordConference.parentNode.style.display = 'none';
        btnStopRecording.style.display = 'inline-block';
        recordingStatus.style.display = 'inline-block';
        recorder = connection.recorder;
        if(!recorder) 
        {
            recorder = RecordRTC([event.stream], {
                type: 'video'
            });             
            connection.recorder = recorder;
        }
        else {
            recorder.getInternalRecorder().addStreams([event.stream]);
        }

        recorder.videoWidth  = 500;
        recorder.videoHeight = 500;

        if(!connection.recorder.streams) {
            connection.recorder.streams = [];
        }

        connection.recorder.streams.push(event.stream);

        var length = connection.recorder.streams.length;

        if(length > 2){
            length = 2; 
        }
        recordingStatus.innerHTML = 'Recording Started ' + length + ' streams';
    }

单击开始录制按钮时出现“无法读取属性”错误

1 个答案: