Живая запись одновременно в прямом эфире - PullRequest
Новая
       52

Живая запись одновременно в прямом эфире

0 голосов
/ 15 октября 2018

Ниже приведено то, что я сделал: 

<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>

Теперь приведенный выше код работает как запись и отображение, но я хочу, чтобы аналогично, когда я нажимаю кнопку пуска, открывается веб-камера и микрофон, и записьначнется, когда я остановлю кнопку автоматически записанное видео будет отображаться в имени тега видео как my-preview.Но я также хочу, чтобы, когда я запускаю видео, это видео в прямом эфире будет отображаться с другим идентификатором тега видео, который называется прямой трансляцией.Я новичок в этом, пожалуйста, помогите.

...