navigator.mediaDevices.getUserMedia().then(stream=>{
//a recorder is created
var mediaRecorder = new MediaRecorder(stream);
//started it
mediaRecorder.start();
//an array is created that receives all the data
var recordedChunks = [];
//fill it
mediaRecorder.ondataavailable = function(e){recordedChunks.push(e.data)};
//when stopped downloads the recording
mediaRecorder.onstop=function(){
var blob = new Blob(recordedChunks, {
'type': 'video/mp4'
});
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
document.body.appendChild(a);
a.style = 'display: none';
a.href = url;
a.download = 'test.webm';
a.click();
window.URL.revokeObjectURL(url);
}
}.catch()
This code works for me, but when the video is downloaded …
javascript video-capture getusermedia web-mediarecorder mediadevices
为了从清单 v2 中的选项卡捕获输出音频流，可以chrome.tabCapture.capture在后台脚本中使用 API 来获取流。但是，在清单 v3 中，tabCapture 已移至前台，并且在后台脚本中不可用。它在内容脚本中都不可用。
在尝试了一些事情之后，我终于可以tabCapture在弹出脚本中工作了。但是，在我的用例中，弹出窗口无法长时间保持打开状态以捕获流。相反，我偶然发现了它给我一个streamIdgetMediaStreamId的方法。tabCapture所以，我想出了这个：
chrome.tabs.query({
active: true,
currentWindow: true
}, (tabs) => {
var tab = tabs[0];
chrome.tabCapture.getMediaStreamId({consumerTabId: tab.id}, (streamId) => {
chrome.tabs.sendMessage(tab.id, { action: 'streamId', streamId: streamId });
});
});在文件中存在的上述脚本中popup.js，获取streamId后，我将其发送到内容脚本。我一直专注于如何从该streamId 创建流，以便可以捕获/记录该流。文档提到了使用，getUserMedia()但我在那里并不幸运。这是我可以通过其他问题的一些帮助想出的（但它不起作用，我收到此错误DOMException: Error starting tab capture）：
navigator.mediaDevices.getUserMedia({
audio: {
mandatory: {
chromeMediaSource: 'tab',
chromeMediaSourceId: streamId
}
}
})我试图找出如何使 tabCapture 在清单 v3 中工作。
javascript google-chrome-extension getusermedia mediadevices chrome-extension-manifest-v3
我正在开发一个记录用户语音输入的网络应用程序。由于某种原因，在 ios safari 上需要花费很多时间才能通过 mediaDevices.getUsearMedia 获取用于录制的媒体流。我创建了以下测试页面来测量不同浏览器之间的时间延迟。如果有人能对此有深入的了解，我将非常感激。
IOS safari - 600 至 800 毫秒
Chrome 桌面版 - 4 毫秒
Chrome Android - 40 至 60 毫秒
<!DOCTYPE html>
<html>
<body>
<h1 style="margin: 100px">get user media time test</h1>
<div width="300px" height="300px" style="margin: 100px">
<button id="btn" style="height:100px; width:250px; font-size:25px;">call getUserMedia</button>
</div>
<script>
var btn = document.getElementById("btn");
btn.onclick = myFunction;
function myFunction() {
var time1 = new Date().getTime();
navigator.mediaDevices.getUserMedia({ video:false ,audio: true})
.then(function(stream) {
var time2 = new Date().getTime();
var diff = time2-time1;
console.log("delay …我正在开发一款利用 Amazon Chime 的视频会议应用程序。我已关注Amazon Chime SDK JS的 npm 页面，并设法获取服务器响应并初始化会议会话。然而，问题是当我尝试获取音频输出设备的数组时，它在 Safari 上是一个长度为零的数组，而在 Chrome 和 Firefox 等浏览器中，它工作得很好，并且我得到了一个非零长度的数组。我该如何解决这个问题？
这是我到目前为止编写的代码：
import {
ConsoleLogger,
DefaultDeviceController,
DefaultMeetingSession,
LogLevel,
MeetingSessionConfiguration
} from 'amazon-chime-sdk-js';
const logger = new ConsoleLogger('MyLogger', LogLevel.INFO);
const deviceController = new DefaultDeviceController(logger);
// You need responses from server-side Chime API. See below for details.
const meetingResponse = /* Server response */;
const attendeeResponse = /* Server response */;
const configuration = new MeetingSessionConfiguration(meetingResponse, attendeeResponse);
const meetingSession = new DefaultMeetingSession(
configuration,
logger,
deviceController
); …我正在尝试开发一个网站，可以在移动设备中从 Chrome 切换相机。当前我使用 vuejs 2 框架并使用 MediaDevices.getUserMedia() 来拍摄图像。从这里我明白我将如何使用我的代码。前置和后置摄像头单独工作。但我试图在其中进行切换，但它不起作用。这是我的代码：
<template>
<div class="container" id="scanIdCardPage">
<div class="scanIdCardDiv">
<div class="scanCardContainer" v-show="afterTakingPhoto">
<video ref="video" id="video" :style="{width: divWidth}" autoplay></video>
<canvas ref="canvas" id="canvas" width="320" height="240" style="display: none;"></canvas>
</div>
</div>
</div>
<div class="takePhotoBtnDiv">
<div>
<button type="button" class="btn btn-info" @click="camera('environment')">Back Camera</button>
<button type="button" class="btn btn-info" @click="camera('user')">front Camera</button>
</div>
</div>
</div>
</template>
export default {
data() {
video: {},
front: true
},
methods: {
Camera() {
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: { facingMode: (this.front? "user" : "environment") …我正在编写代码以允许页面内select元素选择相机。默认相机应该是“环境”相机，而其余的应该在后面列出。
使用以下调用，我可以从适当的面向“环境”的摄像头流式传输视频：
navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment"} }).then(function (stream) {
// display stream on web page
...
});
同样，我可以使用以下方法获取可用设备列表：
navigator.mediaDevices.enumerateDevices().then(
devices => {
// build list of options
}
);
我存储deviceId每个选项的 ，并使用它来显示来自那个运行良好的相机的提要。
但是，默认选择的选项不一定是“环境”相机。并且从返回的流对象getUserMedia似乎没有一种简单的方法来确定deviceId提供该流的设备。我似乎也找不到任何其他方法来确定面向“环境”的相机。
这是不可能的还是getDeviceIdForFacingMode我刚刚错过了某种功能？
我正在使用运行 iOs 13 的第 5 代 iPad，当我访问此链接时：https : //webrtc.github.io/samples/src/content/devices/input-output/
navigator.mediaDevices在 iOs 13 上使用Chrome 78似乎未定义，但在 Windows 10 上使用Chrome 78定义...
有没有人有同样的问题？有什么替代方法可以让它在 iOs 上与 Chrome 一起使用？
I am facing a wired issue when i run my angularjs application on my localhost it is working fine. But when I host it on IP address it gives error
TypeError: Cannot read property 'getSupportedConstraints' of undefined
This is my code
let mediaSourceSupport = !!navigator.mediaDevices.getSupportedConstraints()
.mediaSource;
当在 localhost navigator.mediaDevices 对象上提供服务时，我得到http://prntscr.com/qpf32s 但当主机在 IP 地址上时，它会给出 undefind
TL;DR如何运行使用navigator.mediaDevicesTestCafe 和 Chromium 及其方法的功能测试？
我正在尝试使用 TestCafe 编写功能测试来测试一些 WebRTC 代码。我正在使用反应。我有一个枚举设备的自定义钩子：
function useUpdateDeviceList() {
const dispatch = useDispatch();
useEffect(() => {
async function updateDeviceList() {
const { audioInputs, videoInputs } = await getInputDeviceInfos();
dispatch(setAudioInputs(audioInputs));
dispatch(setVideoInputs(videoInputs));
}
updateDeviceList();
console.log('navigator', navigator);
navigator.mediaDevices.ondevicechange = updateDeviceList;
return () => {
navigator.mediaDevices.ondevicechange = null;
};
}, [dispatch]);
}
哪里getInputDeviceInfos调用navigator.mediaDevices.enumerateDevices。
当我在浏览器中运行此代码时，它可以完美运行。当它在 TestCafe 的功能测试中运行时，它抛出。
TypeError: Cannot set property 'ondevicechange' of undefined
彻底的谷歌搜索只给出了添加标志--use-fake-ui-for-media-stream和--use-fake-device-for-media-stream启动命令的答案（前者避免了授予摄像头/麦克风权限的需要，并且梯形图getUserMedia()根据文档提供测试模式而不是实时摄像头输入），其中我做了：
TypeError: Cannot …我有一个网页，我希望用户用他的笔记本电脑/手机相机拍照。一旦他点击按钮，就会显示一个模式，下面的 js 将启动相机流来拍照：
function startStreaming() {
if (null != cameraStream) {
var track = cameraStream.getTracks()[0];
track.stop();
stream.load();
cameraStream = null;
}
//const audioSource = audioInputSelect.value;
const videoSource = videoSelect.value;
const constraints = {
//audio: {deviceId: audioSource ? {exact: audioSource} : undefined},
video: {
deviceId: videoSource ? {
exact: videoSource
} : undefined
}
};
navigator.mediaDevices.getUserMedia(constraints).then(gotStream).then(gotDevices).catch(handleError);
var mediaSupport = 'mediaDevices' in navigator;
if (mediaSupport && null == cameraStream) {
const videoSource = videoSelect.value;
const constraints = {
video: {
deviceId: videoSource …我正在尝试旋转视频标签并将其置于“画中画”模式，
我知道我们可以使用 Transform:rotateY(180deg) 旋转视频，但 css 不会应用于“pip”模式下的视频。
所以我想如果我们可以旋转它的块然后以“pip”模式调用它
这是代码，有什么建议请...
const cameraRecording = async function(micStatus){
try{
const stream = await navigator.mediaDevices.getUserMedia({
video : true,
audio: micStatus ? false : true
});
cameraRecElem.srcObject = stream;
record(stream, true);
}
catch(err){
showError('Error accessing camera or microphone');
}
};
const record = function(stream, pipStatus, stream2){
recorder = new MediaRecorder(stream);
recorder.addEventListener('start', (e) =>{
chunks = [];
if(pipStatus) cameraRecElem.requestPictureInPicture() && (cameraRecElem.style.opacity="0");
});
recorder.addEventListener('dataavailable', (e) =>{
chunks.push(e.data);
});
recorder.addEventListener('stop', (e) =>{
stream.getTracks().forEach(track => track.stop());
if(stream2) stream2.getTracks().forEach(track => track.stop());
clearInterval(counting); …mediadevices ×11
javascript ×7
getusermedia ×3
navigator ×2
safari ×2
webrtc ×2
amazon-chime ×1
angularjs ×1
audio-device ×1
chrome-extension-manifest-v3 ×1
chromium ×1
chunks ×1
html ×1
ios ×1
jquery ×1
testcafe ×1
undefined ×1
video ×1
vuejs2 ×1