वेबआरटीसी

Question

का उपयोग कर स्ट्रीम मीडिया फ़ाइल यहां मेरा उपयोग मामला है: ऐलिस के पास एक अच्छा नया मीडिया ट्रैक है कि वह बॉब को सुनना चाहती है। वह अपने ब्राउज़र में मीडिया फ़ाइल का चयन करती है और मीडिया फ़ाइल बॉब के ब्राउज़र में तुरंत खेलना शुरू कर देती है।

मुझे अभी भी यह सुनिश्चित नहीं है कि वेबआरटीसी एपीआई का उपयोग करना संभव है या नहीं। सभी उदाहरण मैं getUserMedia (के माध्यम से प्राप्त उपयोग धाराओं) प्राप्त कर सकते हैं, लेकिन यह है कि मैं क्या है:

var context = new AudioContext(); 
var pc = new RTCPeerConnection(pc_config); 

function handleFileSelect(event) { 
    var file = event.target.files[0]; 

    if (file) { 
     if (file.type.match('audio*')) { 
      console.log(file.name); 
      var reader = new FileReader(); 

      reader.onload = (function(readEvent) { 
       context.decodeAudioData(readEvent.target.result, function(buffer) { 
        var source = context.createBufferSource(); 
        var destination = context.createMediaStreamDestination(); 
        source.buffer = buffer; 
        source.start(0); 
        source.connect(destination); 
        pc.addStream(destination.stream); 
        pc.createOffer(setLocalAndSendMessage); 
       }); 
      }); 

      reader.readAsArrayBuffer(file); 
     } 
    } 
} 

प्राप्त तरफ मैं निम्नलिखित है:

function gotRemoteStream(event) { 
    var mediaStreamSource = context.createMediaStreamSource(event.stream); 
    mediaStreamSource.connect(context.destination); 
} 

इस कोड (मीडिया नहीं है संगीत) प्राप्त करने वाले पक्ष पर खेलते हैं। हालांकि मुझे ईवेंट समाप्त हो गया है, वेबआरटीसी हैंडशेक के ठीक बाद और मिला रिमोटस्ट्रीम फ़ंक्शन को कॉल किया गया था। gotRemoteStream फ़ंक्शन को मीडिया कहा जाता है जिसे खेलना शुरू नहीं होता है।

एलिस की तरफ जादू का मानना ​​है कि स्रोत.कनेक्ट (गंतव्य) कहता है। जब मैं स्रोत.कनेक्ट (context.destination) के साथ उस पंक्ति को प्रतिस्थापित करता हूं तो मीडिया ऐलिस के स्पीकर के माध्यम से सही ढंग से खेलना शुरू कर देता है।

बॉब की तरफ एक मीडिया स्ट्रीम स्रोत एलिस की धारा के आधार पर बनाया गया है। हालांकि जब स्थानीय स्पीकर मीडियास्ट्रीमसोर्स.कनेक्ट (context.destination) का उपयोग कर कनेक्ट होते हैं तो संगीत वक्ताओं के माध्यम से खेलना शुरू नहीं करता है।

जरुर मैं हमेशा एक DataChannel के माध्यम से मीडिया फ़ाइल भेज सकता है लेकिन जहां कि में मज़ा है ...

क्या मेरी कोड या कैसे मेरे उपयोग के मामले को प्राप्त करने पर कुछ विचार के साथ कुछ गलत है पर कोई सुराग होगा बहुत सराहना कीजिए!

मैं नवीनतम और सबसे बड़ी क्रोम कैनरी का उपयोग कर रहा हूं।

धन्यवाद।

Answer 1

यह इस तरह ऑडियो तत्व का उपयोग ऑडियो खेलने के लिए संभव है।

Answer 2

क्रोम के बारे में निश्चित ध्यान दें; एक बग की तरह लगता है।

इसे फ़ायरफ़ॉक्स पर आज़माएं (रात में मैं सुझाव देता हूं); हमारे पास WebAudio समर्थन है हालांकि मुझे वर्तमान में समर्थित समर्थन के बारे में सभी विवरण नहीं पता हैं।

इसके अलावा, फ़ायरफ़ॉक्स पर कम से कम हमारे पास स्ट्रीम = media_element.captureStreamUntilEnded(); हम मानते हैं कि हम डोम/मीडिया/परीक्षण/मोचसाइट्स में हमारे कुछ परीक्षणों में इसका उपयोग करते हैं। यह आपको कोई ऑडियो या वीडियो तत्व लेने देता है और आउटपुट को मध्यस्थ के रूप में कैप्चर करता है।

संपादित करें: नीचे देखें; क्रोम और फ़ायरफ़ॉक्स दोनों WebRTC PeerConnections के साथ वेबऑडियो के संयोजन में याद करते हैं, लेकिन विभिन्न स्थानों पर। मोज़िला को जल्द ही आखिरी बग को ठीक करने की उम्मीद है। WebAudio API यह (अभी तक) मेरे लिए काम नहीं कर के माध्यम से ऑडियो वापस बजाना

function gotRemoteStream(event) { 
    var player = new Audio(); 
    attachMediaStream(player, event.stream); 
    player.play(); 
} 

:

Answer 3

पृष्ठ MediaStream Integration देखें।यह वेब ऑडियो एपीआई के साथ वेबआरटीसी एकीकरण को दर्शाता है। विशेष रूप से इस उदाहरण अपने प्रश्न के लिए प्रासंगिक है:

5. Capture microphone input, visualize it, mix in another audio track and stream the result to a peer

<canvas id="c"></canvas> 
<audio src="back.webm" id="back"></audio> 
<script> 
    navigator.getUserMedia('audio', gotAudio); 
    var streamRecorder; 
    function gotAudio(stream) { 
     var microphone = context.createMediaStreamSource(stream); 
     var backgroundMusic = context.createMediaElementSource(document.getElementById("back")); 
     var analyser = context.createAnalyser(); 
     var mixedOutput = context.createMediaStreamDestination(); 
     microphone.connect(analyser); 
     analyser.connect(mixedOutput); 
     backgroundMusic.connect(mixedOutput); 
     requestAnimationFrame(drawAnimation); 

     peerConnection.addStream(mixedOutput.stream); 
    } 
</script> 

मुझे डर है, तथापि, कि यह केवल एक प्रस्ताव वर्तमान में है।