Hey,
I would like to implement a WebRTC Component. At the moment I am just trying to get a video of my own webcam like
<!DOCTYPE html>
<html><head><title>getUserMedia Demo 1</title>
<style>
video {
width:876px;
height:500px;
}
</style>
</head>
<body onload=start()>
<video id="vid" autoplay="true"></video>
<script>
video = document.getElementById("vid");
function start() {
navigator.webkitGetUserMedia({video:true, audio:true}, gotStream, function() {});
btn.disabled = true;
}
function gotStream(stream) {
video.src = webkitURL.createObjectURL(stream);
}
</script></body></html>I tried to do it like the blog entry
vaadin-7-loves-javascript-components
. So I created WebRTCComponent, WebRTCComponentState and the two js-files myconnector.js and mylibrary.js
@JavaScript({"mylibrary.js", "myconnector.js"})
public class WebRTCComponent extends AbstractJavaScriptComponent{
private static final long serialVersionUID = 1L;
@Override
protected WebRTCComponentState getState() {
return (WebRTCComponentState) super.getState();
}
}}public class WebRTCComponentState extends JavaScriptComponentState
{
public Video video = new Video();
}com_kit_gip_view_chat_WebRTCComponent =
function() {
// Create the component
var mycomponent =
new mylibrary.MyComponent(this.getState().video);
};var mylibrary = mylibrary || {};
var video;
mylibrary.MyComponent = function(element) {
this.video = element;
navigator.webkitGetUserMedia({
video : true,
audio : true
}, gotStream, function() {
});
btn.disabled = true;
}
function gotStream(stream) {
video.src = webkitURL.createObjectURL(stream);
}mylibrary.js is already used if I add WebRTCComponent somewhere with addComponent(), but the video is not shown. At this point I’m not sure if I understood the blog entry correctly. Do I have to add the video component in the WebRTCComponent(State) (if yes how) or in mylibrary.js with someElement.innerHTML = […]
Thanks in advance