如何在GET上调用JSF bean方法来获取视频?

时间:2016-01-11 18:20:23

标签: javascript jsf

我想自动上传在WildFly服务器上录制的视频文件。这是我的代码。如何在服务器上传视频?如何在GET上调用JSF bean方法来获取视频?

<html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:ui="http://java.sun.com/jsf/facelets"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
    <h:form id="form">
        <div>
            <h:button id='request' value="Request Camera">

            </h:button>
            <h:button id='start' value=" Start Recording">
            </h:button>
            <h:button id='stop' value="Stop Recording">

            </h:button>
            <h:inputText type="text" id="inputid" />
            <a id='ul'>Downloads List: </a>
        </div>
        <video id='video' autoplay="autoplay"></video>
    </h:form>

    <script>
        var video, reqBtn, startBtn, stopBtn, ul, stream, recorder;
        video = document.getElementById('video');
        reqBtn = document.getElementById('form:request');
        startBtn = document.getElementById('form:start');
        stopBtn = document.getElementById('form:stop');
        ul = document.getElementById('ul');
        input = document.getElementById('form:inputid');
        reqBtn.onclick = requestVideo;
        startBtn.onclick = startRecording;
        stopBtn.onclick = stopRecording;
        startBtn.disabled = true;
        ul.style.display = 'none';
        stopBtn.disabled = true;

        function requestVideo() {
            navigator.mediaDevices.getUserMedia({
            video: true,audio: true}).then(stm => {
                    stream = stm;
                    reqBtn.style.display = 'none';
                    startBtn.removeAttribute('disabled');
                    video.src = URL.createObjectURL(stream);
                    }).catch(e = > console.error(e));
        }

        function startRecording() {
            recorder = new MediaRecorder(stream, {
            mimeType: 'video/mp4'});
            recorder.start();
            stopBtn.removeAttribute('disabled');
            startBtn.disabled = true;
        }

        function stopRecording() {
            recorder.ondataavailable =e => {
                ul.style.display = 'block';
                var a = document.createElement('a'), li = document.createElement('li'), myObject, newpath;
                a.download = ['video_', (new Date() + '').slice(4, 28), '.flv'].join('');
                a.href = URL.createObjectURL(e.data);
                a.textContent = a.download;
                li.appendChild(a);
                ul.appendChild(li);
                input = e.Date;
                console.log(e.data);
                console.log(input);
            };
            recorder.stop();
            startBtn.removeAttribute('disabled');
            stopBtn.disabled = true;
        }
    </script>
 </h:body>
</html>

0 个答案:

没有答案