WebRTC文件传输和语法querySelector

时间:2016-02-12 12:36:26

标签: javascript

我从不使用WebRTC。所以没有任何理解他们的语法是什么样的。 我有一些语法,我认为它不是jquery。所以任何人都想告诉我它是否与webRTC相关的代码有关。

document.querySelector('#stop-recording').onclick = function() {
        this.disabled = true;
        mediaRecorder.stop();
        mediaRecorder.stream.stop();
        document.querySelector('#pause-recording').disabled = true;
        document.querySelector('#start-recording').disabled = false;
    };

什么是querySelector

我从此网址https://github.com/streamproc/MediaStreamRecorder/blob/master/demos/video-recorder.html

获取了代码

寻找位信息。感谢

2 个答案:

答案 0 :(得分:2)

您可以参考以下代码:

var audio_context;
                        var recorder;
                        $(function () {
                            try {
                                //Audio Recording 
                                window.AudioContext = window.AudioContext || window.webkitAudioContext;
                                navigator.getUserMedia = (navigator.getUserMedia ||
                                                        navigator.webkitGetUserMedia ||
                                                        navigator.mozGetUserMedia ||
                                                        navigator.msGetUserMedia);
                                window.URL = window.URL || window.webkitURL;

                                var recorderObject;
                                var VM_IDForAudio = "";
                                var audio_context = new AudioContext;
                                var localMediaStreamForAudio;
                                var audioStream;

                                //Audio-Video Recording (Firefox)
                                var videoFile = !!navigator.mozGetUserMedia ? 'video.gif' : 'video.webm';
                                var inner = document.querySelector('.inner');
                                var videoElement = document.getElementById('webcamVideo');
                                var VM_IDForAudioVideo = "";
                                var localMediaStreamForAudioVideo;

                                //Disable Live Webcam Button
                                $("#btnShowWebcam").prop("disabled", true);
                            } catch (e) {
                                //alert('No web audio support in this browser!');
                                console.log("No web audio support in this browser!");
                            }

                            //Audio Recording
                            $("[id$='btnAudioRecord']").click(function () {
                                //VM_IDForAudio = $("[id$='hdVMID']").val();
                                VM_IDForAudio = $("[id$='hdPRN']").val() + "_" + $("[id$='hdVMID']").val() + "_" +
                                    patientDet.visitType + "_" + replateDateString(patientDet.visitDate);
                                $this = $(this);
                                $recorder = $this.parent();
                                if ($("[id$='btnAudioRecord']").val() == "Record Audio") {
                                    if (VM_IDForAudio != "") {
                                        $this.attr("value", "Stop Record");
                                        navigator.getUserMedia({ audio: true }, function (stream) {
                                            if (window.IsChrome) stream = new window.MediaStream(stream.getAudioTracks());
                                            audioStream = stream;
                                            recorder = window.RecordRTC(stream, {
                                                type: 'audio'
                                            });
                                            recorder.startRecording();
                                        }, function () { });
                                    }
                                    else {
                                        //Select Patient 
                                    }
                                } else {
                                    $this.attr("value", "Record Audio");
                                    if (recorder)
                                        recorder.stopRecording(function (url) {
                                            var reader = new window.FileReader();
                                            reader.readAsDataURL(blob);
                                            reader.onloadend = function () {
                                                base64data = reader.result;
                                                PageMethods.SaveAudioRecording(base64data, VM_IDForAudio);
                                                audioStream.stop();
                                            }
                                        });
                                }
                            });

                            //Audio-Video Recording
                            $("[id$='btnAudioVideoRecord']").click(function () {
                                //VM_IDForAudioVideo = $("[id$='hdVMID']").val();
                                VM_IDForAudioVideo = $("[id$='hdPRN']").val() + "_" + $("[id$='hdVMID']").val() + "_" +
                                    patientDet.visitType + "_" + replateDateString(patientDet.visitDate);
                                $this = $(this);
                                if ($("[id$='btnAudioVideoRecord']").val() == "Record Aud/Vid") {
                                    if (VM_IDForAudioVideo != "") {
                                        $this.attr("value", "Stop Record");
                                        captureUserMedia(function (stream) {
                                            window.audioVideoRecorder = window.RecordRTC(stream, {
                                                type: 'video', // don't forget this; otherwise you'll get video/webm instead of audio/ogg
                                                canvas: {
                                                    width: 320,
                                                    height: 240
                                                }
                                            });
                                            localMediaStreamForAudioVideo = stream;
                                            $("#btnShowWebcam").prop("disabled", false);
                                            window.audioVideoRecorder.startRecording();
                                        });
                                    }
                                    else {
                                        //Select Patient 
                                    }
                                } else {
                                    $this.attr("value", "Record Aud/Vid");
                                    $("#btnShowWebcam").prop("disabled", true);
                                    window.audioVideoRecorder.stopRecording(function (url) {
                                        convertStreams(audioVideoRecorder.getBlob(), videoFile, VM_IDForAudioVideo);
                                    });
                                    localMediaStreamForAudioVideo.stop();
                                }
                            });

并使用RecordRTC javascript库。 了解更多信息:http://recordrtc.org/RecordRTC.html, 现场演示:https://www.webrtc-experiment.com/RecordRTC/AudioVideo-on-Firefox.html

答案 1 :(得分:1)

您应该检查webtorrent github存储库,有关于webRTC及其实现方式的详细说明。还可以查看webtorrent official website