html视频上传获取预览图,html5 获取音频和视频并显示到canvas上，截图上传

(function(){

var video = document.getElementById('video');

var canvas = document.getElementById('canvas');

var canvasContext = canvas.getContext('2d');

var audio_context;

function (e, data){

console.log(e + " " + (data || ''));

}

function createRecorder(stream, handleMessage){

if (navigator.mozGetUserMedia) {

video.mozSrcObject = stream;

} else {

var vendorURL = window.URL || window.webkitURL;

video.src = vendorURL.createObjectURL(stream);

}

video.play();

var input = audio_context.createMediaStreamSource(stream);

var recorder = new Recorder(input, {

serverUrl: "wss://rating.llsstaging.com/llcup/stream/upload",

handleMessage: handleMessage

});

__log('Recorder initialised.');

return recorder;

}

var Page = function(){

var self = this;

var inited = false;

var recorder = null;

var handleMessage = function(resp){

try {

var respObj = JSON.parse(resp);

// if(respObj.decoded){

// textToEmotion(respObj.decoded);

// }

chat(respObj.decoded);

self.overallScore(respObj.decoded);

respObj.details.forEach(function(wordRate){

self.wordRates.push({

word: wordRate.word,

score: wordRate.confidence

})

});

} catch (e) {

//self.hasError(true);

self.errorResp(resp);

self.errorInfo(e.message);

}

};

this.inited = ko.observable(false);

initAudioSetting(function(stream){

recorder = createRecorder(stream, handleMessage);

self.inited(true);

});

this.hasError = ko.observable(false);

this.errorResp = ko.observable('');

this.errorInfo = ko.observable('');

this.wordRates = ko.observableArray([]);

this.readingRefText = ko.observable(randomPick(Constants.PreparedTexts));

this.recording = ko.observable(false);

this.overallScore = ko.observable();

this.recordButtonText = ko.computed(function(){

return self.recording() ? "▧" : "▶";

});

this.toggleRecording = function(){

self.hasError(false);

self.wordRates.removeAll();

self.recording(!self.recording());

};

//this.switchRefText = function() {

// self.readingRefText(randomPick(Constants.PreparedTexts));

//}

this.recording.subscribe(function(){

if(self.recording()) {

/*

algConfig = {

type: 'readaloud',

quality: -1,

//reftext: self.readingRefText().replace(/[,.]/g, '')

reference: self.readingRefText().toLowerCase().replace(/[^A-Za-z0-9']/g, ' ').trim()

};

*/

algConfig = {

type: 'asr',

quality: -1

};

console.log(algConfig);

recorder.record({

algConfig: algConfig

});

} else {

recorder.stop();

recorder.clear();

}

});

}

var initAudioSetting = function(startUserMediaCallback){

try {

// webkit shim

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

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;

window.URL = window.URL || window.webkitURL;

audio_context = new AudioContext;

__log('Audio context set up.');

__log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!'));

} catch (e) {

alert('No web audio support in this browser!');

}

navigator.getUserMedia({

audio: true,

video: {

mandatory: {

maxWidth: 320,

maxHeight: 240

}

}

}, startUserMediaCallback, function(e){

__log('No live audio input: ' + e);

});

}

window.onload = function init(){

window.page = new Page();

ko.applyBindings(window.page);

setTimeout(imgToEmotion, 1000);

};

var tabButton = document.getElementById("tab-change");

tabButton.addEventListener('click',function (){

if(tabButton.checked){

tab_change_state = false;

}else{

tab_change_state = true;

imgToEmotion();

}

});

var tabVideo = document.getElementById("tab-video");

tabVideo.addEventListener('click',function (){

if(tabVideo.checked){

video.style.display = 'none';

}else{

video.style.display = 'block';

}

});

//聊天API

function chat(str){

var data = {data: str};

$.ajax({

url: "https://www.hupeng.wang/PicServer/re_chat.php",

type: "POST",

data: data

}).done(function(data){

document.getElementById("chat-box").innerText = data;

textToEmotion(data);

}).fail(function(){

console.log('Chat Error!');

})

}

//文本分析得到情感json

function textToEmotion(str){

var data = {data:str};

$.ajax({

url: "https://www.hupeng.wang/PicServer/re_text.php",

type: "POST",

data: data

}).done(function(data){

data = JSON.parse(data);

console.log(data);

var res = {name:"def",value:0};

var emotion = data["document_tone"]["tone_categories"][0]["tones"];

for(var i = 0;i

if(emotion[i]["score"]>res.value){

res.value = emotion[i]["score"];

res.name = emotion[i]["tone_id"];

}

}

console.log(res.name);

changeState(res.name);

}).fail(function(){

console.log('textToEmotion Error');

})

}

//图片上传得到情感json

function imgToEmotion(){

if(!tab_change_state) return;

canvasContext.drawImage(video, 0, 0, 320, 240);

var element = document.createElement("img");

element.src = canvas.toDataURL();

var pic = {data:element.src};

$.ajax({

url: "https://www.hupeng.wang/PicServer/re_pic.php",

type: "POST",

// Request body

data: pic,

}).done(function(data){

data = JSON.parse(data);

if(data.length!==0){

var res = {name:"def",value:0};

var scores = data['0']["scores"];

for(var score in scores){

//console.log(score,scores[score]);

if(scores[score]>res.value){

res.value = scores[score];

res.name = score;

}

}

changeState(res.name);

}else{

console.log("未识别到人");

}

setTimeout(imgToEmotion,0);

}).fail(function(){

setTimeout(imgToEmotion,0);

});

}

}).call(window);