Question

以下是我所做的：

<html>
<title>Varade</title>
<script src="https://cdn.webrtc-experiment.com/RecordRTC.js"></script>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <script src="https://cdn.webrtc-experiment.com/DetectRTC.js"> </script>
<body>
<center><div style="width:400px;height:400px;background-color:grey;">
<video id="my-preview" autoplay style="width:350px;height:350px;"></video>  
</div></br>
<div style="width:400px;height:400px;background-color:grey;">
<video id="livestream" autoplay style="width:350px;height:350px;"></video>  
</div></br>
<!--<iframe id="livestream" src=""></iframe>
</br>-->
<div>
<input type="button" name="start" id="start" value="start"/>
<input type="button" name="stop" id="stop" value="stop" disabled />
</div>
</center>
</body>

<script>
//var livestream = document.getElementById('livestream');
var video = document.getElementById('my-preview');
var start_btn=document.querySelector('#start');
var stop_btn=document.getElementById('stop');
start_btn.onclick=function(){
    //alert('working');
    this.disabled=true;navigator.mediaDevices.getUserMedia({
        audio:true,
        video:true
    }).then(function(stream){
        setSrcObject(stream,video);
        video.play();
        video.muted=true;
        //initialize Record
        recorder = new RecordRTCPromisesHandler(stream, {
                mimeType: 'video/webm',
                bitsPerSecond: 128000
            });

        // Start recording the video
        recorder.startRecording().then(function() {
            console.info('Recording video ...');
        }).catch(function(error) {
            console.error('Cannot start video recording: ', error);
        });

        // release stream on stopRecording
        recorder.stream = stream;
        console.info(recorder.stream);
        //Enable Stop button
        stop_btn.disabled=false;
    })

    };

    // To STOP RECORDING
    stop_btn.onclick=function(){
        recorder.stopRecording().then(function(){
            console.info('stopRecording success');

            // Retrieve recorded video as blob and display in the preview element
            var videoBlob = recorder.getBlob();
            video.src = URL.createObjectURL(videoBlob);
            video.play();

            // Unmute video on preview
            video.muted = false;
            video.controls=true;
            // Stop the device streaming
            recorder.stream.stop();

            //Manage Buttons
            stop_btn.disabled=true;
            start_btn.disabled=false;

            console.info(video.src);
        })
    };
    // To STOP RECORDING

</script>
</html>

现在上面的代码可以像记录和显示一样工作，但是我想要类似当我单击“开始”按钮时访问网络摄像头和麦克风并开始记录，当我停止按钮时，自动记录的视频将显示在视频标签ID名称中作为我的预览。但是我也想像当我开始播放视频时那样，该视频直播将显示在另一个名为livestream的视频标签ID中。我是新手，请帮忙。

实时录制同时直播

0 个答案: