webrtc, is it possible convert image to mediastream?

Question

I make webrtc video chating.

we need to sending image instead of video. someone say image can convert mediastream.

I try, image to base64 and call addstream but I am fail. how to do that?

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,/, ""));

    }
}

Answer 1

Try Whammy.js : A Real Time Javascript WebM Encoder

Try Recorder.js : This is for Audio (if you need) ;)

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

Answer 2

I know I am answering bit late, and this is only applicable for firefox( 41 and above), you can try and create a mediastream from the canvas using CanvasCaptureMediaStream

Edit: they are implementing this media capture option in chrome as well, you can follow the issue here