Question

在我的项目中要求是：报名表

1）录制语音录制按钮然后停止

2）从网络摄像头拍摄图像

我已经为上面做了一些功能使用下面的插件：对于音频插件是：AUDIO-PLUGIN 对于视频图像快照：

window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    video = document.getElementById("video"),
    videoObj = { "video": true },
    errBack = function(error) {
        console.log("Video capture error: ", error.code); 

    };

// Put video listeners into place
if(navigator.getUserMedia) { // Standard
    navigator.getUserMedia(videoObj, function(stream) {
        video.src = stream;
        video.play();
    }, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
    navigator.webkitGetUserMedia(videoObj, function(stream){
        video.src = window.webkitURL.createObjectURL(stream);
        video.play();
    }, errBack);
}
else if(navigator.mozGetUserMedia) { // Firefox-prefixed
    navigator.mozGetUserMedia(videoObj, function(stream){
        video.src = window.URL.createObjectURL(stream);
        video.play();
    }, errBack);
}   
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 313,350);
var dataURL = canvas.toDataURL();
});
}, false);

我有两个问题，

1）Firefox仅访问一种媒体（视频或音频），但Chrome要求视频和音频。然后访问音频权限。

2）我的客户想要，当打开注册表格然后不问许可接受这些视频＆amp; audio，（例如：https://www.webrtc-experiment.com/RecordRTC/：此页面加载时，此AUDIO + VIDEO未询问任何浏览器权限。）

请保存我的日子...提前感谢..

function fileSelected() {
    var oFile = document.getElementById('image_file').files[0];
	//alert(oFile.size/1024)
	if(oFile.size/1024 <= 500){		
//	oFile.src = window.URL.createObjectURL(file);
    var oImage = document.getElementById('preview');
    var oReader = new FileReader();
	 oReader.onload = function(e){
        oImage.src = e.target.result;
		var resultStr = oImage.src;
		var result = resultStr.split(",");		
	//	alert(result[1])
		$('#imageData').val(result[1]);		
		};
		//alert($('#imageData').val())
		//console.log("From Upload : "+$('#imageData').val());
    oReader.readAsDataURL(oFile);	
	}else{
		alert(" Your Image Size "+oFile.size/1024+" KB Please Upload Less then 500 KB ")
	}
	
}
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
	// Grab elements, create settings, etc.
	var canvas = document.getElementById("canvas"),
		context = canvas.getContext("2d"),
		video = document.getElementById("video"),
		videoObj = { "video": true },
		errBack = function(error) {
			console.log("Video capture error: ", error.code); 
			
		};

	// Put video listeners into place
	if(navigator.getUserMedia) { // Standard
		navigator.getUserMedia(videoObj, function(stream) {
			video.src = stream;
			video.play();
		}, errBack);
	} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
		navigator.webkitGetUserMedia(videoObj, function(stream){
			video.src = window.webkitURL.createObjectURL(stream);
			video.play();
		}, errBack);
	}
	else if(navigator.mozGetUserMedia) { // Firefox-prefixed
		navigator.mozGetUserMedia(videoObj, function(stream){
			video.src = window.URL.createObjectURL(stream);
			video.play();
		}, errBack);
	}
	// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
	context.drawImage(video, 0, 0, 313,350);
	
	
      // save canvas image as data url (png format by default)
    var dataURL = canvas.toDataURL();

      // set canvasImg image src to dataURL
      // so it can be saved as an image
      document.getElementById('preview').src = dataURL;
	  var result = dataURL.split(",");
	  $('#imageData').val(result[1]);
	 // console.log("From snap : "+result[1]);

	
});
}, false);

.browse-image {
	padding: 25px 15px 0px;
	text-align: center;
}
.browse-image input[type="file"] {
	display: inline !important;
    width: 41% !important;
    float: left;
}
.browse-image input[type=button] {
	display: inline;
	margin-left: 10px;
}
.browse-image span {
	font-size: 18px;
	text-transform: uppercase;
}
.browse-image-button::-webkit-file-upload-button {
  visibility: hidden;
}
.browse-image-button::before {
  content: 'Upload Photo';
  display: inline-block;
  width: 145px;
  text-align: center;
  background: rgba(19,137,173,1);
  background: -moz-linear-gradient(top, rgba(19,137,173,1) 0%, rgba(33,180,226,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(19,137,173,1)), color-stop(100%, rgba(33,180,226,1)));
  background: -webkit-linear-gradient(top, rgba(19,137,173,1) 0%, rgba(33,180,226,1) 100%);
  background: -o-linear-gradient(top, rgba(19,137,173,1) 0%, rgba(33,180,226,1) 100%);
  background: -ms-linear-gradient(top, rgba(19,137,173,1) 0%, rgba(33,180,226,1) 100%);
  background: linear-gradient(to bottom, rgba(19,137,173,1) 0%, rgba(33,180,226,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1389ad', endColorstr='#21b4e2', GradientType=0 );
  border: 0px solid #999;
  border-radius: 3px;
  padding: 15px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 10pt;
  color: #fff;
  text-transform: uppercase;
}
.browse-image input[type=button] {
	width: 145px;
  text-align: center;
  background: rgba(19,137,173,1);
  background: -moz-linear-gradient(top, rgba(19,137,173,1) 0%, rgba(33,180,226,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(19,137,173,1)), color-stop(100%, rgba(33,180,226,1)));
  background: -webkit-linear-gradient(top, rgba(19,137,173,1) 0%, rgba(33,180,226,1) 100%);
  background: -o-linear-gradient(top, rgba(19,137,173,1) 0%, rgba(33,180,226,1) 100%);
  background: -ms-linear-gradient(top, rgba(19,137,173,1) 0%, rgba(33,180,226,1) 100%);
  background: linear-gradient(to bottom, rgba(19,137,173,1) 0%, rgba(33,180,226,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1389ad', endColorstr='#21b4e2', GradientType=0 );
  border: 0px solid #999;
  border-radius: 3px;
  padding: 15px 8px;
  cursor: pointer;
  font-weight: 700;
  font-size: 10pt;
  color: #fff;
  text-transform: uppercase;
}
.take-photo {
	padding: 5px 65px;
}
.take-photo p {
	font-size: 18px;
	padding-bottom: 5px;
}
.voice-buttons {
	padding: 25px 0 0 0;
}
.voice-buttons label {
	font-size: 40px;
	width: 34%;
	padding-left: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div>
<video id="video" width="313" height="350"></video>
<canvas id="canvas" width="313" height="350"></canvas>
<img id="preview" border="1" width="313" height="350" />
<div class="browse-image">
			<input type="file" class="browse-image-button" id="image_file" onchange="fileSelected()">
			<span>or</span><input type="button" value="take photo" id="snap"> 
		</div>
</div>
<div class="voice-buttons">
			<label>Record Voice</label>
			<img src="images/record.png" alt="" id="startrecord" onClick="startRecording()" style="opacity:1" />
			<img src="images/stop.png" alt="" id="stoprecord" onClick="stopRecording()" style="opacity:0.5" />
			<img src="images/play.png" alt="" id="playrecord" onClick="playrecording()" style="opacity:1" />
		</div>
</body>

在Firefox单浏览器页面中访问音频和视频

0 个答案: