webrtc，是否有可能将图像转换为媒体流？

我们需要发送图像而不是视频。有人说图像可以转换媒体流。

我尝试，图像base64和调用addstream，但我失败了。怎么做？

var imagestream = getBase64FromImageUrl('./unown.png'); 

function getBase64FromImageUrl(URL) { 
    var img = new Image(); 
    img.src = URL; 
    img.onload = function() { 


    var canvas = document.createElement("canvas"); 
    canvas.width =this.width; 
    canvas.height =this.height; 

    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(this, 0, 0); 


    var dataURL = canvas.toDataURL("image/png"); 

    alert( dataURL.replace(/^data:image\/(png|jpg);base64,/, "")); 

    } 
}

来源

2014-04-21 byungkyu

尝试Whammy.js：一个实时的Javascript的WebM编码器

尝试Recorder.js：这是音频（如果需要）;）

JS（的script.js）：

/*Adapating for different vendors*/ 
window.URL = 
    window.URL || 
    window.webkitURL || 
    window.mozURL || 
    window.msURL; 

window.requestAnimationFrame = 
    window.requestAnimationFrame || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame || 
    window.msRequestAnimationFrame || 
    window.oRequestAnimationFrame; 

window.cancelAnimationFrame = 
    window.cancelAnimationFrame || 
    window.webkitCancelAnimationFrame || 
    window.mozCancelAnimationFrame || 
    window.msCancelAnimationFrame || 
    window.oCancelAnimationFrame; 

navigator.getUserMedia = 
    navigator.getUserMedia || 
    navigator.webkitGetUserMedia || 
    navigator.mozGetUserMedia || 
    navigator.msGetUserMedia; 

window.AudioContext = 
    window.AudioContext || 
    window.webkitAudioContext; 

/*Global stuff*/ 
var video = get('video'); 
video.width = 320; 
video.height = 240; 
var canvas = document.createElement('canvas'); 
var rafId = null; 
var frames = []; 

var audioContext = new AudioContext; 
var audioRecorder; 

/*Save typing :) */ 
function get(selector) { 
    return document.querySelector(selector) || null; 
} 

/*Wrapper for recording*/ 
function recordIt() { 
    var record = get('#record'); 
    record.textContent = record.disabled ? 'Record' : 'Recording...'; 
    record.classList.toggle('recording'); 
    record.disabled = !record.disabled; 
} 

/*Get Media (Video and Audio) from user*/ 
function getMedia(event) { 
    event.target.disabled = true; 
    get('#record').disabled = false; 

    video.controls = false; 

    var setVideo = function() { 
     setTimeout(function() { 
      video.width = 320; 
      video.height = 240; 
      canvas.width = video.width; 
      canvas.height = video.height; 
     }, 1000); 
    }; 

    if (navigator.getUserMedia) { 
     navigator.getUserMedia({video: true, audio: true}, function(stream) { 
      if (video.mozSrcObject !== undefined) { 
       video.mozSrcObject = stream; 
      } else { 
       video.src = (window.URL && window.URL.createObjectURL(stream)) || stream; 
      } 
      var audioInput = audioContext.createMediaStreamSource(stream); 
      audioInput.connect(audioContext.destination); 
      audioRecorder = new Recorder(audioInput); 
      setVideo(); 
     }, function(e) { 
      alert('Error'+e); 
      console.log(e) 
     }); 
    } else { 
     console.log('getUserMedia() not supported in this browser.'); 
    } 
}; 

/*Record function: Draws frames and pushes to array*/ 
function record() { 
    var context = canvas.getContext('2d'); 
    var CANVAS_HEIGHT = canvas.height; 
    var CANVAS_WIDTH = canvas.width; 

    frames = []; 

    recordIt(); 
    get('#stop').disabled = false; 

    function draw(time) { 
     rafId = requestAnimationFrame(draw); 

     context.drawImage(video, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); 
     var url = canvas.toDataURL('image/webp', 1); 
     frames.push(url); 
    }; 

    rafId = requestAnimationFrame(draw); 
    //Audio stuff 
    audioRecorder.clear(); 
    audioRecorder.record(); 
}; 

/*Stop Recording*/ 
function stop() { 
    cancelAnimationFrame(rafId); 
    get('#stop').disabled = true; 
    recordIt(); 
    setVideo(); 
    //Audio stuff 
    audioRecorder.stop(); 
    setAudio(); 
}; 

/*Call Whammy for creating video*/ 
function setVideo(vidUrl) { 
    var url = vidUrl || null; 
    var video = get('#recordedDiv video') || null; 

    if (!video) { 
     video = document.createElement('video'); 
     video.autoplay = true; 
     video.controls = true; 
     video.style.width = canvas.width + 'px'; 
     video.style.height = canvas.height + 'px'; 
     get('#recordedDiv').appendChild(video); 
    } else { 
     window.URL.revokeObjectURL(video.src); 
    } 

    if (!url) { 
     var webmBlob = Whammy.fromImageArray(frames, 1000/60); 
     url = window.URL.createObjectURL(webmBlob); 
    } 
    video.src = url; 
} 


function setAudio() { 
    audioRecorder.exportWAV(function(blob) { 
     var audio = get('#recordedDiv audio') || null; 
     var url = URL.createObjectURL(blob); 
     if(!audio) { 
      var audio = document.createElement('audio'); 
      audio.autoplay = true; 
      audio.controls = true; 
      audio.src = url; 
      get('#recordedDiv').appendChild(audio); 
     } 
     else { 
      audio.src = url; 
     } 
    }); 
} 

/*Fingers Crossed*/ 
function init() { 
    get('#camera').addEventListener('click', getMedia); 
    get('#record').addEventListener('click', record); 
    get('#stop').addEventListener('click', stop); 
} 
init();

HTML

<html><head> 
    <meta charset="utf-8"> 
    <title>Record and Play Simple Messages</title> 
    <link rel="stylesheet" type="text/css" href="./css/style.css"> 
<style type="text/css"></style></head> 
<body> 
    Records webm video and audio using WebAudioAPI, whammy.js and recorder.js 
    Webp images not supported in firefox, hence it fails. Works on Chrome though. 
    <section> 
    <div> 
     <video autoplay="" width="320" height="240"></video><br> 
     <button id="camera">GetUserMedia</button> 
    </div> 
    <div id="recordedDiv"> 
     <button id="record" disabled="">Record</button> 
     <button id="stop" disabled="">Stop</button><br> 
    </div> 
    </section> 
    <script type="text/javascript" src="./js/whammy.min.js"></script> 
    <script type="text/javascript" src="./js/recorder.js"></script> 
    <script type="text/javascript" src="./js/script.js"></script> 

</body></html>

DEMO

来源

2014-04-24 21:05:48 sinhayash

谢谢你...哇 – byungkyu