how to render to the dom image that am sending by webRTC

Question

Am developing a chat app where people can share pictures with WebRTC peer to peer connection and i want to show the users the sended picture in the DOM in img tag

i actually render the image for the reciver , but for the sender i couldn't , i tried to get the img path but the browser won't allow to accses the system path , how can i render to the DOM the picture that am sending without uploading it to any disk on the internet?

            sendFile.addEventListener('change', function(ev){
                var file = sendFile.files[0];

                displaySignalMessage("sending file " + file.name + " (" + file.size + ") ...");
                socket.emit('files',{"filename":file.name, "filesize":file.size, "room":room});

                fileProgress.max = file.size;
                var chunkSize = 16384;
                var sliceFile = function(offset) {
                    var reader = new window.FileReader();
                    reader.onload = (function() {
                        return function(e) {
                            dataChannel.send(e.target.result);
                            if (file.size > offset + e.target.result.byteLength) {
                                window.setTimeout(sliceFile, 0, offset + chunkSize);
                                }
                            fileProgress.value = offset + e.target.result.byteLength;
                        };
                    })(file);
                    var slice = file.slice(offset, offset + chunkSize);
                    reader.readAsArrayBuffer(slice);
                };
                sliceFile(0);       

            }, false);

the reciver code

            function receiveDataChannelMessage(event) {
                displaySignalMessage("Incoming Message");
                console.log(fileSize)
                displayMessage("From DataChannel: " );
                console.log(event.data)

                //This is where we process incoming files
                fileBuffer.push(event.data);
                fileSize += event.data.byteLength;
                fileProgress.value = fileSize;

                //Provide link to downloadable file when complete
                console.log(fileSize+"  should be equal   "+ receivedFileSize);
                if (fileSize === receivedFileSize) {
                    var received = new window.Blob(fileBuffer);
                    fileBuffer = [];
                    fileSize=0;
                    // downloadLink.download = receivedFileName;
                    //  let xFileName = document.createTextNode(receivedFileName + "(" + fileSize + ") bytes");
                    //    hisMessage(`<a download='${receivedFileName}' href='${URL.createObjectURL(received)}'>image</a>`,name)
                    console.log("   OUT PUT MESSAGE " )
                    console.log(received);
                   hisMessage(`<img style='width:100px' src='${URL.createObjectURL(received)}' />`,name);
                }

            }